import { FC } from "react";
import { Flex, Stack } from "@mantine/core";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import AddDealProductButton from "@/modules/dealModularEditorTabs/FulfillmentBase/mobile/components/AddDealProductButton/AddDealProductButton";
import DealProductsTotalLabel from "@/modules/dealModularEditorTabs/FulfillmentBase/mobile/components/DealProductsTotalLabel/DealProductsTotalLabel";
import useDealServicesTableColumns from "@/modules/dealModularEditorTabs/FulfillmentBase/mobile/components/ProductsTabTable/hooks/useDealProductsTableColumns";
import { useFulfillmentBaseContext } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/contexts/FulfillmentBaseContext";

type Props = {
    onSelect: (index: number) => void;
};

const ProductsTabTable: FC<Props> = ({ onSelect }) => {
    const { dealProductsList } = useFulfillmentBaseContext();
    const columns = useDealServicesTableColumns();

    return (
        <Stack
            gap={"xs"}
            m={"xs"}>
            <Flex
                p={"sm"}
                bd={"1px solid var(--mantine-color-default-border)"}
                bdrs={"lg"}>
                <DealProductsTotalLabel />
            </Flex>
            <BaseTable
                records={dealProductsList.dealProducts}
                columns={columns}
                groups={undefined}
                idAccessor={"productId"}
                verticalSpacing={"md"}
                withTableBorder
                onRowClick={event => onSelect(event.index)}
            />
            <AddDealProductButton size={"lg"} />
        </Stack>
    );
};

export default ProductsTabTable;
