<script setup lang="ts">
import type { ColumnDef } from '@tanstack/vue-table'

import type { DataTableProps } from '@/components/data-table/types'
import type { CombinedItem } from '@/pages/admin/agent-apps/data/schema'

import DataTable from '@/components/data-table/data-table.vue'
import { SelectColumn } from '@/components/data-table/table-columns'
import { generateVueTable } from '@/components/data-table/use-generate-vue-table'
import DataTableViewOptions from '@/components/data-table/view-options.vue'
import { getColumns } from '@/pages/admin/agent-apps/components/columns'
import DataTableToolbar from '@/pages/admin/agent-apps/components/data-table-toolbar.vue'

const props = defineProps<Omit<DataTableProps<CombinedItem>, 'columns'> & {
  onApprove: (row: CombinedItem) => void
  onReject: (row: CombinedItem) => void
  onRemove: (row: CombinedItem) => void
}>()
const emit = defineEmits<{
  refresh: []
}>()

const columns = computed(() => [
  SelectColumn as ColumnDef<CombinedItem>,
  ...getColumns({
    onApprove: props.onApprove,
    onReject: props.onReject,
    onRemove: props.onRemove,
  }),
])

const table = generateVueTable<CombinedItem>({
  get data() { return props.data },
  get loading() { return props.loading },
  columns: columns.value,
}, columns.value)

const columnLabels: Record<string, string> = {
  select: 'admin.agentApps.select',
  itemType: 'admin.agentApps.columns.type',
  agent_name: 'admin.agentApps.columns.agentName',
  app_name: 'admin.agentApps.columns.appName',
  status: 'admin.agentApps.columns.status',
  created_at: 'admin.agentApps.columns.createdAt',
}

defineExpose({
  table,
})
</script>

<template>
  <DataTable :columns="columns" :data :loading :table @refresh="emit('refresh')">
    <template #toolbar>
      <div class="space-y-3">
        <div class="flex items-center justify-end">
          <slot name="actions" />
        </div>
        <div class="flex flex-wrap items-center justify-between gap-2">
          <div class="flex flex-wrap items-center gap-2">
            <DataTableToolbar :table />
            <slot name="filters" />
          </div>
          <DataTableViewOptions :table="table" :column-labels="columnLabels" />
        </div>
      </div>
    </template>
  </DataTable>
</template>
