import { Flex, Stack } from "@mantine/core";
import { useReceiptContext } from "../contexts/ReceiptContext.tsx";
import { ReceiptBox } from "../types/types.tsx";
import AccordionBoxes from "./AccordionBoxes.tsx";
import AccordionPallets from "./AccordionPallets.tsx";
import InlineButton from "../../../../../components/InlineButton/InlineButton.tsx";
import { IconPlus } from "@tabler/icons-react";

const ReceiptEditor = () => {
    const {
        fixed,
        palletsHandlers,
        boxesHandlers,
        nextId,
        scanningData,
    } = useReceiptContext();

    const { isScanning } = scanningData;

    if (!fixed) return;

    const createPallet = () => {
        const pallet = {
            id: nextId(),
            boxes: [],
            residualProducts: [],
        };
        palletsHandlers.prepend(pallet);
    };

    const createBox = () => {
        const box = {
            id: nextId(),
            residualProducts: [],
        } as ReceiptBox;
        boxesHandlers.prepend(box);
    };

    return (
        <Stack>
            <Flex gap="md">
                <InlineButton
                    onClick={() => createPallet()}
                    flex={1}
                    disabled={isScanning}
                >
                    <IconPlus />
                    Паллет
                </InlineButton>
                <InlineButton
                    onClick={() => createBox()}
                    flex={1}
                    disabled={isScanning}
                >
                    <IconPlus />
                    Короб
                </InlineButton>
            </Flex>
            <AccordionBoxes />
            <AccordionPallets />
        </Stack>
    );
};

export default ReceiptEditor;
