import React from 'react';
import { FormGroup, InputGroup, FormControl, Alert } from 'react-bootstrap';
import Fa from '../components/fa';
import Profile from '../components/profile';
import AsyncButton from '../components/async-button';
import WaitIcon from '../components/wait-icon';
import Card from '../components/card';
import Error from '../components/error';
import { server } from '../commons/server';
import { app } from '../core/app';
import Logo from './logo';
import BorderlessForm from './borderless-form';
import { validateForm } from '../commons/validator';

/**
 * Values to be validated
 */
const form = {
    pwd1: {
        required: true,
        password: true
    },
    pwd2: {
        required: true,
        validate: doc => doc.pwd1 === doc.pwd2 ? null : __('changepwd.wrongpass2')
    }
};

export default class SetPassword extends React.Component {

    constructor(props) {
        super(props);
        this.submit = this.submit.bind(this);
        this.state = {};
    }

    componentWillMount() {
        this.validateToken(this.props.token);
    }

    componentWillUpdate(newProps) {
        if (newProps.token !== this.props.token) {
            this.validateToken(newProps.token);
        }
    }

    validateToken(token) {
        const self = this;

        // post request to the server
        server.post('/api/pub/pwdtokeninfo/' + token).then(res => {
            if (res) {
                self.setState({ info: res, invalid: false });
            } else {
                self.setState({ invalid: true });
            }
        });

        this.setState({ info: null, invalid: null });
    }

    /**
     * Submit the new password
     * @return {[type]} [description]
     */
    submit() {
        const data = validateForm(this, form);
        if (data.errors) {
            this.setState({ err: data.errors });
            return;
        }

        const params = {
            token: this.props.token,
            password: data.value.pwd1
        };

        // request password update
        const self = this;
        server.post('/api/pub/updatepwd', params).then(res => {
            if (res.success) {
                self.setState({ success: true, fetching: false });
                app.setState({ login: this.state.info.login });
            } else {
                self.setState({ invalid: true, fetching: false });
            }
        });

        this.setState({ err: null, fetching: true });
    }

    /**
     * Render when the token is invalid
     * @return {React.Component} Component to be displayed
     */
    renderInvalid() {
        return React.createElement(
            Logo,
            { backLink: true },
            React.createElement(
                Alert,
                { bsStyle: 'danger' },
                React.createElement(
                    'h3',
                    null,
                    __('changepwd.invalidtoken')
                )
            )
        );
    }

    renderSuccess() {
        return React.createElement(
            Logo,
            { backLink: true },
            React.createElement(
                Card,
                { title: __('changepwd') },
                React.createElement(
                    'div',
                    { className: 'text-center' },
                    React.createElement(
                        'div',
                        { className: 'text-primary' },
                        React.createElement(Fa, { icon: 'check-circle', size: 3 }),
                        React.createElement(
                            'h1',
                            null,
                            __('global.success')
                        )
                    ),
                    React.createElement(
                        'p',
                        null,
                        __('changepwd.success1')
                    )
                )
            )
        );
    }

    render() {
        if (this.state.invalid) {
            return this.renderInvalid();
        }

        if (this.state.success) {
            return this.renderSuccess();
        }

        const info = this.state.info;
        if (!info) {
            return React.createElement(WaitIcon, { type: 'card' });
        }

        const err = this.state.err || {};

        return React.createElement(
            Logo,
            null,
            React.createElement(
                'div',
                { className: 'text-center' },
                React.createElement(
                    'h3',
                    null,
                    this.props.title
                ),
                this.props.comments && React.createElement(
                    'p',
                    null,
                    this.props.comments
                ),
                React.createElement(
                    BorderlessForm,
                    null,
                    React.createElement(
                        FormGroup,
                        null,
                        React.createElement(
                            'div',
                            { className: 'text-left' },
                            React.createElement(Profile, { type: 'user',
                                title: info.name,
                                subtitle: info.login,
                                size: 'small' })
                        )
                    ),
                    React.createElement(
                        FormGroup,
                        { validationState: err.pwd1 ? 'error' : undefined },
                        React.createElement(
                            InputGroup,
                            null,
                            React.createElement(
                                InputGroup.Addon,
                                null,
                                React.createElement(Fa, { icon: 'key' })
                            ),
                            React.createElement(FormControl, { type: 'password',
                                ref: 'pwd1',
                                placeholder: __('changepwd.newpass'), autoFocus: true
                            })
                        ),
                        React.createElement(Error, { msg: err.pwd1 })
                    ),
                    React.createElement(
                        FormGroup,
                        { validationState: err.pwd2 ? 'error' : undefined },
                        React.createElement(
                            InputGroup,
                            null,
                            React.createElement(
                                InputGroup.Addon,
                                null,
                                React.createElement(Fa, { icon: 'key' })
                            ),
                            React.createElement(FormControl, { type: 'password',
                                ref: 'pwd2',
                                placeholder: __('changepwd.newpass2')
                            })
                        ),
                        React.createElement(Error, { msg: err.pwd2 })
                    )
                ),
                React.createElement(
                    AsyncButton,
                    { bsStyle: 'primary',
                        bsSize: 'large',
                        block: true,
                        fetching: this.state.fetching,
                        onClick: this.submit },
                    __('action.submit')
                )
            )
        );
    }
}

SetPassword.propTypes = {
    token: React.PropTypes.string.isRequired,
    title: React.PropTypes.string.isRequired,
    comments: React.PropTypes.string
};