import AddEmbassyPaymentModal from "@/components/customComponent/AddModal/AddEmbassyPaymentModal";
import AddFileModal from "@/components/customComponent/AddModal/AddFileModal";
import AddPaymentModal from "@/components/customComponent/AddModal/AddPaymentModal";
import { DeleteToast } from "@/components/customComponent/Toast/ToastMixin";
import ReuseableColumn from "@/components/dataTableReuseable/ReuseableColumn";
import { Button } from "@/components/ui/button";
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import { usePage } from "@inertiajs/react";
import {
    useReactTable,
    getCoreRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    getFilteredRowModel,
    flexRender,
} from "@tanstack/react-table";
import React from "react";
export default function EmbassyPayments() {
    const { embassies, embassyMember } =
        usePage().props;
    const data = embassies ?? [];
    const handleDelete = (id) => {
        const DeleteToastProps = {
            alertTitle: "Do you want to Delete File?",
            deleteRoute: "files",
            id: id,
            successPurpose: "File",
            cancelPurpose: "File",
        };
        DeleteToast(DeleteToastProps);
    };

    const columns = ReuseableColumn({
        showActions: true,
        embassyPayment: true,
        columnConfig: [
            { accessorKey: "name", header: "Embassy Member Name" },
            { accessorKey: "phone", header: "Phone Number" },
            { accessorKey: "total_files", header: "Total File" },
            { accessorKey: "payable_amount", header: "Payable Amount" },
            { accessorKey: "paid_amount", header: "Paid Amount" },
            { accessorKey: "due_amount", header: "Due Amount" },
        ],
        handleDelete,
    });
    const [sorting, setSorting] = React.useState([]);
    const [columnFilters, setColumnFilters] = React.useState([]);
    const [columnVisibility, setColumnVisibility] = React.useState({});
    const [globalFilter, setGlobalFilter] = React.useState("");
    const [rowSelection, setRowSelection] = React.useState({});
    const globalFilterFn = (row, columnId, filterValue) => {
        const search = String(filterValue).toLowerCase().trim();

        const searchableFields = [
            row.original.file_name,
            row.original.web_file_number,
            row.original.passport_no,
            row.original.agent?.name,
            row.original.visa_type?.visa_type,
            row.original.visa_status?.visa_status,
            row.original.file_condition?.condition,
        ];

        return searchableFields.some(
            (value) =>
                value !== null &&
                value !== undefined &&
                String(value).toLowerCase().includes(search)
        );
    };

    const table = useReactTable({
        data,
        columns,

        state: {
            sorting,
            columnFilters,
            columnVisibility,
            rowSelection,
            globalFilter,
        },

        onGlobalFilterChange: setGlobalFilter,
        globalFilterFn,

        onSortingChange: setSorting,
        onColumnFiltersChange: setColumnFilters,
        onColumnVisibilityChange: setColumnVisibility,
        onRowSelectionChange: setRowSelection,

        getCoreRowModel: getCoreRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getPaginationRowModel: getPaginationRowModel(),

        initialState: {
            pagination: {
                pageSize: 100,
            },
        },
    });

    const modalProps = {
        buttonName: "Make Payment",
        modalTitle: "Make Embassy Payment",
        embassyMember
    };

    return (
        <div className="w-full">
            <div className="flex items-center py-4 gap-4">
                <Input
                    placeholder="Search anything"
                    value={globalFilter ?? ""}
                    onChange={(e) => setGlobalFilter(e.target.value)}
                    className="max-w-full bg-white"
                />
                <DropdownMenu>
                    <AddEmbassyPaymentModal modalProps={modalProps} />
                    <DropdownMenuContent align="end">
                        {table
                            .getAllColumns()
                            .filter((column) => column.getCanHide())
                            .map((column) => {
                                return (
                                    <DropdownMenuCheckboxItem
                                        key={column.id}
                                        className="capitalize"
                                        checked={column.getIsVisible()}
                                        onCheckedChange={(value) =>
                                            column.toggleVisibility(!!value)
                                        }
                                    >
                                        {column.id}
                                    </DropdownMenuCheckboxItem>
                                );
                            })}
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
            <div className="overflow-hidden rounded-md border">
                <Table className="bg-white">
                    <TableHeader>
                        {table.getHeaderGroups().map((headerGroup) => (
                            <TableRow key={headerGroup.id}>
                                {headerGroup.headers.map((header) => {
                                    return (
                                        <TableHead key={header.id}>
                                            {header.isPlaceholder
                                                ? null
                                                : flexRender(
                                                      header.column.columnDef
                                                          .header,
                                                      header.getContext()
                                                  )}
                                        </TableHead>
                                    );
                                })}
                            </TableRow>
                        ))}
                    </TableHeader>
                    <TableBody>
                        {table.getRowModel().rows?.length ? (
                            table.getRowModel().rows.map((row) => (
                                <TableRow
                                    key={row.id}
                                    data-state={
                                        row.getIsSelected() && "selected"
                                    }
                                >
                                    {row.getVisibleCells().map((cell) => (
                                        <TableCell key={cell.id}>
                                            {flexRender(
                                                cell.column.columnDef.cell,
                                                cell.getContext()
                                            )}
                                        </TableCell>
                                    ))}
                                </TableRow>
                            ))
                        ) : (
                            <TableRow>
                                <TableCell
                                    colSpan={columns.length}
                                    className="h-24 text-center"
                                >
                                    No results.
                                </TableCell>
                            </TableRow>
                        )}
                    </TableBody>
                </Table>
            </div>
            <div className="flex items-center justify-end space-x-2 py-4">
                <div className="space-x-2">
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={() => table.previousPage()}
                        disabled={!table.getCanPreviousPage()}
                    >
                        Previous
                    </Button>
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={() => table.nextPage()}
                        disabled={!table.getCanNextPage()}
                    >
                        Next
                    </Button>
                </div>
            </div>
        </div>
    );
}