<script setup lang="ts">
import { __ } from '@wordpress/i18n'
import { getI18n } from '@/helper'
import { toRefs, ref } from 'vue'
import {
  purifyHtml,
} from '@/helper'

const props = defineProps({
  params: {
    type: Object,
    required: true,
  },
})
const { params } = toRefs(props)
const arg = params.value
const paginated = ref<any>(arg['paginated'] ?? false)
const columns = arg['fields']
const classes = ref<string>(arg['classes'])
const dataSource = ref<any>(arg['data'])
</script>

<template>
  <div :class="classes">
    <div class="stwlite-tw-border stwlite-tw-border-gray-200 stwlite-tw-border-solid stwlite-tw-rounded-lg stwlite-tw-overflow-hidden">
      <div class="stwlite-tw-bg-gray-50 stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-border-0 stwlite-tw-border-b stwlite-tw-border-gray-200 stwlite-tw-border-solid">
        <div class="stwlite-tw-grid stwlite-tw-grid-cols-12 stwlite-tw-gap-4 stwlite-tw-text-left stwlite-tw-text-xs stwlite-tw-font-medium stwlite-tw-text-gray-500 stwlite-tw-uppercase stwlite-tw-tracking-wider">
          <div v-for="column in columns" :key="column.dataIndex" :class="`col-span-${column.width ?? 2}`">{{ column.title }}</div>
        </div>
      </div>
      
      <div v-if="dataSource.length > 0">
        <div v-for="(item, index) in dataSource" :key="item.id" class="stwlite-tw-px-6 stwlite-tw-py-3 stwlite-tw-border-0 stwlite-tw-border-b stwlite-tw-border-gray-200 stwlite-tw-border-solid">
          <div class="stwlite-tw-grid stwlite-tw-grid-cols-12 stwlite-tw-gap-4 stwlite-tw-text-left stwlite-tw-text-xs stwlite-tw-text-gray-500 stwlite-tw-tracking-wider">
            <div class="stwlite-tw-col-span-3 stwlite-tw-inline-flex stwlite-tw-items-center" v-html="purifyHtml(item[columns[index].dataIndex] ?? '')" />
          </div>
        </div>
      </div>

      <!-- Empty state for products -->
      <div v-else class="stwlite-tw-px-6 stwlite-tw-py-12">
        <div class="stwlite-tw-text-center">
          <div class="mx-auto stwlite-tw-w-16 stwlite-tw-h-16 stwlite-tw-bg-gray-100 stwlite-tw-rounded-full stwlite-tw-flex stwlite-tw-items-center stwlite-tw-justify-center stwlite-tw-mb-4">
            <ShoppingBag class="stwlite-tw-w-6 stwlite-tw-h-6 stwlite-tw-text-gray-400" />
          </div>
          <p class="stwlite-tw-text-gray-500 stwlite-tw-text-sm">{{ getI18n('empty_table', __( 'No data found', 'saveto-wishlist-lite-for-woocommerce' )) }}</p>
        </div>
      </div>
    </div>
  </div>
</template>