import { FC } from "react";
import { IconCheck, IconX } from "@tabler/icons-react";
import { Button, Group, Stack, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";

export type CreateDealForm = {
    name: string;
};

type Props = {
    onSubmit: (values: CreateDealForm) => void;
    onCancel: () => void;
};

const CreateCardForm: FC<Props> = ({ onSubmit, onCancel }) => {
    const form = useForm<CreateDealForm>({
        initialValues: {
            name: "",
        },
        validate: {
            name: value => !value && "Введите название",
        },
    });

    return (
        <form onSubmit={form.onSubmit(values => {
            onSubmit(values);
            form.reset();
        })}>
            <Stack>
                <TextInput
                    placeholder={"Название"}
                    {...form.getInputProps("name")}
                />
                <Group wrap={"nowrap"}>
                    <Button
                        variant={"default"}
                        w={"100%"}
                        onClick={onCancel}>
                        <IconX />
                    </Button>
                    <Button
                        variant={"default"}
                        w={"100%"}
                        type={"submit"}>
                        <IconCheck />
                    </Button>
                </Group>
            </Stack>
        </form>
    );
};

export default CreateCardForm;
