import {Modal, Button, Form, Input, Table, InputNumber, Select, Space, Result} from "antd";
import {PlusOutlined, DeleteOutlined} from "@ant-design/icons";
import PropTypes from "prop-types";
import {SetPropType} from "../../../../../../../Types/setPropType.js";
import useSetForm from "./useSetForm.js";
import useSetFormUI from "./useSetFormUI.js";

const {Option} = Select;

const SetFormModal = ({visible, onCancel, setData, onSubmit}) => {
    const setFormModalData = useSetForm(setData);
    const setFormModalUI = useSetFormUI(visible, onCancel, setData, onSubmit, setFormModalData.setContents, setFormModalData.lensTypes);

    const columns = [
        {
            title: "Tor",
            dataIndex: "tor",
            render: (_, record, index) => <InputNumber
                step={setFormModalUI.numberInputStep}
                value={record.tor}
                onChange={value => setFormModalUI.updateContentItem(index, "tor", value)}
            />,
        },
        {
            title: "Trial",
            dataIndex: "trial",
            render: (_, record, index) => <InputNumber
                step={setFormModalUI.numberInputStep}
                value={record.trial}
                onChange={value => setFormModalUI.updateContentItem(index, "trial", value)}
            />,
        },
        {
            title: "ESA",
            dataIndex: "esa",
            render: (_, record, index) => <InputNumber
                step={setFormModalUI.numberInputStep}
                value={record.esa}
                onChange={value => setFormModalUI.updateContentItem(index, "esa", value)}
            />,
        },
        {
            title: "FVC",
            dataIndex: "fvc",
            render: (_, record, index) => <InputNumber
                step={setFormModalUI.numberInputStep}
                value={record.fvc}
                onChange={value => setFormModalUI.updateContentItem(index, "fvc", value)}
            />,
        },
        {
            title: "Пресетная рефракция",
            dataIndex: "preset_refraction",
            render: (_, record, index) => <InputNumber
                step={setFormModalUI.numberInputStep}
                value={record.preset_refraction}
                onChange={value => setFormModalUI.updateContentItem(index, "preset_refraction", value)}
            />,
        },
        {
            title: "Диаметр",
            dataIndex: "diameter",
            render: (_, record, index) => <InputNumber
                step={setFormModalUI.numberInputStep}
                value={record.diameter}
                onChange={value => setFormModalUI.updateContentItem(index, "diameter", value)}
            />,
        },
        {
            title: "Периферийная торичность",
            dataIndex: "periphery_toricity",
            render: (_, record, index) => <InputNumber
                step={setFormModalUI.numberInputStep}
                value={record.periphery_toricity}
                onChange={value => setFormModalUI.updateContentItem(index, "periphery_toricity", value)}
            />,
        },
        {
            title: "Сторона",
            dataIndex: "side",
            render: (_, record, index) => <Select
                value={record.side}
                onChange={value => setFormModalUI.updateContentItem(index, "side", value)}
            >
                <Option value="левая">Левая</Option>
                <Option value="правая">Правая</Option>
            </Select>,
        },
        {
            title: "Количество",
            dataIndex: "count",
            render: (_, record, index) => <InputNumber
                min={1}
                value={record.count}
                onChange={value => setFormModalUI.updateContentItem(index, "count", value)}
            />,
        },
        {
            title: "Тип",
            dataIndex: "type_id",
            render: (_, record, index) => (
                <Select
                    value={record.type_id}
                    onChange={value => setFormModalUI.updateContentItem(index, "type_id", value)}
                    style={setFormModalUI.selectTypeLensFieldStyle}
                    defaultValue={setFormModalData.lensTypes[0]?.id || null}
                >
                    {setFormModalData.lensTypes.map(lensType =>
                        <Option key={lensType.id} value={lensType.id}>{lensType.title}</Option>
                    )}
                </Select>
            ),
            width: 200,
            minWidth: 100
        },
        {
            title: "Действие",
            dataIndex: "actions",
            render: (_, __, index) => (
                <Button danger icon={<DeleteOutlined/>} onClick={() => setFormModalUI.removeContentItem(index)}/>
            ),
            minWidth: 200,
        }
    ];

    return (
        <Modal
            title={setFormModalUI.modalTitle}
            open={visible}
            onCancel={setFormModalUI.onCancelModal}
            onOk={setFormModalUI.handleSubmit}
            okText={"Сохранить"}
            cancelText={"Отмена"}
            width="90%"
            style={setFormModalUI.modalStyle}
        >

            {setFormModalData.isError ? (
                <Result
                    status="error"
                    title="Ошибка"
                    subTitle="Произошла ошибка в работе страницы"
                />
            ) : (
                <>
                    <Form form={setFormModalUI.form} layout="vertical">
                        <Form.Item label="Название набора" name="title"
                                   rules={[{required: true, message: "Введите название"}]}>
                            <Input/>
                        </Form.Item>
                    </Form>

                    <div style={setFormModalUI.tableStyle}>
                        <Table
                            dataSource={setFormModalUI.currentContent}
                            columns={columns}
                            rowKey="id"
                            pagination={false}
                            scroll={{x: "max-content", y: 300}}
                            locale={{emptyText: "Добавьте элементы"}}
                        />
                    </div>

                    <Space style={setFormModalUI.addContentButtonSpaceStyle}>
                        <Button icon={<PlusOutlined/>} onClick={setFormModalUI.addContentItem}>Добавить элемент</Button>
                    </Space>
                </>
            )}
        </Modal>
    );
};

SetFormModal.propTypes = {
    visible: PropTypes.bool.isRequired,
    onCancel: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    setData: SetPropType,
}

export default SetFormModal;