import { m } from '@paraglide/messages';
import { PenIcon } from '@phosphor-icons/react';
import { ColumnDef } from '@tanstack/react-table';
import { formatters } from '@utils/formatters';
import { Button } from '../ui/button';
import DeleteHouseAction from './delete-house-dialog';
import EditHouseAction from './edit-house-dialog';
import ViewDetailHouse from './view-house-detail-dialog';

export const houseColumns: ColumnDef<OrganizationWithMembers>[] = [
  {
    accessorKey: 'name',
    header: m.houses_page_ui_table_header_name(),
    meta: {
      thClass: 'w-1/6',
    },
  },
  {
    accessorKey: 'members',
    header: m.houses_page_ui_table_header_members(),
    meta: {
      thClass: 'w-1/6',
    },
    cell: ({ row }) => {
      return row.original.members.length;
    },
  },
  {
    accessorKey: 'createdAt',
    header: m.houses_page_ui_table_header_created_at(),
    meta: {
      thClass: 'w-1/6',
    },
    cell: ({ row }) => {
      return formatters.dateTime(new Date(row.original.createdAt));
    },
  },
  {
    id: 'actions',
    meta: {
      thClass: 'w-1/6',
    },
    cell: ({ row }) => {
      return (
        <div className="flex justify-end gap-2">
          <ViewDetailHouse data={row.original} />
          <EditHouseAction data={row.original}>
            <Button
              type="button"
              variant="ghost"
              size="icon"
              className="rounded-full cursor-pointer text-blue-500 hover:bg-blue-100 hover:text-blue-600"
            >
              <PenIcon size={16} />
              <span className="sr-only">{m.ui_edit_house_btn()}</span>
            </Button>
          </EditHouseAction>
          <DeleteHouseAction data={row.original} />
        </div>
      );
    },
  },
];