"use client";

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

type Props = {
    onComplete: (value: string) => void;
    defaultValue?: string;
};

type FormType = {
    name: string;
};

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

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

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

export default EnterNameModal;
