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

type RestProps = {
    onMultipleDelete?: (items: DealServiceSchema[]) => void;
}
type Props = CRUDTableProps<DealServiceSchema> & RestProps;
const DealServicesTable: FC<Props> = (
    {
        items,
        onChange,
        onDelete,
        onCreate,
        onSelectionChange,
        onMultipleDelete,
        tableRef
    }) => {
    const serviceIds = items.map(item => item.service.id);


    const columns = useDealServicesTableColumns({
        data: items
    });
    const onCreateClick = () => {
        if (!onCreate) return;
        openContextModal({
            title: "Добавление услуги",
            modal: "addDealService",
            innerProps: {
                onCreate: (event) => onCreate(event as DealServiceSchema),
                serviceIds
            }

        })
    }
    const onEditClick = (service: DealServiceSchema) => {
        if (!onChange) return;
        openContextModal({
            title: "Добавление услуги",
            modal: "addDealService",
            innerProps: {
                element: service,
                onChange,
                serviceIds
            }
        })
    }



    return (
        <>
            <BaseTable
                ref={tableRef}
                data={items}
                columns={columns}
                onSelectionChange={onSelectionChange}
                restProps={{
                    enableGrouping: true,
                    initialState: {grouping: ["service.category"]},
                    enableColumnActions: false,
                    enableSorting: false,
                    enableBottomToolbar: true,
                    enableRowActions: true,
                    enableRowSelection: true,
                    renderBottomToolbar: ({table}) => (
                        <Flex justify={"flex-end"} gap={rem(10)} p={rem(10)}>
                            {(onMultipleDelete && table.getSelectedRowModel().rows.length > 0) && (
                                <Button
                                    onClick={() => {
                                        onMultipleDelete(table.getSelectedRowModel().rows.map(row => row.original))
                                    }}
                                    variant={"filled"}
                                    color={"red"}
                                >
                                    Удалить выбранные
                                </Button>
                            )}
                            <Button onClick={onCreateClick} variant={"default"}>
                                Добавить услугу
                            </Button>

                        </Flex>
                    ),
                    renderRowActions: ({row}) => (
                        <Flex gap="md">
                            <Tooltip label="Удалить">
                                <ActionIcon onClick={() => {
                                    if (onDelete) onDelete(row.original);
                                }} variant={"default"}>
                                    <IconTrash/>
                                </ActionIcon>
                            </Tooltip>
                            <Tooltip label="Редактировать">
                                <ActionIcon onClick={() => {
                                    onEditClick(row.original);
                                }} variant={"default"}>
                                    <IconEdit/>
                                </ActionIcon>
                            </Tooltip>

                        </Flex>
                    )
                } as MRT_TableOptions<DealServiceSchema>}
            />

        </>

    )
}

export default DealServicesTable;