"use client";

import { Button, Flex, rem, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ContextModalProps } from "@mantine/modals";

type FormType = {
    name: string;
};

type Props = {
    onChange: (value: FormType) => void;
    value?: FormType;
};

const EnterNameModal = ({
    id,
    context,
    innerProps,
}: ContextModalProps<Props>) => {
    const form = useForm<FormType>({
        initialValues: innerProps.value || {
            name: "",
        },
        validate: {
            name: name => !name && "Введите название",
        },
    });

    const onSubmit = (values: FormType) => {
        innerProps.onChange(values);
        context.closeModal(id);
    };

    return (
        <form onSubmit={form.onSubmit(values => onSubmit(values))}>
            <Flex
                gap={rem(10)}
                direction={"column"}>
                <TextInput
                    {...form.getInputProps("name")}
                    data-autofocus
                />
                <Button
                    variant={"default"}
                    type={"submit"}>
                    Сохранить
                </Button>
            </Flex>
        </form>
    );
};

export default EnterNameModal;
