import { useForm } from "@mantine/form";
import { ContextModalProps } from "@mantine/modals";
import { Button, Divider, Flex, NumberInput, rem, Stack } from "@mantine/core";
import ProductSelect from "../../../../../components/ProductSelect/ProductSelect.tsx";
import useScanning from "../../../hooks/useScanning.tsx";
import ScanBarcode from "../../ScanBarcode/ScanBarcode.tsx";
import { ProductSchema, ResidualBoxSchema, ResidualPalletSchema, ResiduesService } from "../../../../../client";
import { notifications } from "../../../../../shared/lib/notifications.ts";
import { ResidualModalForm } from "../../../../ResiduesPage/types/ResidualProductData.tsx";


type Props = {
    clientId: number;
    object: ResidualBoxSchema | ResidualPalletSchema;
    fetchObject: () => void;
    isBox: boolean;
}

const ReceiptModal = ({
                          context,
                          id,
                          innerProps,
                      }: ContextModalProps<Props>) => {
    const {
        clientId,
        object,
        fetchObject,
    } = innerProps;
    const { isScanning, setIsScanning, scannedValue, setScannedValue } = useScanning();
    const initialValues = {
        product: null,
        quantity: 1,
    };
    const form = useForm<ResidualModalForm>({
        initialValues,
        validate: {
            product: product => !product && "Необходимо выбрать товар",
            quantity: quantity => (!quantity || quantity === 0) && "Слишком мало товара",
        },
    });

    if (!object || !clientId) return;

    const postProduct = (product: ProductSchema, quantity: number) => {
        ResiduesService.createResidualProduct({
            requestBody: {
                data: {
                    productId: product.id,
                    quantity,
                    palletId: innerProps.isBox ? null : object.id,
                    boxId: innerProps.isBox ? object.id : null,
                },
            },
        })
            .then(({ ok, message }) => {
                notifications.guess(ok, { message });
                fetchObject();
                if (ok) context.closeContextModal(id);
            })
            .catch(err => console.log(err));
    };

    const onProductAfterScanningSelect = (product?: ProductSchema) => {
        if (!product) {
            setScannedValue("");
            return;
        }

        const productIdx = object.residualProducts.findIndex(p => p.product.id === product.id);
        if (productIdx === -1) {
            form.setFieldValue("product", product);
        } else {
            postProduct(product, 1);
        }
        setScannedValue("");
    };

    const onSubmit = () => {
        postProduct(form.values.product!, form.values.quantity!);
        form.reset();
    };

    return (
        <Flex
            direction={"column"}
            gap={rem(10)}
        >
            <form onSubmit={form.onSubmit(() => onSubmit())}>
                <Stack gap={rem(10)}>
                    <Divider />
                    <ProductSelect
                        label={"Товар"}
                        placeholder={"Выберите товар"}
                        {...form.getInputProps("product")}
                        clientId={clientId}
                        disabled={isScanning}
                    />
                    <NumberInput
                        label={"Количество"}
                        hideControls
                        {...form.getInputProps("quantity")}
                        min={1}
                        defaultValue={1}
                        disabled={isScanning}
                    />
                    <Button
                        variant={"default"}
                        type={"submit"}
                        disabled={isScanning}
                    >
                        Добавить
                    </Button>
                    <Divider />
                </Stack>
            </form>

            <ScanBarcode
                clientId={clientId}
                isScanning={isScanning}
                setIsScanning={setIsScanning}
                onProductSelect={onProductAfterScanningSelect}
                scannedValue={scannedValue}
                object={object}
            />
        </Flex>
    );
};

export default ReceiptModal;