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

type Props = {
    onCreate: (category: ServiceCategorySchema) => void
}
const CreateServiceCategoryModal = ({
                                        context,
                                        id,
                                        innerProps,
                                    }: ContextModalProps<Props>) => {
    const form = useForm({
        initialValues: {
            name: ''
        },
        validate: {
            name: (name) => name.trim() !== '' ? null : "Необходимо ввести название категории",
        }
    })
    const onSubmit = (values: { name: string }) => {
        innerProps.onCreate({name: values.name, id: -1});
        context.closeContextModal(id);

    }
    const onCancelClick = () => {
        context.closeContextModal(id);
    }
    return (
        <>
            <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
                <Flex gap={rem(10)} direction={"column"}>
                    <TextInput

                        placeholder={"Введите название категори"}
                        label={"Название категории"}
                        {...form.getInputProps('name')}
                    />


                    <Flex justify={"center"} mt={rem(5)} gap={rem(10)}>
                        <Button onClick={() => onCancelClick()} variant={"subtle"}>Отменить</Button>
                        <Button type={"submit"} variant={"default"}>Сохранить</Button>
                    </Flex>
                </Flex>

            </form>
        </>
    )
}
export default CreateServiceCategoryModal;