import { Button, Flex, Group, Textarea, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { useModuleEditorContext } from "@/app/module-editor/[moduleId]/contexts/ModuleEditorContext";
import { ModuleInfo } from "../../../hooks/useModulesActions";

const ModuleCommonInfoEditor = () => {
    const {
        module,
        moduleActions: { updateCommonInfo },
    } = useModuleEditorContext();

    const form = useForm<ModuleInfo>({
        initialValues: module ?? {
            label: "",
            description: "",
        },
        validate: {
            label: label => !label && "Введите название модуля",
        },
    });

    const onSubmit = (values: ModuleInfo) => {
        updateCommonInfo(values, form.resetDirty);
    };

    return (
        <form onSubmit={form.onSubmit(onSubmit)}>
            <Flex
                gap={"xs"}
                direction={"column"}>
                <TextInput
                    label={"Название"}
                    {...form.getInputProps("label")}
                />
                <Textarea
                    label={"Описание"}
                    {...form.getInputProps("description")}
                />
                <Group>
                    <Button
                        variant={"default"}
                        disabled={!form.isDirty()}
                        type={"submit"}>
                        Сохранить
                    </Button>
                </Group>
            </Flex>
        </form>
    );
};

export default ModuleCommonInfoEditor;
