import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
import {UserSchema} from "../../../../client";
import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
import {FC} from "react";
import {ActionIcon, Button, Flex, rem, Text, Tooltip} from "@mantine/core";
import {useUsersTableColumns} from "./columns.tsx";
import {IconEdit, IconTrash} from "@tabler/icons-react";
import {modals} from "@mantine/modals";
import {MRT_TableOptions} from "mantine-react-table";

type Props = CRUDTableProps<UserSchema>;

const UsersTable: FC<Props> = ({items, onChange, onDelete, onCreate}) => {
    const columns = useUsersTableColumns();
    const onEditClick = (user: UserSchema) => {
        if (!onChange) return;
        modals.openContextModal({
            modal: "userFormModal",
            title: 'Редактирование пользователя',
            withCloseButton: false,
            innerProps: {
                onChange: onChange,
                element: user,
            },
            size: "md"
        })
    }
    const onDeleteClick = (user: UserSchema) => {
        if (!onDelete) return;
        modals.openConfirmModal({
            title: 'Удаление пользователя',
            // centered: true,
            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: onCreate
            },
            size: "md"
        })
    }
    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>
                    </Flex>
                ),
            } as MRT_TableOptions<UserSchema>}

        />

    )
}

export default UsersTable;