import useReceiptPallet from "../hooks/useReceiptPallet.tsx";
import { ActionIcon, Button, Flex, Group, Stack, Text, Title } from "@mantine/core";
import { IconArrowLeft, IconBarcode, IconPlayerPause, IconPlus } from "@tabler/icons-react";
import InlineButton from "../../../../../components/InlineButton/InlineButton.tsx";
import ReceiptProducts from "./ReceiptProducts.tsx";
import AccordionBoxesOnPallet from "./AccordionBoxesOnPallet.tsx";

type Props = {
    palletId: number;
}

const ReceiptPalletEditor = ({ palletId }: Props) => {
    const {
        pallet,
        fetchPallet,
        clientId,
        onCreateProductClick,
        onCreateBoxClick,
        barcodesProductsMap,
        scanningData,
        toggleScanning,
    } = useReceiptPallet({ palletId });

    if (!pallet) {
        return <Text>Паллет c ID P{palletId} не найден</Text>;
    }

    const {
        isScanning,
        boxId,
    } = scanningData;

    const createButtons = () => {
        const isBoxes = pallet.boxes.length > 0;
        const isProducts = pallet.residualProducts.length > 0;
        const isBoth = !(isBoxes || isProducts);
        return (
            <Group>
                {(isBoxes || isBoth) && (
                    <InlineButton onClick={onCreateBoxClick} flex={1} disabled={isScanning}>
                        <IconPlus />
                        Короб
                    </InlineButton>
                )}
                {(isProducts || isBoth) && (
                    <InlineButton onClick={onCreateProductClick} flex={1} disabled={isScanning}>
                        <IconPlus />
                        Товар
                    </InlineButton>
                )}
            </Group>
        );
    };

    const renderPalletData = () => {
        if (!clientId) return;
        if (pallet?.boxes.length !== 0) {
            return (
                <AccordionBoxesOnPallet
                    pallet={pallet}
                    clientId={clientId}
                    fetchPallet={fetchPallet}
                    barcodesProductsMap={barcodesProductsMap}
                    scanningData={scanningData}
                    toggleScanning={toggleScanning}
                />
            );
        }
        if (pallet?.residualProducts.length !== 0) {
            return (
                <ReceiptProducts
                    clientId={clientId}
                    object={pallet}
                    updateObject={fetchPallet}
                    disabled={isScanning}
                />
            );
        }
    };

    const backButton = (
        <Button
            variant={"default"}
            onClick={() => window.location.reload()}
            flex={1}
        >
            <IconArrowLeft />
        </Button>
    );

    const getScanningModeAction = () => {
        if (pallet.boxes.length !== 0) return;

        return (
            <ActionIcon
                variant={"default"}
                onClick={() => toggleScanning(undefined, pallet?.id)}
                disabled={isScanning && !!boxId}
            >
                {isScanning && !boxId ? (
                    <IconPlayerPause />
                ) : (
                    <IconBarcode />
                )}
            </ActionIcon>
        );
    };

    return (
        <Stack>
            <Flex align={"center"} justify={"space-between"}>
                <Flex align={"center"} flex={9} gap={"md"}>
                    {backButton}
                    <Title flex={8} order={3}>
                        Паллет ID: П{pallet?.id}
                    </Title>
                </Flex>
                {getScanningModeAction()}
            </Flex>
            {createButtons()}
            {renderPalletData()}
        </Stack>
    );
};

export default ReceiptPalletEditor;
