import {Modal, Form, Input, DatePicker} from "antd";
import locale from "antd/es/date-picker/locale/ru_RU";
import {MaskedInput} from "antd-mask-input";
import dayjs from "dayjs";
import usePatientFormModalUI from "./usePatientFormModalUI.js";
import usePatientFormModal from "./usePatientFormModal.js";

const {TextArea} = Input;

const PatientFormModal = () => {
    const patientFormModalData = usePatientFormModal();
    const patientFormModalUI = usePatientFormModalUI(patientFormModalData.handleModalSubmit);

    return (
        <Modal
            title={patientFormModalUI.modalTitle}
            open={patientFormModalUI.isModalVisible}
            onCancel={patientFormModalUI.handleCancel}
            onOk={patientFormModalUI.handleOk}
            okText={"Сохранить"}
            cancelText={"Отмена"}
            maskClosable={false}
            forceRender={true}
            style={patientFormModalUI.modalStyle}
            centered
        >
            <Form form={patientFormModalUI.form} layout={"vertical"}>
                <Form.Item
                    name="first_name"
                    label="Имя"
                    rules={[{required: true, message: "Введите имя"}]}
                >
                    <Input placeholder="Введите имя"/>
                </Form.Item>
                <Form.Item
                    name="last_name"
                    label="Фамилия"
                    rules={[{required: true, message: "Введите фамилию"}]}
                >
                    <Input placeholder="Введите фамилию"/>
                </Form.Item>
                <Form.Item
                    name="patronymic"
                    label="Отчество"
                >
                    <Input placeholder="Введите отчество (необязательно)"/>
                </Form.Item>
                <Form.Item
                    name="birthday"
                    label="Дата рождения"
                    rules={[{required: true, message: "Выберите дату рождения"}]}
                >
                    <DatePicker
                        style={{width: "100%"}}
                        locale={locale} format="DD.MM.YYYY"
                        maxDate={dayjs(new Date())}
                    />
                </Form.Item>
                <Form.Item
                    name="address"
                    label="Адрес"
                >
                    <Input placeholder="Введите адрес"/>
                </Form.Item>
                <Form.Item
                    name="email"
                    label="Email"
                    rules={[
                        {
                            validator: patientFormModalUI.emailValidator,
                        },
                    ]}
                >
                    <Input placeholder="Введите email"/>
                </Form.Item>
                <Form.Item
                    name="phone"
                    label="Телефон"
                    rules={[
                        {required: true, message: "Введите телефон"},
                    ]}
                >
                    <MaskedInput placeholder="Введите номер телефона" mask="+7 (000) 000-00-00"/>
                </Form.Item>
                <Form.Item
                    name="diagnosis"
                    label="Диагноз"
                >
                    <TextArea rows={3} placeholder="Введите диагноз"/>
                </Form.Item>
                <Form.Item
                    name="correction"
                    label="Коррекция"
                >
                    <TextArea rows={3} placeholder="Введите информацию о коррекции"/>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default PatientFormModal;
