"use client";

import React, { FC } from "react";
import { Drawer } from "@mantine/core";
import EditorBody from "@/app/attributes/drawers/AttrSelectEditorDrawer/components/EditorBody";
import { SelectEditorContextProvider } from "@/app/attributes/drawers/AttrSelectEditorDrawer/contexts/SelectEditorContext";
import { DrawerProps } from "@/drawers/types";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { AttrSelectSchema, UpdateAttrSelectSchema } from "@/lib/client";

type Props = {
    select: AttrSelectSchema;
    onSelectChange: (
        values: UpdateAttrSelectSchema,
        onSuccess: () => void
    ) => void;
};

const AttrSelectEditorDrawer: FC<DrawerProps<Props>> = ({
    onClose,
    opened,
    props,
}) => {
    const isMobile = useIsMobile();

    return (
        <Drawer
            size={isMobile ? "100%" : "30%"}
            title={"Редактирование справочника"}
            position={"left"}
            onClose={onClose}
            removeScrollProps={{ allowPinchZoom: true }}
            withCloseButton
            opened={opened}
            trapFocus={false}
            styles={{
                body: {
                    display: "flex",
                    flexDirection: "column",
                },
            }}>
            <SelectEditorContextProvider {...props}>
                <EditorBody />
            </SelectEditorContextProvider>
        </Drawer>
    );
};

export default AttrSelectEditorDrawer;