"use client"

import * as React from "react"
import type {
  DataTableAdvancedFilterField,
  DataTableFilterField,
} from "@/types/table"

import { useDataTable } from "@/hooks/use-data-table"
import { DataTable } from "@/components/data-table/data-table"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
import { getColumns } from "./email-log-table-columns"
import { getEmailLogList } from "../service"
import { type InferSelectModel } from "drizzle-orm"
import { emailLogs } from "@/db/schema/emailLogs"

interface EmailLogTableProps {
  promises: Promise<[
    Awaited<ReturnType<typeof getEmailLogList>>,
  ]>
}

export function EmailLogTable({ promises }: EmailLogTableProps) {
  const [{ data, pageCount }] = React.use(promises)

  type EmailLog = InferSelectModel<typeof emailLogs>

  const columns = React.useMemo(() => getColumns<EmailLog>(), [])

  const filterFields: DataTableFilterField<EmailLog>[] = []

  const advancedFilterFields: DataTableAdvancedFilterField<EmailLog>[] = [
    { id: "from", label: "From", type: "text" },
    { id: "to", label: "To", type: "text" },
    { id: "subject", label: "Subject", type: "text" },
    { id: "createdAt", label: "발송시간", type: "date" },
  ]

  const { table } = useDataTable({
    data,
    columns,
    pageCount,
    filterFields,
    enablePinning: true,
    enableAdvancedFilter: true,
    initialState: {
      sorting: [{ id: "createdAt", desc: true }],
    },
    getRowId: (row) => String(row.id),
    shallow: false,
    clearOnDefault: true,
  })

  return (
    <DataTable table={table}>
      <DataTableAdvancedToolbar
        table={table}
        filterFields={advancedFilterFields}
        shallow={false}
      />
    </DataTable>
  )
}