import React, {Component} from 'react'
import {connect} from 'react-redux'
import Button from 'components/utils/button'
import ExclusiveField from 'components/exclusive_field'
import CheckBox from 'components/utils/check_box'
import {Container, Row, ButtonContainer, Input} from './new_recruiter.react.scss'
import {get_teams, get_recruiters} from 'selectors/recruiters'
import auto_bind from 'common/auto_bind'
import {action_create_team} from 'common/recruiters'
import {property_toggler, array_from_hash} from 'common/utilities'

class NewRecruiter extends Component {
  constructor(props) {
    super(props)
    this.state = {
      administrator: false,
      team_id: props.team_id,
      first_name: '',
      last_name: '',
      email: '',
    }
    auto_bind(this)
  }

  toggle_administrator() {
    this.setState(property_toggler('administrator'))
  }

  toggle_team() {
    if (this.state.team_id) {
      this.setState({team_id: null})
    } else {
      this.setState({team_id: this.props.team_id})
    }
  }

  invite_recruiter() {
    this.props.invite_recruiter(this.state)
  }

  render_team_picker() {
    const {administrator, team, teams} = this.props
    if (this.state.administrator) {
      return null
    } else if (administrator) {
      return (
        <ExclusiveField
          values={array_from_hash(teams)}
          show_label={false}
          placeholder={"Pas d'équipe"}
          selected={this.state.team_id}
          on_select_value={(team_id) => this.setState({team_id})}
          on_clear={() => this.setState({team_id: null})}
          create_value={action_create_team}
          />
      )
    } else if (team && team.name) {
      return (
        <CheckBox toggle={this.toggle_team} selected={this.state.team_id}>
          {`Intégrer à mon équipe (${team.name})`}
        </CheckBox>
      )
    } else {
      return null
    }
  }

  render() {
    const {first_name, last_name, email} = this.state
    const {administrator} = this.props
    return (
      <Container>
        <Row>
          <Input
            type="text"
            placeholder="Prénom"
            value={this.state.first_name}
            onChange={({target: {value: first_name}}) => this.setState({first_name})}
            />
          <Input
            type="text"
            placeholder="Nom"
            value={this.state.last_name}
            onChange={({target: {value: last_name}}) => this.setState({last_name})}
            />
        </Row>
        <Row>
          <Input
            type="email"
            placeholder="Adresse mail"
            value={this.state.email}
            onChange={({target: {value: email}}) => this.setState({email})}
            />
        </Row>
        {administrator ? (
          <CheckBox toggle={this.toggle_administrator} selected={this.state.administrator}>
            Administrateur
          </CheckBox>
        ) : null}
        {this.render_team_picker()}
        <ButtonContainer>
          <Button onClick={this.invite_recruiter}>
            Inviter
          </Button>
        </ButtonContainer>
      </Container>
    )
  }
}

export default connect(
  (state) => ({
    ...(get_recruiters(state)[state.profile.id] || {}),
    teams: get_teams(state),
  })
)(NewRecruiter)