import { Accordion, ActionIcon, Center } from "@mantine/core";
import { IconBarcode, IconBox, IconPlayerPause, IconPlus, IconTrash } from "@tabler/icons-react";
import { ReceiptBox, ReceiptPallet } from "../types/types.tsx";
import { useReceiptContext } from "../contexts/ReceiptContext.tsx";
import ReceiptProducts from "./ReceiptProducts.tsx";

type Props = {
    pallet?: ReceiptPallet;
    palletIdx?: number;
}

const AccordionBoxes = ({ pallet, palletIdx }: Props) => {
    const {
        boxes,
        boxesHandlers,
        onObjectEditClick,
        palletsHandlers,
        setBoxData,
        scanningData,
        toggleScanning,
    } = useReceiptContext();

    const { boxId, isScanning } = scanningData;

    const deleteBox = (boxId: number) => {
        if (palletIdx && pallet) {
            palletsHandlers.setItemProp(palletIdx, "boxes", pallet.boxes.filter(box => box.id !== boxId));
        } else {
            boxesHandlers.filter(item => item.id !== boxId);
        }
    };

    const boxActions = (box: ReceiptBox) => {
        return (
            <>
                <ActionIcon
                    variant={"default"}
                    onClick={() => toggleScanning(box.id, pallet?.id)}
                    mr={"sm"}
                    disabled={isScanning && box.id !== boxId}
                >
                    {isScanning && box.id === boxId ? (
                        <IconPlayerPause />
                    ) : (
                        <IconBarcode />
                    )}
                </ActionIcon>
                <ActionIcon
                    variant={"default"}
                    onClick={() => onObjectEditClick(box, true, pallet)}
                    disabled={isScanning}
                    mr={"sm"}
                >
                    <IconPlus />
                </ActionIcon>
                <ActionIcon
                    variant={"default"}
                    onClick={() => deleteBox(box.id)}
                    disabled={isScanning}
                    mr={"sm"}
                >
                    <IconTrash />
                </ActionIcon>
            </>
        );
    };

    const boxesData = pallet ? pallet.boxes : boxes;

    if (boxesData.length === 0) return;

    return (
        <Accordion multiple={true} bd={"solid 1px gray"}>
            {boxesData.map(box => (
                <Accordion.Item key={box.id} value={box.id.toString()}>
                    <Center>
                        <Accordion.Control icon={<IconBox />}>
                            Короб {box.id}
                        </Accordion.Control>
                        {boxActions(box)}
                    </Center>
                    <Accordion.Panel>
                        <ReceiptProducts
                            products={box.residualProducts}
                            object={box}
                            setObjectData={(box: ReceiptBox) => setBoxData(box, pallet)}
                            disabled={isScanning}
                        />
                    </Accordion.Panel>
                </Accordion.Item>
            ))}
        </Accordion>
    );
};

export default AccordionBoxes;
