import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { Toaster } from '@/components/ui/sonner';
import { apiConfig } from '@/config/api.config';
import { ColumnDef } from '@tanstack/react-table';
import { createContext, useCallback, useMemo, useState } from 'react';
import { ListToolBar } from '../blocks/ListToolBar';

interface SelectedUser {
  id: string;
  name: string;
  email: string;
  role: string;
  description: string;
  created_date: Date;
}

interface ContextProps {
  showDetailDialog: boolean;
  handleDetailDialog: (show: boolean, selected_user: SelectedUser | null) => void;
  showAddDialog: boolean;
  handleAddDialog: (show: boolean) => void;
  selectedUser: SelectedUser | null;
}

const initialProps: ContextProps = {
  showDetailDialog: false,
  handleDetailDialog: () => {},
  showAddDialog: false,
  handleAddDialog: () => {},
  selectedUser: null
};

const ManageKycContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.service_dashboard;

const ManageKycContextProvider = ({ children }: { children: React.ReactNode }) => {
  const [showDetailDialog, setShowDetailDialog] = useState(false);
  const [showAddDialog, setShowAddDialog] = useState(false);
  const [selectedUser, setSelectedUser] = useState<SelectedUser | null>(null);

  const handleDetailDialog = useCallback((show: boolean, selected_user: SelectedUser | null) => {
    setSelectedUser(show ? selected_user : null);
    setShowDetailDialog(show);
  }, []);

  const handleAddDialog = useCallback((show: boolean) => {
    setShowAddDialog(show);
  }, []);

  const columns = useMemo<ColumnDef<any>[]>(
    () => [
      {
        accessorFn: (row) => row.id,
        id: 'id',
        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
        enableSorting: true,
        enableHiding: false,
        meta: {
          headerClassName: 'w-[100px]'
        }
      },
      {
        accessorFn: (row) => row.created_date,
        id: 'created_date',
        header: ({ column }) => <DataGridColumnHeader title="Created Date" column={column} />,
        enableSorting: true,
        enableHiding: false,
        meta: {
          headerClassName: 'w-[250px]'
        }
      },
      {
        accessorFn: (row) => row.name,
        id: 'name',
        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
        enableSorting: true,
        enableHiding: false,
        meta: {
          headerClassName: 'w-[350px]'
        }
      },
      {
        accessorFn: (row) => row.description,
        id: 'description',
        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
        enableSorting: true,
        meta: {
          headerClassName: 'w-[350px]'
        }
      },
      {
        id: 'actions',
        enableSorting: false,
        header: ({ column }) => <DataGridColumnHeader title="Action" column={column} />,
        cell: (data: any) => {
          const row = data.row.original;

          return (
            <>
              <button
                className="btn btn-sm btn-icon btn-clear btn-light"
                onClick={() => handleDetailDialog(true, row.id)}
              >
                <KeenIcon icon="notepad-edit" />
              </button>
            </>
          );
        },
        meta: {
          headerClassName: 'w-[100px]',
          cellClassName: 'text-center'
        }
      }
    ],
    [handleDetailDialog]
  );

  return (
    <ManageKycContext.Provider
      value={{
        showDetailDialog,
        handleDetailDialog,
        showAddDialog,
        handleAddDialog,
        selectedUser
      }}
    >
      <Toaster expand visibleToasts={9} duration={3000} />

      <DataGridProvider
        columns={columns}
        pagination={{ size: 10 }}
        toolbar={<ListToolBar />}
        layout={{ card: true }}
        sorting={[{ id: 'name', desc: false }]}
        serverSide={true}
      >
        {children}
      </DataGridProvider>
    </ManageKycContext.Provider>
  );
};

export { ManageKycContextProvider, ManageKycContext };
export type { SelectedUser };
