import {ContextModalProps} from "@mantine/modals";
import {Button, Flex, rem, Textarea} from "@mantine/core";
import {DateTimePicker, DateValue} from "@mantine/dates";
import {useForm} from "@mantine/form";
import {DealSummaryReorderRequest} from "../../client";

import {dateWithoutTimezone} from "../../shared/lib/date.ts";

type Deadline = {
    deadline: DateValue,
    comment: string
}

type Props = {
    request: Partial<DealSummaryReorderRequest>,
    onSubmit: (
        request: DealSummaryReorderRequest,
    ) => void;
}

const EnterDeadlineModal = ({
                                context,
                                id,
                                innerProps,
                            }: ContextModalProps<Props>) => {
    const form = useForm<Deadline>({
        initialValues: {
            deadline: null,
            comment: '',
        },
        validate: {
            deadline: (datetime) => datetime !== null ? null : 'Необходимо ввести дедлайн',
        }
    })
    const onCancelClick = () => {
        context.closeModal(id);
    }
    const onSubmit = (values: Deadline) => {
        const {deadline, comment} = values;
        if (!deadline) return;
        innerProps.onSubmit({
            ...innerProps.request,
            deadline: dateWithoutTimezone(deadline),
            comment
        } as unknown as DealSummaryReorderRequest);
        context.closeModal(id);
    }
    return (
        <form onSubmit={form.onSubmit((values) => onSubmit(values))}>

            <Flex direction={'column'} gap={10}>
                <Flex direction={'column'} gap={rem(10)}>
                    <DateTimePicker
                        required
                        label={'Дата и время'}
                        placeholder={'Введите дату и время'}
                        minDate={new Date()}
                        {...form.getInputProps('deadline')}
                    />
                    <Textarea
                        label={'Коментарий'}
                        placeholder={'Введите коментарий'}
                        {...form.getInputProps('comment')}
                    />
                </Flex>

                <Flex justify={'flex-end'} gap={rem(10)}>
                    <Button
                        variant={'default'}
                        onClick={onCancelClick}
                    >Отменить</Button>
                    <Button
                        type={'submit'}
                    >Сохранить</Button>
                </Flex>
            </Flex>
        </form>

    )
};
export default EnterDeadlineModal;