import { useReceiptContext } from "../contexts/ReceiptContext.tsx";
import ClientSelectNew from "../../../../../components/Selects/ClientSelectNew/ClientSelectNew.tsx";
import { Button, Flex, Group, Stack, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import { IconArrowLeft, IconX } from "@tabler/icons-react";
import FinishReceiptButton from "./FinishReceiptButton.tsx";


const ReceiptUserSelect = () => {
    const {
        client,
        setClient,
        fixed,
        setFixed,
        palletsHandlers,
        boxesHandlers,
    } = useReceiptContext();

    const confirmModalText = (
        <Stack>
            <Text size="sm">Вы уверены, что хотите отменить приемку?</Text>
            <Text size="sm">Все загруженные паллеты, короба и товары удалятся.</Text>
        </Stack>
    );

    const unfix = () => {
        modals.openConfirmModal({
            title: "Отмена приемки",
            children: confirmModalText,
            labels: { confirm: "Да", cancel: "Нет" },
            confirmProps: { color: "red" },
            onConfirm: () => {
                palletsHandlers.setState([]);
                boxesHandlers.setState([]);
                setFixed(false);
            },
        });
    };

    return (
        <Stack>
            <Flex gap={"md"} flex={8}>
                <Button
                    variant={"default"}
                    onClick={() => window.location.reload()}
                    flex={1}
                    disabled={fixed}
                >
                    <IconArrowLeft />
                </Button>
                <ClientSelectNew
                    placeholder={"Выберите клиента"}
                    value={client}
                    onChange={setClient}
                    disabled={fixed}
                    flex={7}
                />
            </Flex>

            {
                fixed ? (
                    <>
                        <Button
                            variant={"default"}
                            onClick={unfix}
                        >
                            <Group gap={"sm"}>
                                <IconX />
                                Отменить приемку
                            </Group>
                        </Button>
                        <FinishReceiptButton />
                    </>
                ) : (
                    <Button
                        variant={"default"}
                        onClick={() => setFixed(true)}
                        disabled={!client}
                    >
                        Выбрать
                    </Button>
                )
            }
        </Stack>
    );
};

export default ReceiptUserSelect;
