"use client";

import { Button, Stack, Textarea, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ContextModalProps } from "@mantine/modals";
import { CreateModuleSchema } from "@/lib/client";

type Props = {
    onCreate: (data: CreateModuleSchema, onSuccess?: () => void) => void;
};

const ModuleCreatorModal = ({
    context,
    id,
    innerProps,
}: ContextModalProps<Props>) => {
    const form = useForm<CreateModuleSchema>({
        initialValues: {
            label: "",
            description: "",
        },
        validate: {
            label: label => !label?.trim() && "Название не заполнено",
        },
    });

    const close = () => context.closeContextModal(id);

    return (
        <form
            onSubmit={form.onSubmit(values =>
                innerProps.onCreate(values, close)
            )}>
            <Stack gap={"md"}>
                <TextInput
                    withAsterisk
                    label={"Название"}
                    {...form.getInputProps("label")}
                />
                <Textarea
                    label={"Описание"}
                    {...form.getInputProps("description")}
                />
                <Button
                    type={"submit"}
                    variant={"default"}>
                    Сохранить
                </Button>
            </Stack>
        </form>
    );
};

export default ModuleCreatorModal;
