import {Button, Form, Input, Modal, Select, Space, Typography} from "antd";
import useUpdateUserModalFormUI from "./useUpdateUserModalFormUI.js";
import useUpdateUserModalForm from "./useUpdateUserModalForm.js";


const UpdateUserModalForm = () => {
    const editProfileModalData = useUpdateUserModalForm();
    const editProfileModalUI = useUpdateUserModalFormUI(editProfileModalData.updateUser, editProfileModalData.updatePassword);

    return (
        <Modal
            title="Редактировать профиль"
            open={editProfileModalUI.isModalOpen}
            onCancel={editProfileModalUI.handleCancel}
            footer={null}
        >
            <Form
                form={editProfileModalUI.userForm}
                layout="vertical"
                onFinish={editProfileModalUI.handleUserSubmit}
            >
                <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>
                {editProfileModalUI.isCurrentUser && (
                    <Form.Item
                        name="role_id"
                        label="Роль"
                        rules={[{required: true, message: "Выберите роль"}]}
                    >
                        <Select>
                            {editProfileModalData.roles.map((role) => (
                                <Select.Option key={role.id} value={role.id}>
                                    {role.title}
                                </Select.Option>
                            ))}
                        </Select>
                    </Form.Item>
                )}
                <Form.Item label="Логин" name="login" rules={[{required: true, message: "Введите логин"}]}>
                    <Input disabled/>
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button type="primary" htmlType="submit" loading={editProfileModalData.isUserUpdating}>
                            Сохранить
                        </Button>
                        <Button onClick={editProfileModalUI.handleCancel}>Отмена</Button>
                    </Space>
                </Form.Item>
            </Form>

            <Form
                form={editProfileModalUI.passwordForm}
                layout="vertical"
                onFinish={editProfileModalUI.handlePasswordSubmit}
            >
                <Typography.Title level={4}>Смена пароля</Typography.Title>
                <Form.Item label="Новый пароль" name="new_password"
                           rules={[{required: true, message: "Введите пароль"}]}>
                    <Input.Password/>
                </Form.Item>
                <Form.Item label="Подтвердите пароль" name="confirm_password"
                           rules={[
                               {required: true, message: "Подтвердите пароль"},
                               ({getFieldValue}) => ({
                                   validator(_, value) {
                                       if (value && value !== getFieldValue("new_password")) {
                                           return Promise.reject("Пароли не совпадают");
                                       }
                                       return Promise.resolve();
                                   },
                               }),
                           ]}>
                    <Input.Password/>
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button type="primary" htmlType="submit" loading={editProfileModalData.isPasswordUpdating}>
                            Изменить пароль
                        </Button>
                        <Button onClick={editProfileModalUI.resetForms}>Сбросить</Button>
                    </Space>
                </Form.Item>
            </Form>
        </Modal>
    )
};

export default UpdateUserModalForm;