import { Drawer, rem } from "@mantine/core";
import ExcelDropzone from "../../../../components/ExcelDropzone/ExcelDropzone.tsx";
import styles from "../PrefillDealWithExcelDrawer/PrefillDealsWithExcelDrawer.module.css";
import { usePrefillDealsWithExcelContext } from "../../contexts/PrefillDealsWithExcelContext.tsx";
import ProductsPreview from "./components/ProductsPreview.tsx";
import { BoardSchema } from "../../../../client";

type Props = {
    board: BoardSchema | null;
}

const PrefillDealsWithExcelDrawer = ({ board }: Props) => {
    const {
        prefillWithExcelOpened,
        prefillWithExcelOnClose,
        barcodeProductsMap,
        onDrop,
        excelDropzone,
    } = usePrefillDealsWithExcelContext();

    const getBody = () => {
        if (!board || board.dealStatuses.length === 0) return;

        if (barcodeProductsMap?.size === 0) {
            return <ExcelDropzone dropzone={excelDropzone} onDrop={onDrop} />;
        }
        return <ProductsPreview status={board.dealStatuses[0]}/>;
    };

    return (
        <Drawer
            size={"calc(77vw)"}
            position={"right"}
            onClose={prefillWithExcelOnClose}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton={false}
            opened={prefillWithExcelOpened}
            styles={{
                body: {
                    height: "100%",
                    display: "flex",
                    flexDirection: "row",
                    gap: rem(20),
                },
            }}
        >
            <div className={styles["deal-container"]}>
                {getBody()}
            </div>
        </Drawer>
    );
};

export default PrefillDealsWithExcelDrawer;