import React from 'react';
import {hashHistory} from 'react-router';
import {geolocated} from 'react-geolocated';
import Modal from '../Modal/Modal';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import { appConfig } from '../../../config';
import VoiceRecognition from '../../components/voiceHandling/VoiceRecognition';

let stickman = require('../Modal/img/stickman.png');
let Logo = require('./img/mistral-20x10cm.png');

//fake coords
let bosmalCoordinates = {
  latitude: 46.8469,
  longitude: 28.3742
}

//real coords
// let bosmalCoordinates = {
//   latitude: 43.8469,
//   longitude: 18.3742
// }

require('./_style.scss');

const mockUser = {
  username: 'Isaac',
  password: 'mendez'
}

class Login extends React.Component {

  constructor(props){
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.onEnd = this.onEnd.bind(this);
    this.onResult = this.onResult.bind(this);

    this.state = {
      username: 'Isaac',
      password: 'mendez',
      isModalOpen: false,
      modalLate: {hours: 9, minutes: 15, desc: "Let your team know what is going on please choose an option"},
      start: false,
      stop: false
    }
  }

  onEnd() {
    this.setState({ start: false, stop: false })
    this.props.action('end')()
  }

  // onResult = ({ finalTranscript }) => {
  onResult({ finalTranscript }) {
    const result = finalTranscript

    this.setState({ start: false })
    //this.props.action('result')(finalTranscript)
    console.log(finalTranscript)
    console.log(this.refs.personal)
  }

  handleSubmit(e){
    e.preventDefault();
    let username = this.refs.username.value.trim();
    let password = this.refs.password.value.trim();


    //if credentials match
    if(username === this.state.username && password === this.state.password){

      //if user is late
      if(appConfig.dateNow.getHours() > appConfig.modalLate.hours || (appConfig.dateNow.getHours() === appConfig.modalLate.hours && appConfig.dateNow.getMinutes() >= appConfig.modalLate.minutes)){

        //if user is at Bosmal
        if(Math.abs(this.props.coords.latitude - bosmalCoordinates.latitude) < 0.001 && Math.abs(this.props.coords.longitude - bosmalCoordinates.longitude) < 0.001){
          hashHistory.push('/standup');
        }else {
          this.setState({isModalOpen: true});
        }

      } else {
        hashHistory.push('/standup');
      }



    }else {
      alert("error logging in!");
    }
  }

  handleClose(){
    this.setState({
        isModalOpen: false
      });

    setTimeout(() => {
      hashHistory.push('/tickets');
    },300)
  }

  handleOpen(){
    this.setState({
      isModalOpen: true
    })
  }

  render(){
    return(
      <div className="w-100 h-100 relative tc content login ph4">


         <CSSTransitionGroup
          transitionName='modal'
          transitionAppear={true}
          transitionAppearTimeout={400}
          transitionEnterTimeout={400}
          transitionLeaveTimeout={400}
          >

        {
          this.state.isModalOpen && (
            <Modal onClose={this.handleClose}
                  isOpen={this.state.isModalOpen}
                  modalClassName="modal modal-late"
                  backdropClassName="modal-backdrop">
                  <div onClick={this.handleClose} className="tr">
                    <svg id="closeModal" viewBox="0 0 80 50" className="modal-close" >
                      <line x1="10" y1="10" x2="40" y2="40" />
                      <line x1="70" y1="10" x2="40" y2="40" />
                    </svg>
                  </div>
                  <div className="stickman mb2">
                    <img src={stickman} alt="stickman img" />
                  </div>
              <h4 className="f4 white measure lh-title">It is {appConfig.dateNow.getHours()}:{appConfig.dateNow.getMinutes()}</h4>
              <p className="o-60 white f6 measure lh-copy ph5 mb4">{appConfig.modalLate.desc}</p>
              <div className="buttons">
                <div className="modal-btn white ba f6 pv2" ref="late">I will be late</div>
                <div className="modal-btn white ba f6 pv2" ref="personal">Personal day</div>
                <div className="modal-btn white ba f6 pv2">Sick day</div>
                <div className="modal-btn white ba f6 pv2">Remote work</div>
              </div>

              <div>
        <button onClick={() => this.setState({ start: true })}>start</button>
        <button onClick={() => this.setState({ stop: true })}>stop</button>

        {this.state.start && (
          <VoiceRecognition
            onStart={console.log('start')}
            onEnd={console.log('end')}
            onResult={this.onResult}
            continuous={true}
            lang="en-US"
            stop={this.state.stop}
          />
        )}
      </div>
            </Modal>
          )
        }
        </CSSTransitionGroup>


        <div className="login__logo mb6" >
          <img src={Logo} alt="logo"/>
        </div>

        <form onSubmit={this.handleSubmit}>
          <div className="login__form mb2">
              <input type="text" placeholder="username" name="username"
                    className="input-reset mb2 ph2 pv2 white db" ref="username" />
              <input type="password" placeholder="password" name="password"
                    className="input-reset ph2 pv2 white db"  ref="password" />
          </div>

          <div className="login__btn pv3 w-100">
            <input type="submit" className="link dim br-pill ph5 pv2 dib w-100" value="Login" />
          </div>
        </form>

      </div>
    );
  };
}


export default geolocated({
  positionOptions: {
    enableHighAccuracy: true,
  },
  userDecisionTimeout: 5000
})(Login);