import React from 'react';
import PropTypes from 'prop-types';
import {Button, Flex, Form, Input, Modal, Typography} from "antd";

const ChangePasswordModal = props => {
        const formLayout = {
            labelCol: {span: 4},
            wrapperCol: {span: 20},
        };
        const {commonAxios, messageApi, open, setOpen, closable} = props;
        const [form] = Form.useForm();

        const onSubmit = (values) => {
            const passwordConfirmCheck = values.newPassword === values.confirmNewPassword;
            if (!passwordConfirmCheck) {
                messageApi.error('两次输入的密码不一致，请重新输入');
                return;
            }
            const changeRequest = {
                originalPassword: values.originalPassword,
                newPassword: values.newPassword,
            }
            commonAxios.put('/api/auth/change/password', changeRequest)
                .then(response => {
                    let result = response.data.success;
                    if (result) {
                        messageApi.success('修改密码成功');
                        setOpen(false);
                        form.resetFields();
                    }
                })
        }

        const onCancel = () => {
            setOpen(false);
            form.resetFields();
        }

        return (
            <div>
                <Modal
                    open={open}
                    title="修改密码"
                    onCancel={onCancel}
                    closable={closable}
                    maskClosable={closable}
                    footer={
                        <Flex justify={"end"} align={"center"} gap={"middle"}>
                            <Button disabled={!closable} onClick={onCancel}>取消</Button>
                            <Button type={"primary"} onClick={() => form.submit()}>确认</Button>
                        </Flex>
                    }
                >
                    {!closable ? <Typography.Text level={5}
                                                  style={{color: "red"}}>您的密码已过期，请修改密码！</Typography.Text> : <></>}
                    <Form
                        form={form}
                        {...formLayout}
                        style={{marginTop: 20}}
                        onFinish={onSubmit}
                    >
                        <Form.Item label={'旧密码'} name='originalPassword'
                                   rules={[{required: true, message: '请输入旧密码'}]}>
                            <Input type={'password'}/>
                        </Form.Item>
                        <Form.Item label={'新密码'} name='newPassword'
                                   rules={[{required: true, message: '请输入新密码'}]}>
                            <Input type={'password'}/>
                        </Form.Item>
                        <Form.Item label={'确认密码'} name='confirmNewPassword'
                                   rules={[{required: true, message: '请再次输入新密码'}]}>
                            <Input type={'password'}/>
                        </Form.Item>

                    </Form>
                </Modal>
            </div>
        );
    }
;

ChangePasswordModal.propTypes = {
    commonAxios: PropTypes.func.isRequired,
    messageApi: PropTypes.object.isRequired,
    open: PropTypes.bool.isRequired,
    setOpen: PropTypes.func.isRequired,
    closable: PropTypes.bool.isRequired,
};

export default ChangePasswordModal;