import { useMemo } from 'react';
import { ColumnDef } from '@tanstack/react-table';
import { toast } from 'sonner';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { DataTable } from '@/components/DataTable/OrderDataTable';
// import useTitle from '../hooks/useTitle';
import { DataTableColumnHeader } from '@/components/DataTable/DataTableColumnHeader';
import Error from '@/pages/Errors';
import DataTableShimmer from '@/components/DataTable/DataTableShimmer';
import { Settings2, Trash2 } from 'lucide-react';
import AlertDialogDemo from '@/components/AlertDialogDemo';
import { useDeleteOrderMutation } from '@/app/backend/endpoints/orders';
import { useNavigate } from 'react-router-dom';
import AssignTeachers from '@/components/AssignTeachers';

dayjs.extend(relativeTime);

export default function SchoolsOrders({
  data,
  isLoading,
  isError,
  isFetching,
}: {
  data: any;
  isLoading: boolean;
  isError: boolean;
  isFetching: boolean;
}) {
  const navigate = useNavigate();

  //   useTitle('My Forms | Form Builder');
  const [deleteOrder, { isLoading: isDeleting }] = useDeleteOrderMutation();

  const columns: ColumnDef<OrderI>[] = useMemo(
    () => [
      // {
      //   id: 'select',
      //   header: ({ table }) => (
      //     <div className="flex items-center pl-2">
      //       <Checkbox
      //         checked={table.getIsAllPageRowsSelected()}
      //         onCheckedChange={(value) =>
      //           table.toggleAllPageRowsSelected(!!value)
      //         }
      //         aria-label="Select all"
      //       />
      //     </div>
      //   ),
      //   cell: ({ row }) => (
      //     <div className="flex items-center pl-2">
      //       <Checkbox
      //         checked={row.getIsSelected()}
      //         onCheckedChange={(value) => row.toggleSelected(!!value)}
      //         aria-label="Select row"
      //         onClick={(e) => e.stopPropagation()}
      //       />
      //     </div>
      //   ),
      //   enableSorting: false,
      //   enableHiding: false,
      // },
      {
        accessorKey: 'schoolName',
        header: ({ column }) => (
          <DataTableColumnHeader
            column={column}
            title="School"
            className="pl-2"
            // sorting={false}
          />
        ),
        cell: ({ row }) => (
          <span className="pl-2 font-medium">{row.original.schoolName}</span>
        ),
      },
      {
        accessorKey: 'email',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Email" />
        ),
        cell: ({ row }) => (
          <span className="font-medium">{row.original.email}</span>
        ),
      },
      {
        accessorKey: 'courseName',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Course" />
        ),
        cell: ({ row }) => (
          <span className="font-medium">{row.original.courseName}</span>
        ),
      },
      {
        accessorKey: 'packName',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Pack" />
        ),
        cell: ({ row }) => (
          <span className="font-medium">{row.original.packName}</span>
        ),
      },
      {
        accessorKey: 'price',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Price" />
        ),
        cell: ({ row }) => (
          <span className="font-medium">{row.original.price}</span>
        ),
      },
      {
        id: 'actions',
        header: () => (
          <span className="hover:text-accent-foreground cursor-pointer text-xs">
            Actions
          </span>
        ),
        cell: ({ row }) => (
          <div className="flex space-x-2">
            <AssignTeachers
              schoolId={row.original.school_id!}
              courseId={row.original.course_id}
              maxNbTeachers={row.original.nb_teachers_accounts!}
            />
            <Settings2
              className="cursor-pointer h-8 w-8 border border-grey-300 rounded-md p-[5px]"
              onClick={() => {
                navigate('schools/edit/' + row.original.order_id);
              }}
            />
            <AlertDialogDemo
              title="Are you absolutely sure?"
              description="This action cannot be undone. This will permanently delete the account and remove the data from our servers."
              action="Delete"
              isDeleting={isDeleting}
              onClick={() => {
                deleteOrder({ order_id: row.original.order_id })
                  .unwrap()
                  .then((response) => {
                    toast.success(response.message);
                  })
                  .catch((error: any) => {
                    toast.error(
                      error?.data?.message ?? error?.error.toString()
                    );
                  });
              }}
            >
              <Trash2 className="cursor-pointer h-8 w-8 border border-grey-300 rounded-md p-[5px] text-red-500" />
            </AlertDialogDemo>
          </div>
        ),
      },
    ],
    []
  );

  if (isLoading) return <DataTableShimmer columns={4} />;
  if (isError) return <Error fullScreen={false} />;

  return (
    <DataTable<OrderI, string>
      columns={columns}
      data={data ?? []}
      totalEntries={data?.length ?? 0}
      isFetching={isFetching}
      selectRows
      name="A New School Order"
      title="School Orders"
      createClickHandler={() => {
        navigate('/dashboard/orders/schools/create');
      }}
    />
  );
}