import React from 'react'
import ModalDialog from './ModalDialog.jsx'
import client from '../client'

export default class LoggedOutView extends React.Component {
  constructor() {
    super()
    this.state = { modal: null }
    this.showLogin = this.showLogin.bind(this)
    this.showSignup = this.showSignup.bind(this)
    this.closeModal = this.closeModal.bind(this)
  }
  showLogin() {
    this.setState({ modal: 'login' })
  }
  showSignup() {
    this.setState({ modal: 'signup' })
  }
  closeModal() {
    this.setState({ modal: '' })
  }
  render() {
    if (this.state.modal == 'login') {
      return (
        <LoginForm
          visible={true}
          onClose={this.closeModal} />
      )
    }
    else if (this.state.modal == 'signup') {
      return (
        <SignupForm
          visible={true}
          onClose={this.closeModal} />
      )
    }
    else {
      return (
        <Welcome
          onLoginClick={this.showLogin}
          onSignupClick={this.showSignup} />
      )
    }
  }
}

class Welcome extends React.Component {
  render() {
    return (
      <div className='welcome inner'>
        <h1>Calorie Counter</h1>
        <button onClick={this.props.onLoginClick}>
          Log In
        </button>
        <button onClick={this.props.onSignupClick}>
          Sign Up
        </button>
      </div>
    )
  }
}

class LoginForm extends React.Component {
  constructor() {
    super()
    this.state = {
      email: '',
      password: '',
      error: null,
    }
    this.updateState = this.updateState.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  updateState(event){
    const name = event.target.name
    const value = event.target.value
    this.setState({
      [name]: value,
      error: null,
    })
  }
  handleSubmit(event) {
    event.preventDefault()
    client.authenticate({
      type: 'local',
      email: this.state.email,
      password: this.state.password,
    }).then(res => {
      console.log('Authenticated!', res);
      window.location.reload()
    }).catch(error => {
      console.error('Error authenticating!', error);
      this.setState({
        error: error.toString()
      })
    })
  }
  render() {
    return (
      <ModalDialog visible={this.props.visible} onClose={this.props.onClose}>
        <form onSubmit={this.handleSubmit}>
          <input type='email'
                 name='email'
                 autoFocus
                 placeholder='Email address'
                 onChange={this.updateState}
          /><br/>
          <input type='password'
                 name='password'
                 placeholder='Password'
                 onChange={this.updateState}
          /><br/>
          <input type='submit'
                 value='Log In'
          />
          <div className='error'>{this.state.error}</div>
        </form>
      </ModalDialog>
    )
  }
}

class SignupForm extends React.Component {
  constructor() {
    super()
    this.state = {
      email: '',
      password: '',
      goal: 0,
      error: null,
    }
    this.updateState = this.updateState.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  updateState(event){
    const name = event.target.name
    const value = event.target.value
    this.setState({
      [name]: value,
      error: null,
    })
  }
  handleSubmit(event) {
    event.preventDefault()
    const usersService = client.service('users')
    usersService.create(this.state).then(result => {
      console.log(result)
      return client.authenticate({
        type: 'local',
        email: this.state.email,
        password: this.state.password,
      })
    }).then(res => {
      console.log('Authenticated!', res)
      window.location.reload()
    }).catch(error => {
      console.error('Error authenticating!', error)
      this.setState({
        error: error.toString()
      })
    })
  }
  render() {
    return (
      <ModalDialog visible={this.props.visible} onClose={this.props.onClose}>
        <form onSubmit={this.handleSubmit}>
          <input type='email'
                 name='email'
                 autoFocus
                 placeholder='Email address'
                 onChange={this.updateState}
          /><br/>
          <input type='password'
                 name='password'
                 placeholder='Password'
                 onChange={this.updateState}
          /><br/>
          <input type='number'
                 name='goal'
                 min='0'
                 max='100000'
                 placeholder='Goal'
                 onChange={this.updateState}
          /><br/>
          <input type='submit'
                 value='Sign Up'
          />
          <div className='error'>{this.state.error}</div>
        </form>
      </ModalDialog>
    )
  }
}