import {Col, Form, InputNumber, Modal, Row, Select} from "antd";
import PropTypes from "prop-types";
import {LensPropType} from "../../../../../../../Types/lensPropType.js";
import useLensForm from "./useLensForm.js";
import useLensFormUI from "./useLensFormUI.js";


const LensFormModal = ({visible, onCancel, onSubmit, lens}) => {
    const lensFormData = useLensForm();
    const lensFormUI = useLensFormUI(lensFormData.lensTypes, visible, onCancel, onSubmit, lens);

    return (
        <Modal
            title={lens ? "Редактировать лину" : "Добавить линзу"}
            open={visible}
            onCancel={lensFormUI.handleCancel}
            onOk={lensFormUI.handleOk}
            okText={"Сохранить"}
            cancelText={"Отмена"}
            maskClosable={false}
            forceRender={true}
            style={lensFormUI.modalStyle}
            centered
        >
            <Form form={lensFormUI.form} layout={"vertical"}>
                <Row gutter={16}>
                    <Col xs={24} md={12}>
                        <Form.Item
                            name="tor"
                            label="Тор"
                            rules={[{required: true, message: "Введите тор"}]}
                        >
                            <InputNumber
                                style={lensFormUI.formItemStyle}
                                step={0.1}
                            />
                        </Form.Item>
                    </Col>
                    <Col xs={24} md={12}>
                        <Form.Item
                            name="trial"
                            label="Острота зрения (Trial)"
                            rules={[{required: true, message: "Введите остроту зрения"}]}
                        >
                            <InputNumber
                                style={lensFormUI.formItemStyle}
                                step={0.1}

                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col xs={24} md={12}>
                        <Form.Item
                            name="esa"
                            label="Esa"
                            rules={[{required: true, message: "Введите esa"}]}
                        >
                            <InputNumber
                                style={lensFormUI.formItemStyle}
                                step={0.1}

                            />
                        </Form.Item>
                    </Col>
                    <Col xs={24} md={12}>
                        <Form.Item
                            name="fvc"
                            label="FVC"
                            rules={[{required: true, message: "Введите fvc"}]}
                        >
                            <InputNumber
                                style={lensFormUI.formItemStyle}
                                step={0.1}

                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col xs={24} md={12}>
                        <Form.Item
                            name="preset_refraction"
                            label="Пресетная рефракция"
                            rules={[{required: true, message: "Введите пресетную рефракцию"}]}
                        >
                            <InputNumber
                                style={lensFormUI.formItemStyle}
                                step={0.1}

                            />
                        </Form.Item>
                    </Col>
                    <Col xs={24} md={12}>
                        <Form.Item
                            name="diameter"
                            label="Диаметр"
                            rules={[{required: true, message: "Введите диаметр"}]}
                        >
                            <InputNumber
                                style={lensFormUI.formItemStyle}
                                step={0.1}

                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col xs={24} md={12}>
                        <Form.Item
                            name="periphery_toricity"
                            label="Периферия торичность"
                            rules={[{required: true, message: "Введите периферию торичность"}]}
                        >
                            <InputNumber
                                style={lensFormUI.formItemStyle}
                                step={0.1}

                            />
                        </Form.Item>
                    </Col>
                    <Col xs={24} md={12}>
                        <Form.Item
                            name="side"
                            label="Сторона"
                            rules={[{required: true, message: "Выберите сторону"}]}
                        >
                            <Select style={lensFormUI.formItemStyle}>
                                <Select.Option value="левая">Левая</Select.Option>
                                <Select.Option value="правая">Правая</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Form.Item
                    name="type_id"
                    label="Тип линзы"
                    rules={[{required: true, message: "Выберите тип линзы"}]}
                >
                    <Select style={lensFormUI.formItemStyle}>
                        {lensFormData.lensTypes.map((type) => (
                            <Select.Option key={type.id} value={type.id}>
                                {type.title}
                            </Select.Option>
                        ))}
                    </Select>
                </Form.Item>
            </Form>
        </Modal>
    );
};

LensFormModal.propTypes = {
    visible: PropTypes.bool.isRequired,
    onCancel: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    lens: LensPropType,
}

export default LensFormModal;