import React, {Component, PropTypes} from "react";
import Helmet from "react-helmet";
import styles from './Page.scss';
import {Row, Col, Tabs, Tab, Form, FormGroup, InputGroup, Alert} from "react-bootstrap";
import {connect} from "react-redux";
import { authorize } from "redux/modules/AuthorizationModule/postAuthenticateUser";
import { register } from "redux/modules/AuthorizationModule/postRegisterUser";
import { push } from 'react-router-redux';
import cookie from 'react-cookie';

@connect(
  state => ({
    token: state.authorizationPostAuthenticateUser.token,
    loginLoading: state.authorizationPostAuthenticateUser.loading,
    loginLoaded: state.authorizationPostAuthenticateUser.loaded,
    loginError: state.authorizationPostAuthenticateUser.error,

    response: state.authorizationPostRegisterUser.response,
    registerLoading: state.authorizationPostRegisterUser.loading,
    registerLoaded: state.authorizationPostRegisterUser.loaded,
    registerError: state.authorizationPostRegisterUser.error,
  }),
  {
    authorize, register
  }
)

export default class AuthorizationContainerIndexPage extends Component
{
  handleLogin()
  {
    const { token } = this.props;

    this.props.authorize({
      username: this.refs.loginUsername.value,
      pass: this.refs.loginPass.value,
    });

    if (token.token)
    {
      //cookie.save('token', token.token, {path: '/'});
      push('/');
    }
  }

  handleRegister()
  {
    const { response } = this.props;

    this.props.register({
      phone: this.refs.registerPhone.value,
      email: this.refs.registerEmail.value,
      first_name: this.refs.registerFirstName.value,
      last_name: this.refs.registerLastName.value,
      pass: this.refs.registerPass.value,
    });

    if (response.ok)
    {
      cookie.save('token', response.ok, {path: '/'});
    }
  }

  render(){
    const { loginLoading, loginError } = this.props;
    const { registerLoading, registerError } = this.props;

    return (
      <Row className="authForm">
        <Helmet title="ورود به فروشگاه"/>
        <Col xs={12}>
          {
            loginError ? <Alert bsStyle="warning">امکان ورود به سایت در حال حاضر وجود ندارد. لطفا دوباره آزمایش کنید!</Alert> : null
          }
          {
            registerError ? <Alert bsStyle="warning">ثبت‌نام شما با مشکل مواجه شد. لطفا مجددا آزمایش نمایید!</Alert> : null
          }
        </Col>
        <Col xs={12} md={4} mdOffset={4}>
          <Tabs defaultActiveKey={1} id="controlled-tab">
            <Tab eventKey={1} title="ورود">
              <Form horizontal>
                <FormGroup>
                  <div className="col-xs-12">
                    <InputGroup>
                      <span className="input-group-addon"><i className="fa fa-phone"/></span>
                      <input className="form-control" ref={'loginUsername'} type="text" placeholder="شماره تلفن"/>
                    </InputGroup>
                  </div>
                </FormGroup>
                <FormGroup>
                  <div className="col-xs-12">
                    <InputGroup>
                      <span className="input-group-addon"><i className="fa fa-key"/></span>
                      <input className="form-control" ref={'loginPass'} type="password" placeholder="کلمه عبور"/>
                    </InputGroup>
                  </div>
                </FormGroup>
                <FormGroup>
                  <div className="text-center">
                    <button onClick={this.handleLogin.bind(this)} type="button" className="btn btn-primary" disabled={loginLoading}>
                      {
                        loginLoading ?
                          <span><i className="fa fa-circle-o-notch fa-spin fa-fw"/> در حال بررسی...</span>
                          :
                          <span>وارد شوید</span>
                      }
                    </button>
                  </div>
                </FormGroup>
              </Form>
            </Tab>
            <Tab eventKey={2} title="ثبت نام">
              <Form horizontal>
                <FormGroup>
                  <div className="col-xs-12">
                    <InputGroup>
                      <span className="input-group-addon"><i className="fa fa-phone"/></span>
                      <input className="form-control" ref={'registerPhone'} type="text" placeholder="شماره تلفن"/>
                    </InputGroup>
                  </div>
                </FormGroup>
                <FormGroup>
                  <div className="col-xs-12">
                    <InputGroup>
                      <span className="input-group-addon"><i className="fa fa-envelope-o"/></span>
                      <input className="form-control" ref={'registerEmail'} type="email" placeholder="آدرس ایمیل"/>

                    </InputGroup>
                  </div>
                </FormGroup>
                <FormGroup>
                  <div className="col-xs-12 col-sm-6">
                    <InputGroup>
                      <input className="form-control" ref={'registerFirstName'} type="text" placeholder="نام"/>

                    </InputGroup>
                  </div>
                  <div className="col-xs-12 col-sm-6">
                    <InputGroup>
                      <input className="form-control" ref={'registerLastName'} type="text" placeholder="نام خانوادگی"/>

                    </InputGroup>
                  </div>
                </FormGroup>
                <FormGroup>
                  <div className="col-xs-12">
                    <InputGroup>
                      <span className="input-group-addon"><i className="fa fa-key"/></span>
                      <input className="form-control" ref={'registerPass'} type="password" placeholder="کلمه عبور"/>

                    </InputGroup>
                  </div>
                </FormGroup>
                <FormGroup>
                  <div className="text-center">
                    <button onClick={this.handleRegister.bind(this)} type="button" className="btn btn-primary" disabled={registerLoading}>
                      {
                        registerLoading ?
                          <span><i className="fa fa-circle-o-notch fa-spin fa-fw"/> در حال بررسی...</span>
                          :
                          <span>ثبت‌نام کنید</span>
                      }
                    </button>
                  </div>
                </FormGroup>
              </Form>
            </Tab>
          </Tabs>
        </Col>
      </Row>
    )
  }
}