import { FC } from "react";
import { IconMoodSad } from "@tabler/icons-react";
import { Button, Flex, Group, ScrollArea, Text } from "@mantine/core";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import { DealProductSchema } from "@/lib/client";
import useProductServicesTable from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/hooks/utils/useProductServicesTable";
import useProductServicesTableColumns from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/hooks/utils/useProductServicesTableColumns";

type Props = {
    dealProduct: DealProductSchema;
};

const ProductServicesTable: FC<Props> = ({ dealProduct }) => {
    const { onChange, onCreate, onDelete, isEmptyTable } =
        useProductServicesTable({ dealProduct });

    const columns = useProductServicesTableColumns({
        data: dealProduct.productServices,
        quantity: dealProduct.quantity,
        onDelete,
        onChange,
    });

    return (
        <Flex
            flex={1}
            gap={"xs"}
            direction={"column"}
            justify={"space-between"}
            style={{ minHeight: 0 }}>
            <ScrollArea
                flex={10}
                scrollbarSize={10}
                onTouchStart={e => e.stopPropagation()}
                onTouchMove={e => e.stopPropagation()}>
                <BaseTable
                    records={dealProduct.productServices}
                    columns={columns}
                    groups={undefined}
                    idAccessor={"serviceId"}
                    verticalSpacing={"md"}
                    withTableBorder
                    style={{
                        height: isEmptyTable ? "8rem" : "auto",
                    }}
                    emptyState={
                        <Group
                            gap={"xs"}
                            mt={isEmptyTable ? "xl" : 0}>
                            <Text>Нет услуг</Text>
                            <IconMoodSad />
                        </Group>
                    }
                />
            </ScrollArea>
            <Button
                flex={1}
                py={"xs"}
                onClick={onCreate}
                variant={"default"}>
                Добавить услугу
            </Button>
        </Flex>
    );
};
export default ProductServicesTable;
