import { FC, useEffect } from "react";
import { Button, Drawer, Flex, rem, TextInput } from "@mantine/core";
import CardsTable from "./components/tables/CardsTable/CardsTable.tsx";
import Preview from "./components/Preview/Preview.tsx";
import styles from "./CardPrefillDrawer.module.css";
import BaseMarketplaceSelect from "../../../../components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";
import usePrefillCard from "./hooks/usePrefillCard.tsx";
import { notifications } from "../../../../shared/lib/notifications.ts";
import { usePrefillCardContext } from "../../contexts/PrefillCardContext.tsx";

const CardPrefillDrawer: FC = () => {
    const { prefillOpened, prefillOnClose, selectedPrefillCard, setPrefillCard, prefillCard } = usePrefillCardContext();
    const { data, form } = usePrefillCard();

    useEffect(() => {
        if (prefillOpened) return;
    }, [prefillOpened]);

    return (
        <Drawer
            size={"calc(77vw)"}
            position={"right"}
            onClose={prefillOnClose}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton={false}
            opened={prefillOpened}
            styles={{
                body: {
                    height: "100%",
                    display: "flex",
                    flexDirection: "row",
                    gap: rem(20),
                },
            }}
        >
            <div className={styles["card-container"]}>
                <div className={styles["card-container-wrapper"]}>
                    <div className={styles["top-panel"]}>
                        <TextInput
                            placeholder={"Введите название / id"}
                            {...form.getInputProps("idOrName")}
                        />
                        <BaseMarketplaceSelect
                            onClear={() =>
                                form.setFieldValue("marketplace", null)
                            }
                            clearable
                            placeholder={"Выберите маркетплейс"}
                            {...form.getInputProps("marketplace")}
                        />
                    </div>
                    <CardsTable items={data} />
                    <Flex direction={"row"} gap="sm">
                        <Button mt={10} w={"100%"} onClick={() => {
                            if (!selectedPrefillCard) {
                                notifications.error({ message: "Карточка не выбрана." });
                                return;
                            }
                            setPrefillCard(selectedPrefillCard);
                            prefillOnClose();
                        }}>
                            Предзаполнить
                        </Button>
                        {
                            prefillCard &&
                            <Button mt={10} w={"100%"} variant={"outline"} onClick={() => {
                                setPrefillCard(undefined);
                                notifications.success({ message: "Предзаполнение отменено." });
                                prefillOnClose();
                            }}>
                                Отменить предзаполнение
                            </Button>
                        }
                    </Flex>
                </div>
            </div>
            <Preview />
        </Drawer>
    );
};

export default CardPrefillDrawer;
