import {Button, Form, Input, Modal, Select, Tooltip, Typography} from "antd";
import useCreateUserModalForm from "./useCreateUserModalForm.js";
import useCreateUserModalFormUI from "./useCreateUserModalFormUI.js";
import {InfoCircleOutlined} from "@ant-design/icons";


const CreateUserModalForm = () => {
    const createUserModalFormData = useCreateUserModalForm();
    const createUserModalFormUI = useCreateUserModalFormUI(createUserModalFormData.registerUser);

    return (
        <Modal
            title="Создать пользователя"
            open={createUserModalFormUI.modalVisible}
            onCancel={createUserModalFormUI.handleCancel}
            footer={null}
        >
            <Form
                form={createUserModalFormUI.form}
                onFinish={createUserModalFormUI.handleFinish}
                layout="vertical"
            >
                <Form.Item label="Фамилия" name="last_name" rules={[{required: true, message: "Введите фамилию"}]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="Имя" name="first_name" rules={[{required: true, message: "Введите имя"}]}>
                    <Input/>
                </Form.Item>
                <Form.Item label="Отчество" name="patronymic">
                    <Input/>
                </Form.Item>
                <Form.Item label="Логин" name="login" rules={[{required: true, message: "Введите логин"}]}>
                    <Input/>
                </Form.Item>
                <Form.Item
                    name="role_id"
                    label="Роль"
                    rules={[{required: true, message: "Выберите роль"}]}
                >
                    <Select>
                        {createUserModalFormData.roles.map((role) => (
                            <Select.Option key={role.id} value={role.id}>
                                {role.title}
                            </Select.Option>
                        ))}
                    </Select>
                </Form.Item>
                <Tooltip
                    title="Пароль должен содержать не менее 8 символов, включая хотя бы одну букву и одну цифру и один специальный символ"
                >
                    <Typography.Title level={3} style={{width: 30}}>
                        <InfoCircleOutlined/>
                    </Typography.Title>
                </Tooltip>
                <Form.Item label="Пароль" name="password" rules={[{required: true, message: "Введите пароль"}]}>
                    <Input.Password/>
                </Form.Item>
                <Form.Item label="Подтвердите пароль" name="confirm_password"
                           rules={[{required: true, message: "Подтвердите пароль"}, ({getFieldValue}) => ({
                               validator(_, value) {
                                   if (!value || getFieldValue("password") === value) {
                                       return Promise.resolve();
                                   }
                                   return Promise.reject(new Error("Пароли не совпадают"));
                               },
                           }),]}>
                    <Input.Password/>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" loading={createUserModalFormData.isLoading}>
                        Создать
                    </Button>
                    <Button onClick={createUserModalFormUI.handleCancel} style={{marginLeft: 8}}>
                        Отмена
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    )
};

export default CreateUserModalForm;