import React from 'react';
import { Row, Col, FormGroup, FormControl, HelpBlock, Alert } from 'react-bootstrap';
import Logo from './logo';
import AsyncButton from '../components/async-button';
import Fa from '../components/fa';
import Card from '../components/card';
import { server } from '../commons/server';

/**
 * Wellcome page - First page displayed under e-TB Manager first time execution
 */
export default class ForgotPwd extends React.Component {

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

    submit() {
        const self = this;
        server.post('/api/pub/forgotpwd?id=' + this.state.value).then(res => {
            self.setState({ fetching: null, requested: true, success: res.success });
        }).catch(() => self.setState({ fetching: null, requested: false }));

        this.setState({ fetching: true });
    }

    inputChange(evt) {
        this.setState({ value: evt.target.value });
    }

    /**
     * Render the component
     */
    render() {
        const err = this.state.err;
        const val = this.state.value ? this.state.value : '';
        const title = __('forgotpwd');

        return React.createElement(
            Logo,
            { backLink: true },
            !this.state.success ? React.createElement(
                'div',
                null,
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { md: 12, className: 'text-center' },
                        React.createElement(
                            'h3',
                            null,
                            title
                        ),
                        React.createElement(
                            'p',
                            { className: 'text-muted' },
                            __('forgotpwd.msg')
                        ),
                        React.createElement(
                            FormGroup,
                            { validationState: err ? 'error' : undefined, bsSize: 'large' },
                            React.createElement(FormControl, { type: 'text', ref: 'email',
                                value: val,
                                onChange: this.inputChange,
                                placeholder: __('forgotpwd.emailuser'),
                                autoFocus: true }),
                            err && React.createElement(
                                HelpBlock,
                                null,
                                err
                            )
                        ),
                        this.state.requested && React.createElement(
                            Alert,
                            { bsStyle: 'danger' },
                            __('forgotpwd.invalid')
                        )
                    )
                ),
                React.createElement(
                    Row,
                    { className: 'mtop-2x' },
                    React.createElement(
                        Col,
                        { md: 12 },
                        React.createElement(
                            AsyncButton,
                            { block: true, bsStyle: 'primary', bsSize: 'large',
                                onClick: this.submit,
                                disabled: val.length < 4,
                                fetching: this.state.fetching },
                            __('action.submit')
                        )
                    )
                )
            ) : React.createElement(
                'div',
                null,
                React.createElement(
                    Card,
                    { title: title },
                    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,
                            __('forgotpwd.success.1')
                        )
                    )
                )
            )
        );
    }
}