import { UserSchema } from "../../../../client";
import { BaseTable } from "../../../../components/BaseTable/BaseTable.tsx";
import { ActionIcon, Button, Flex, rem, Text, Tooltip } from "@mantine/core";
import { useUsersTableColumns } from "./columns.tsx";
import { IconEdit, IconQrcode, IconTrash } from "@tabler/icons-react";
import { modals } from "@mantine/modals";
import { MRT_TableOptions } from "mantine-react-table";
import { useUsersTabContext } from "../../tabs/Users/contexts/UsersTabContext.tsx";


const UsersTable = () => {
    const columns = useUsersTableColumns();

    const {
        usersCrud: {
            items,
            onChange,
            onCreate,
            onDelete,
        },
        refetch,
    } = useUsersTabContext();

    const onEditClick = (user: UserSchema) => {
        if (!onChange) return;
        console.log(user);
        modals.openContextModal({
            modal: "userFormModal",
            title: "Редактирование пользователя",
            withCloseButton: false,
            innerProps: {
                onChange,
                element: user,
                refetch,
            },
            size: "md",
        });
    };
    const onDeleteClick = (user: UserSchema) => {
        if (!onDelete) return;
        modals.openConfirmModal({
            title: "Удаление пользователя",
            children: (
                <Text size="sm">
                    Вы уверены что хотите удалить пользователя {user.firstName}{" "}
                    {user.secondName}
                </Text>
            ),
            labels: { confirm: "Да", cancel: "Нет" },
            confirmProps: { color: "red" },
            onConfirm: () => onDelete(user),
        });
    };
    const onCreateClick = () => {
        if (!onCreate) return;
        modals.openContextModal({
            modal: "userFormModal",
            title: "Редактирование пользователя",
            withCloseButton: false,
            innerProps: {
                onCreate,
                refetch,
            },
            size: "md",
        });
    };
    const onGenerateQrClick = (user: UserSchema) => {
        const pdfWindow = window.open(
            `${import.meta.env.VITE_API_URL}/work-shifts/generate-qr-code/${user.id}`,
        );
        if (!pdfWindow) return;
        pdfWindow.print();
    };
    return (
        <BaseTable
            data={items}
            columns={columns}
            restProps={
                {
                    enableSorting: false,
                    enableColumnActions: false,
                    enableTopToolbar: true,
                    renderTopToolbar: (
                        <Flex p={rem(10)}>
                            <Button
                                variant={"default"}
                                onClick={() => onCreateClick()}>
                                Создать пользователя
                            </Button>
                        </Flex>
                    ),
                    enableRowActions: true,
                    renderRowActions: ({ row }) => (
                        <Flex gap="md">
                            <Tooltip
                                onClick={() => {
                                    onEditClick(row.original);
                                }}
                                label="Редактировать">
                                <ActionIcon variant={"default"}>
                                    <IconEdit />
                                </ActionIcon>
                            </Tooltip>
                            <Tooltip
                                onClick={() => {
                                    onDeleteClick(row.original);
                                }}
                                label="Удалить">
                                <ActionIcon variant={"default"}>
                                    <IconTrash />
                                </ActionIcon>
                            </Tooltip>
                            <Tooltip
                                onClick={() => {
                                    onGenerateQrClick(row.original);
                                }}
                                label="QR-код">
                                <ActionIcon variant={"default"}>
                                    <IconQrcode />
                                </ActionIcon>
                            </Tooltip>
                        </Flex>
                    ),
                } as MRT_TableOptions<UserSchema>
            }
        />
    );
};

export default UsersTable;
