Fulfillment-Frontend/src/pages/DealsPage/tabs/ShippingTab/components/ShippingTree.tsx

import { useDealPageContext } from "../../../contexts/DealPageContext.tsx";
import { Accordion, ActionIcon, Button, Center, Group, rem, Stack, Title, Tooltip } from "@mantine/core";
import { BoxSchema, PalletSchema, ShippingProductSchema } from "../../../../../client";
import ShippingProductsTable from "./ShippingProductsTable.tsx";
import BoxesTable from "./BoxesTable.tsx";
import { IconBox, IconPlus, IconSpace, IconTrash } from "@tabler/icons-react";
import useShipping from "../hooks/useShipping.tsx";

const ShippingTree = () => {
    const { selectedDeal: deal } = useDealPageContext();

    const {
        onCreateBoxInPallet,
        onCreateShippingProduct,
        onDeletePalletClick,
        palletIds,
    } = useShipping();

    const sortById = (data?: PalletSchema[] | BoxSchema[] | ShippingProductSchema[]) => {
        return data?.sort((a, b) => a.id - b.id);
    };

    const getPallets = () => {
        const sortedPallets = sortById(deal?.pallets) as PalletSchema[];
        const pallets = sortedPallets?.map((pallet => {
            palletIds.push(pallet.id.toString());
            return (
                <Accordion.Item key={pallet.id} value={pallet.id.toString()}>
                    <Center>
                        <Accordion.Control icon={<IconSpace />}>
                            Паллет - П{pallet.id}
                        </Accordion.Control>
                        {removePalletButton(pallet.id)}
                    </Center>
                    <Accordion.Panel>
                        {getPalletContent(pallet)}
                    </Accordion.Panel>
                </Accordion.Item>
            );
        })) ?? [];

        if (deal?.boxes && deal?.boxes.length > 0) {
            const boxes = deal?.boxes.sort((b1, b2) => (b1.id - b2.id));
            const itemValue = "noPallets";
            const boxesWithoutPallet = (
                <Accordion.Item key={-1} value={itemValue}>
                    <Accordion.Control icon={<IconBox />}>
                        Короба без паллетов
                    </Accordion.Control>
                    <Accordion.Panel>
                        <BoxesTable items={boxes} />
                    </Accordion.Panel>
                </Accordion.Item>
            );
            pallets.unshift(boxesWithoutPallet);
            palletIds.push(itemValue);
        }

        return pallets;
    };

    const removePalletButton = (palletId: number) => {
        return (
            <Tooltip label="Удалить паллет">
                <ActionIcon
                    variant={"default"}
                    onClick={() => onDeletePalletClick(palletId)}
                    mx={"md"}
                >
                    <IconTrash />
                </ActionIcon>
            </Tooltip>
        );
    };

    const createBoxOrShippingProductButton = (palletId: number, isBox: boolean) => {
        const createButtonLabel = isBox ? "Добавить короб" : "Добавить товар";

        return (
            <Button
                variant={"default"}
                onClick={() => {
                    if (isBox) {
                        onCreateBoxInPallet(palletId);
                    } else {
                        onCreateShippingProduct(palletId);
                    }
                }}
            >
                <Group gap={rem(5)}>
                    <IconPlus />
                    {createButtonLabel}
                </Group>
            </Button>
        );
    };

    const getPalletContent = (pallet: PalletSchema) => {
        const isEmpty = pallet.boxes.length === 0 && pallet.shippingProducts.length === 0;
        const isBox = pallet.boxes.length > 0;
        const title = isEmpty ? "Пустой" : isBox ? "Короба" : "Товары";

        let palletButtons;
        if (isEmpty) {
            palletButtons = [
                createBoxOrShippingProductButton(pallet.id, true),
                createBoxOrShippingProductButton(pallet.id, false),
            ];
        } else {
            palletButtons = [
                createBoxOrShippingProductButton(pallet.id, isBox),
            ];
        }

        const boxes = sortById(pallet.boxes) as BoxSchema[];
        const shippingProducts = sortById(pallet.shippingProducts) as ShippingProductSchema[];

        let table;
        if (!isEmpty) {
            if (isBox) {
                table = (<BoxesTable items={boxes} />);
            } else {
                table = (<ShippingProductsTable items={shippingProducts} />);
            }
        }

        return (
            <Stack gap={rem(5)}>
                <Group justify={"space-between"}>
                    <Title order={6}>{title}</Title>
                    <Group gap={rem(10)}>
                        {...palletButtons}
                    </Group>
                </Group>
                {table}
            </Stack>
        );
    };

    return (
        <Accordion
            multiple={true}
            defaultValue={palletIds}
            bd={"solid 1px gray"}
        >
            {getPallets()}
        </Accordion>
    );
};

export default ShippingTree;