import React, { Component } from 'react';
import { connect } from 'react-redux';

class AuthMenu extends Component {
  constructor (props) {
    super(props)
    this.state = {
        where_in_auth_menu: "username",
        auth_menu_visible: true,
    }
    this.handleSignUpRequest = this.handleSignUpRequest.bind(this)
    this.handleLogInAttempt = this.handleLogInAttempt.bind(this)
    this.handleAccountCreation = this.handleAccountCreation.bind(this)
  }

  handleSignUpRequest() {
    this.setState(state => ({
      where_in_auth_menu: "email",
      auth_menu_visible: true,
    }));
  }

  handleLogInAttempt() {
    this.setState(state => ({
      where_in_auth_menu: "password",
      auth_menu_visible: true,
    }));
  }
  handleAccountCreation() {
    this.setState(state => ({
      where_in_auth_menu: "password",
      auth_menu_visible: true,
    }));
  }

  render() {
    return (
      <div>
        {(() => {
          switch(this.state.auth_location) {
            case 'username':
              return (
                <div className="ui menu dropdown" style={{display: "inline"}}>
                  <div className="ui left icon input">
                    <input type="text" placeholder="Username">
                    </input>
                    <i className="users icon"></i>
                  </div>
                  <div className="fluid ui buttons">
                    <button onClick={this.handleSignUpRequest} className="ui button">Sign Up</button>
                    <div className="or"></div>
                    <button className="ui positive button">Sign In</button>
                  </div>
                </div>
              )
            case 'password':
              return (
                <div className="ui menu dropdown" style={{display: "inline"}}>
                  <div className="ui left icon input">
                    <input type="text" placeholder="Username">
                    </input>
                    <i className="users icon"></i>
                  </div>
                </div>
              )
            default:
              return null;
          }
        })()}
      </div>
    )
  }
}



const mapStateToProps = (state) => {
    return {
        where_in_auth_menu: state.where_in_auth_menu,
    };
}

export default connect(
    mapStateToProps,
)(AuthMenu);