import { FC } from "react";
import { IconMoodSad } from "@tabler/icons-react";
import { Button, Flex, Group, ScrollArea, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import { DealProductSchema, ProductServiceSchema } from "@/lib/client";
import useProductServicesTableColumns from "@/modules/dealModularEditorTabs/FulfillmentBase/mobile/components/ProductServicesTable/useProductServicesTableColumns";
import { useFulfillmentBaseContext } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/contexts/FulfillmentBaseContext";

type Props = {
    dealProduct: DealProductSchema;
};

const ProductServicesTable: FC<Props> = ({ dealProduct }) => {
    const { productServiceCrud, dealProductsList } =
        useFulfillmentBaseContext();

    const onChange = (item: ProductServiceSchema) => {
        const excludeServiceIds = dealProduct.productServices.map(
            productService => productService.service.id
        );
        const totalQuantity = dealProductsList.dealProducts.reduce(
            (sum, prod) => prod.quantity + sum,
            0
        );

        modals.openContextModal({
            modal: "productServiceEditorModal",
            innerProps: {
                entity: item,
                onChange: values =>
                    productServiceCrud.onUpdate(
                        item.dealId,
                        item.productId,
                        item.serviceId,
                        values
                    ),
                excludeServiceIds,
                quantity: totalQuantity,
                isEditing: true,
            },
            withCloseButton: false,
        });
    };

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

    const onCreateClick = () => {
        const excludeServiceIds = dealProduct.productServices.map(
            productService => productService.service.id
        );

        modals.openContextModal({
            modal: "productServiceEditorModal",
            innerProps: {
                onCreate: values =>
                    productServiceCrud.onCreate({ ...dealProduct, ...values }),
                excludeServiceIds,
                quantity: dealProduct.quantity,
                isEditing: false,
            },
            withCloseButton: false,
        });
    };

    const isEmptyTable = dealProduct.productServices.length === 0;

    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={onCreateClick}
                variant={"default"}>
                Добавить услугу
            </Button>
        </Flex>
    );
};
export default ProductServicesTable;
