import { FC } from "react";
import { Flex, ScrollArea } from "@mantine/core";
import DealServiceRow from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServiceRow";
import DealServicesTitle from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServicesTitle";
import DealServicesTotalLabel from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServicesTotalLabel";
import ServicesActions from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/ServicesActions";
import { useFulfillmentBaseContext } from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/contexts/FulfillmentBaseContext";

const DealServicesTable: FC = () => {
    const { dealServicesList, dealServicesCrud } = useFulfillmentBaseContext();

    // const isLocked = isDealLocked(deal); // TODO bills

    return (
        <Flex
            direction={"column"}
            gap={"sm"}
            h={"88vh"}>
            <DealServicesTitle />
            <ScrollArea
                flex={1}
                scrollbars={"y"}
                offsetScrollbars={"y"}>
                <Flex
                    direction={"column"}
                    gap={"sm"}>
                    {dealServicesList.dealServices.map(dealService => (
                        <DealServiceRow
                            key={dealService.service.id}
                            value={dealService}
                            onDelete={dealServicesCrud.onDelete}
                            onChange={dealServicesCrud.onUpdate}
                        />
                    ))}
                </Flex>
            </ScrollArea>
            <DealServicesTotalLabel />
            <ServicesActions />
        </Flex>
    );
};
export default DealServicesTable;