import { FC } from "react";
import { Stack, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import Footer from "@/app/deals/drawers/ProjectEditorDrawer/tabs/GeneralTab/components/Footer";
import { ProjectSchema } from "@/lib/client";

type Props = {
    value: ProjectSchema;
    onChange: (value: ProjectSchema) => void;
    onDelete: (value: ProjectSchema) => void;
};

export const GeneralTab: FC<Props> = ({ value, onChange, onDelete }) => {
    const form = useForm<ProjectSchema>({
        initialValues: value,
        validate: {
            name: value => !value && "Введите название",
        },
    });

    const onSubmit = (values: ProjectSchema) => {
        form.resetDirty(values);
        onChange(values);
    };

    return (
        <form onSubmit={form.onSubmit(onSubmit)}>
            <Stack p={"md"}>
                <TextInput
                    label={"Название"}
                    {...form.getInputProps("name")}
                />
                <Footer
                    form={form}
                    onDelete={() => onDelete(value)}
                />
            </Stack>
        </form>
    );
};
