import {ContextModalProps} from "@mantine/modals";
import {Button, Flex, rem, TextInput} from "@mantine/core";
import {useEffect, useState} from "react";
import {ProductService} from "../../client";

type Props = {
    productId: number;
    onSubmit: (barcode: string) => void;
}
const PrintBarcodeModal = ({
                               id,
                               context,
                               innerProps
                           }: ContextModalProps<Props>) => {
    const {productId, onSubmit} = innerProps;
    const [barcode, setBarcode] = useState<string | undefined>();
    const [isBarcodeExist, setIsBarcodeExist] = useState<boolean>(true);

    const getErrorMessage = () => {
        if (!barcode) return "Штрихкод не может быть пустым";
        if (isBarcodeExist) return "Штрихкод уже существует";
        return undefined;
    }
    useEffect(() => {
        if (!barcode) return;
        ProductService.existsProductBarcode({
            productId: innerProps.productId,
            barcode: barcode.trim()
        }).then((response) => {
            setIsBarcodeExist(response.exists);
        })
    }, [productId, barcode]);

    const onSubmitClick = () => {
        if (!barcode || isBarcodeExist) return;
        onSubmit(barcode.trim());
        context.closeModal(id);
    }
    return (
        <Flex
            gap={rem(10)}
            direction={"column"}
        >
            <TextInput
                required
                error={getErrorMessage()}
                label={"Штрихкод"}
                placeholder={"Введите или отсканируйте штрихкод"}
                value={barcode}
                onChange={(event) => setBarcode(event.currentTarget.value)}

            />
            <Button
                onClick={onSubmitClick}
                disabled={!barcode || isBarcodeExist}
            >
                Добавить
            </Button>
        </Flex>
    )
}

export default PrintBarcodeModal;