import {connect} from 'react-redux';
import {
    Navbar, Nav, NavItem,
    Modal,
    Button,
    FormGroup, ControlLabel, FormControl
} from 'react-bootstrap';
import {
    IndexLinkContainer
} from 'react-router-bootstrap';
import i18n from 'i18n.json';
import axios from 'axios';


class Header extends React.Component {
    constructor()
    {
        super();

        this.state = {
            lang: localStorage.getItem('lang') === 'ru' ? 'en' : 'ru',
            authTitle: i18n[lang].auth,
            fields: {
                name: '',
                password: ''
            },

            authModalVisible: false,
            submitEnabled: false
        }
    }

    dispatchAdd()
    {
        ee.emit('clicked_btn_add');
    }

    dispatchRemove()
    {
        ee.emit('clicked_btn_remove');
    }

    changeLang(e)
    {
        localStorage.setItem('lang', e.target.textContent.toLowerCase());
        location.reload();
    }

    handleChange(e)
    {
        let newState = {fields: {...this.state.fields, [e.target.id]: e.target.value}};

        this.setState(newState);

        let validForm = true;

        for (let key in newState.fields)
        {
            if (this.isValid(key, newState) === 'error')
            {
                validForm = false;
                break;
            }
        }

        if (validForm)
            this.setState({submitEnabled: true});
        else
            this.setState({submitEnabled: false});
    }

    isValid(code, newState)
    {
        let checkState = newState || this.state;

        if (!checkState.fields[code]) return 'error';

        const length = checkState.fields[code].length;

        if (!length) return 'error';

        return 'success';
    }

    authShowModal()
    {
        this.setState({authModalVisible: true});
    }

    closeModal()
    {
        this.setState({authModalVisible: false});
    }

    auth()
    {
        axios
            .post('/api', this.state.fields)
            .then(
                res =>
                {
                    console.log(res.data);
                }
            )
            .catch(
                function (error)
                {
                    console.error(error);
                }
            );
    }

    forgot()
    {
        console.log('forgot');
    }

    render()
    {
        return (
            <Navbar collapseOnSelect>
                <Navbar.Header>
                    <Navbar.Brand>
                        Workout
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav>
                        <IndexLinkContainer to="/">
                            <NavItem onClick={() => window.__WeekOneMount = true}
                                     eventKey={0}>{i18n[lang].week}</NavItem>
                        </IndexLinkContainer>

                        {this.props.add_btn.visible ? (
                            <NavItem onClick={::this.dispatchAdd} eventKey={1}>{i18n[lang].add}</NavItem>
                        ) : null}
                        {this.props.remove_btn.visible ? (
                            <NavItem onClick={::this.dispatchRemove} eventKey={2}>{i18n[lang].remove}</NavItem>
                        ) : null}

                    </Nav>
                    <Nav pullRight>
                        <NavItem onClick={::this.authShowModal} eventKey={3}>{this.state.authTitle}</NavItem>
                        <NavItem onClick={::this.changeLang} eventKey={4}>{this.state.lang.toUpperCase()}</NavItem>
                    </Nav>
                </Navbar.Collapse>

                <Modal show={this.state.authModalVisible} onHide={::this.closeModal}>
                    <Modal.Header closeButton>
                        <Modal.Title>{this.state.authTitle}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        {
                            Object.keys(this.state.fields).map(
                                (key, i) => <FormGroup
                                    key={i}
                                    controlId={key}
                                    validationState={::this.isValid(key)}
                                >
                                    <ControlLabel>{i18n[lang][key]}</ControlLabel>
                                    <FormControl
                                        autoFocus={!i}
                                        type={key === 'name' ? 'email' : 'text'}
                                        value={this.state.fields[key]}
                                        onChange={::this.handleChange}
                                    />
                                    <FormControl.Feedback />
                                </FormGroup>
                            )
                        }
                    </Modal.Body>
                    <Modal.Footer>
                        <Button bsClass="pull-left btn btn-link" onClick={::this.forgot}>{i18n[lang].forgot}</Button>

                        <Button onClick={::this.auth}
                                disabled={!this.state.submitEnabled}
                                bsStyle="success">{i18n[lang].send}</Button>
                        <Button onClick={::this.closeModal}>{i18n[lang].close}</Button>
                    </Modal.Footer>
                </Modal>
            </Navbar>
        );
    }
}

export default connect(
    db =>
    {
        return {
            add_btn: db.state.buttons.add,
            remove_btn: db.state.buttons.remove
        }
    }
)(Header)