import React, {Component} from 'react'
import classNames from 'classnames/bind'
import Button from 'components/utils/button'
import {map_hash} from '../common/utilities'
import {is_valid_email, action_invite_users} from '../common/users'
import store from '../common/store'
import {dismiss_popover} from '../actions/display'

const cx = classNames.bind(require('../styles/new_user_form.scss'))

class NewUserForm extends Component {
  constructor(props) {
    super(props)
    this.state = {
      first_name: "",
      last_name: "",
      email: "",
      postal_code: "",
      phone_number: "",
    }
  }

  on_send = () => {
    let user = map_hash(this.state, (info) => info.trim())
    action_invite_users([user])
    store.dispatch(dismiss_popover())
  }

  render() {
    return (
        <div className={cx('new-user-form')}>
          <div className={cx('new-user-form__inputs')}>
            <input
              ref={(first_name_input) => this.first_name_input = first_name_input}
              type="text"
              placeholder="Prénom"
              className={cx('new-user-form__input', 'new-user-form__input_large')}
              value={this.state.first_name}
              onChange={(event) => {
                let first_name = event.target.value
                this.setState({first_name})
              }}
            />
            <input
              ref={(last_name_input) => this.last_name_input = last_name_input}
              type="text"
              placeholder="Nom"
              className={cx('new-user-form__input', 'new-user-form__input_large')}
              value={this.state.last_name}
              onChange={(event) => {
                let last_name = event.target.value
                this.setState({last_name})
              }}
            />
            <input
              ref={(postal_code_input) => this.postal_code_input = postal_code_input}
              type="text"
              placeholder="Code postal"
              className={cx('new-user-form__input')}
              value={this.state.postal_code}
              onChange={(event) => {
                let postal_code = event.target.value
                this.setState({postal_code})
              }}
            />
            <input
              ref={(email_input) => this.email_input = email_input}
              type="email"
              placeholder="Adresse mail"
              className={cx('new-user-form__input')}
              value={this.state.email}
              onChange={(event) => {
                let email = event.target.value
                this.setState({email})
              }}
            />
            <input
              ref={(phone_number_input) => this.phone_number_input = phone_number_input}
              type="tel"
              placeholder="Téléphone"
              className={cx('new-user-form__input')}
              value={this.state.phone_number}
              onChange={(event) => {
                let phone_number = event.target.value
                this.setState({phone_number})
              }}
            />
          </div>
          <div className={cx('new-user-form__button-container')}>
            <Button disabled={!is_valid_email(this.state.email)} onClick={this.on_send}>
              Envoyer l'invitation
            </Button>
          </div>
        </div>
    )
  }
}

export default NewUserForm