import React from 'react';
import PropTypes from 'prop-types';
import Icon from './Icon';
import Modal from './Modal';


export default class LoginButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      username: '',
      password: ''
    };
    this.toggleModal = this.toggleModal.bind(this);
  }
  toggleModal(event) {
    if (event) event.preventDefault()
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  usernameChanged(event) {
    this.setState({
      username: event.target.value
    })
  }
  passwordChanged(event) {
    this.setState({
      password: event.target.value
    })
  }
  login(event) {
    event.preventDefault();
    let headers = new Headers();
    headers.append('Authorization', 'Basic ' + window.btoa(unescape(encodeURIComponent(this.state.username + ":" + this.state.password))));
    fetch('https://api.juick.com/auth', {
      method: 'GET',
      credentials: 'omit',
      headers: headers
    }).then(response => {
      return response.text()
    })
      .then(data => {
        this.toggleModal();
        this.props.onAuth(data);
      }
      ).catch(ex => {
        console.log(ex);
      });
  }

  render() {
    return (
      <React.Fragment>
        <a onClick={this.toggleModal}><Icon name="ei-user" size="s" />{this.props.title}</a>
        <Modal show={this.state.isOpen}
          onClose={this.toggleModal}>
          <div className="dialoglogin">
            <p>Please, introduce yourself:</p>
            <a href="/_fblogin" id="signfb"><Icon name="ei-sc-facebook" size="s" />Login with facebook</a>
            <a href="/_vklogin" id="signvk"><Icon name="ei-sc-vk" size="s" />Login with VK</a>
            <p>Already registered?</p>
            <form onSubmit={this.login.bind(this)}>
              <input className="signinput"
                type="text"
                name="username"
                placeholder="Username..."
                value={this.state.username} onChange={this.usernameChanged.bind(this)} /><br />
              <input className="signinput"
                type="password" name="password"
                placeholder="Password..."
                value={this.state.password} onChange={this.passwordChanged.bind(this)} /><br />
              <input className="signsubmit" type="submit" value="OK" />
            </form>
          </div>
        </Modal>
      </React.Fragment>
    );
  }
}

LoginButton.propTypes = {
  title: PropTypes.string.isRequired,
  onAuth: PropTypes.func.isRequired
};