import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Form,
  Input,
  Button,
  Select,
  DatePicker,
  Icon,
  message,
  Spin
} from 'antd'
import InviteForm from './form';
import css from 'reactcss';
import {LINKS} from './../../routes';
import './style.scss';
import { Link } from 'react-router-dom';
import {Modal} from 'antd';
import { withRouter } from 'react-router';

const {Option, OptGroup} = Select;
const FormItem = Form.Item;

@inject('appstate')
@observer
@withRouter
export default class InviteConfirmationLoginComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      isLoading: false
    };
    this.defaultState = Object.assign({}, this.state);
    this.style = css({
      default: {
        container: {
          minHeight: '100vh'
        },
        loginForm: {
          paddingTop: '15%'
        }
      }
    })
    console.log(props);
    this.authStore = props.appstate.auth;
    this.query = this
    .props
    .location
    .search
    .substr(1)
    .split('&')
    .reduce((q, value) => {
      const [k,
        v] = value.split('=');
      q[k] = v;
      return q;
    }, {});

    this.http = props.appstate.http;

    if(!this.query.token) {
      Modal.error({
        title: 'Token doesn\'t exist',
        content: '',
        onOk() {
          props.history.push(LINKS.LOGIN)
        }
      });
    }
  }

  componentDidMount() {
    console.log('InviteConfirmationComponent loaded!');
  }

  confirm() {
    let message = message;
    this.setState({isLoading: true})
    this
      .formInstance
      .validateFields((err, fields) => {
        if (err) {
          return console.error(err)
        }

        setTimeout(() => {
          this
            .authStore
            .acceptInvite(this.query.token  || '', fields.password)
            .then(res => {
              // message.success(res.message);
              this
                .props
                .history
                .push(LINKS.LOGIN);
            })
            .catch(err => {
              console.log(err);
              message.error(err.message);
              this.setState({isLoading: false})
            });
        }, 1000);
      })
  }

  render() {

    return (
      <div className="login" style={this.style.container}>
        <div className="login-box">
          <Spin spinning={this.state.isLoading}>
            <div className="header">
              <div>
                <img alt="logo" src="/assets/images/green.png"/>
              </div>
              <p>Accelerate</p>
            </div>
            <div style={{
              textAlign: "center"
            }}>
              You've been invited to {this.query.entity || ''}. {!this.authStore.isLoggedIn && "Please login or register to continue"}

              {this.authStore.isLoggedIn && <Button
                style={{
                  width: "100%",
                  marginBottom: 10
                }}
                type="primary"
                size="large"
                onClick={() => {
                  console.log('onclick');
                  this.http.post('invite_user_accept_existing', {
                    token: this.query.token
                  }).then(() => {
                    message.info('Accept invite success');
                    this.props.history.push(LINKS.LOGIN);
                  })
                }}
              >Accept</Button>}

              {!this.authStore.isLoggedIn && <Link to={LINKS.REGISTER + "?"+ Object.keys(this.query).map(k => `${k}=${this.query[k]}`).join('&')}>
                <Button
                  style={{
                    width: "100%",
                    marginBottom: 10
                  }}
                  size="large">Register</Button>
              </Link>}
              {!this.authStore.isLoggedIn && <Link to={LINKS.LOGIN + "?"+ Object.keys(this.query).map(k => `${k}=${this.query[k]}`).join('&')}>
                <Button
                  style={{
                    width: "100%",
                    marginBottom: 10
                  }}
                  type="primary"
                  size="large">Login</Button>
              </Link>}
            </div>
          </Spin>
        </div>
      </div>
    )
  }
}
