import React, {Component} from "react";
import {Button, Form, Input, Steps, Row, Col, message} from "antd";
import './UserForm.less'
import {LockOutlined, MailOutlined, SecurityScanOutlined, UserOutlined} from "@ant-design/icons";
import {apiCheck, apiConfirm, apiReset} from "../../services/API/API";
import getCookie from "../../utils/getCookie";

const {Step} = Steps;

class ForgetPasswordForm extends Component {
    state = {
        forgetStatus: 'check',
        currentStep: 0,
        stepProcessStatus: 'process',
        token: '',
    }

    handleSubmitCheck = values => {
        let params = {
            ...values
        }
        console.log('Received values of form: ', params);
        apiCheck(params).then(res => {
            if (res.data.code === 200) {
                message.success('验证成功');
                this.handleCheckSuccessfully()
            } else if (res.data.code === 303) {
                message.error('用户不存在')
            } else if (res.data.code === 301) {
                message.error('邮箱错误')
            } else if (res.data.code === 500) {
                message.error('验证码发送失败')
            } else {
                message.error('发生错误')
            }
        })
    }

    handleSubmitConfirm = values => {
        let params = {
            username: getCookie('username'),
            ...values
        }
        console.log('Received values of form: ', params);
        apiConfirm(params).then(res => {
            if (res.data.code === 200) {
                message.success('确认成功');
                this.handleConfirmSuccessfully()
                this.setState({
                    token: values.token,
                })
            } else if (res.data.code === 302) {
                message.error('用户不存在')
            } else if (res.data.code === 303) {
                message.error('验证码无效')
            } else {
                message.error('发生错误')
            }
        })
    }

    handleSubmitReset = values => {
        let params = {
            username: getCookie('username'),
            token: this.state.token,
            password: values.password,
        }
        apiReset(params).then(res => {
            if (res.data.code === 200) {
                message.success('重置成功');
                window.location.href = "";
            } else {
                message.error('发生错误')
            }
        })
    }

    handleCheckSuccessfully = () => {
        this.setState({
            forgetStatus: 'confirm',
            currentStep: 1,
        })
    }

    handleConfirmSuccessfully = () => {
        this.setState({
            forgetStatus: 'reset',
            currentStep: 2,
        })
    }

    render() {
        let {forgetStatus, currentStep, stepProcessStatus} = this.state;

        return (
            <Row>
                <Col span={8}>
                    <Steps direction="vertical" size={'small'} current={currentStep} status={stepProcessStatus}>
                        <Step title="Check Identity"/>
                        <Step title="Confirm Code"/>
                        <Step title="Reset Password"/>
                    </Steps>
                </Col>
                <Col span={16}>
                    {
                        forgetStatus === 'check' ?
                            <Form onFinish={this.handleSubmitCheck} className="forget-password-form"
                                  initialValues={{remember: true}}>
                                <Form.Item
                                    name="username"
                                    rules={[{required: true, message: 'Please input your Username!'}]}
                                >
                                    <Input
                                        prefix={<UserOutlined id="item-icon"/>}
                                        placeholder="Username"
                                        size="large"
                                    />
                                </Form.Item>
                                <Form.Item
                                    name="email"
                                    rules={[
                                        {
                                            type: 'email',
                                            message: 'The input is not valid E-mail!',
                                        },
                                        {
                                            required: true,
                                            message: 'Please input your E-mail!',
                                        },
                                    ]}
                                >
                                    <Input
                                        prefix={<MailOutlined id="item-icon"/>}
                                        placeholder="E-mail"
                                        size="large"
                                    />
                                </Form.Item>
                                <Form.Item style={{marginBottom: '10px'}}>
                                    <Button size="large" type="primary" htmlType="submit" className="login-form-button"
                                            style={{width: '100%'}}>
                                        RESET YOUR PASSWORD
                                    </Button>
                                </Form.Item>
                                <Form.Item style={{marginBottom: '0'}}>
                                    <Button type="link" block style={{textAlign: 'right'}} onClick={() => {
                                        this.props.handleLoginStatus('login')
                                    }}>
                                        LOGIN
                                    </Button>
                                </Form.Item>
                            </Form> : forgetStatus === 'confirm' ?
                                <Form onFinish={this.handleSubmitConfirm} className="forget-password-form"
                                      initialValues={{remember: true}}>
                                    <Form.Item
                                        name="token"
                                        rules={[{required: true, message: 'Please input your Verification Code!'}]}
                                    >
                                        <Input
                                            prefix={<SecurityScanOutlined id="item-icon"/>}
                                            placeholder="Verification Code"
                                            size="large"
                                        />
                                    </Form.Item>
                                    <Form.Item style={{marginBottom: '10px'}}>
                                        <Button size="large" type="primary" htmlType="submit" className="login-form-button"
                                                style={{width: '100%'}}>
                                            CONFIRM
                                        </Button>
                                    </Form.Item>
                                </Form> :
                                <Form onFinish={this.handleSubmitReset} className="forget-password-form"
                                      initialValues={{remember: true}}>
                                    <Form.Item
                                        name="password"
                                        rules={[
                                            {
                                                required: true,
                                                message: 'Please input your password!',
                                            },
                                        ]}
                                        hasFeedback
                                    >
                                        <Input.Password placeholder="Password"
                                                        prefix={<LockOutlined id="item-icon"/>}
                                                        size="large"
                                        />
                                    </Form.Item>
                                    <Form.Item
                                        name="confirm"
                                        dependencies={['password']}
                                        hasFeedback
                                        rules={[
                                            {
                                                required: true,
                                                message: 'Please confirm your password!',
                                            },
                                            ({getFieldValue}) => ({
                                                validator(_, value) {
                                                    if (!value || getFieldValue('password') === value) {
                                                        return Promise.resolve();
                                                    }
                                                    return Promise.reject(new Error('The two passwords that you entered do not match!'));
                                                },
                                            }),
                                        ]}
                                    >
                                        <Input.Password prefix={<LockOutlined id="item-icon"/>}
                                                        placeholder="Confirm Password"
                                                        size="large"
                                        />
                                    </Form.Item>
                                    <Form.Item style={{marginBottom: '10px'}}>
                                        <Button size="large" type="primary" htmlType="submit" className="login-form-button"
                                                style={{width: '100%'}}>
                                            RESET PASSWORD
                                        </Button>
                                    </Form.Item>
                                </Form>
                    }
                </Col>
            </Row>
        )
    }
}

export default ForgetPasswordForm;