import { m } from '@/paraglide/messages';
import { formatters } from '@/utils/formatters';
import { ColumnDef } from '@tanstack/react-table';
import EditBoxDialog from './edit-box-dialog';
import ViewDetailBoxAction from './view-detail-dialog';

export const boxColumns: ColumnDef<BoxWithCount>[] = [
  {
    accessorKey: 'name',
    header: m.boxes_page_ui_table_header_name(),
    id: 'name',
    meta: {
      thClass: 'w-1/6',
      mLabel: m.boxes_page_ui_table_header_name(),
    },
  },
  {
    accessorFn: (row) => row._count.items,
    header: m.boxes_page_ui_table_header_item_count(),
    id: 'quantity',
    meta: {
      thClass: 'w-1/6',
      mLabel: m.boxes_page_ui_table_header_item_count(),
    },
  },
  {
    accessorKey: 'createdAt',
    header: m.boxes_page_ui_table_header_create_at(),
    id: 'time',
    meta: {
      thClass: 'w-2/6',
      mLabel: m.boxes_page_ui_table_header_create_at(),
    },
    cell: ({ row }) => {
      return formatters.dateTime(new Date(row.original.createdAt));
    },
  },
  {
    id: 'actions',
    meta: {
      thClass: 'w-1/6',
    },
    cell: ({ row }) => (
      <div className="flex justify-center w-full">
        <ViewDetailBoxAction data={row.original} />
        <EditBoxDialog data={row.original} />
      </div>
    ),
  },
];
