import React, {Component} from 'react'
import classNames from 'classnames/bind'
import AddressPicker from 'components/address_picker'
import Button from 'components/utils/button'
import {DEV} from 'common/constants'

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

export default class NewWorkplace extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: props.name,
      address: "",
      latitude: null,
      longitude: null,
      location_found: false,
    }
  }

  render() {
    return (
      <div className={cx('new-mission')}>
        <div className={cx('new-mission__new-workplace')}>
          <div className={cx('new-mission__new-workplace-inputs')}>
            <input
              ref={(name_input) => this.name_input = name_input}
              type="text"
              placeholder="Nom du lieu de travail"
              className={cx('new-mission__new-workplace-input')}
              value={this.state.name}
              onChange={(event) => {
                let name = event.target.value
                this.setState({name})
              }}
              />
            <div className={cx('new-mission__new-workplace-input')}>
              <AddressPicker
                on_place_select={(place) => {
                  DEV && console.log(place)
                  this.setState({address: place.label, latitude: place.location.lat, longitude: place.location.lng, location_found: true})
                }}
                on_clear_place_input={() => this.setState({address: ""})}
                />
            </div>
          </div>
          <div className={cx('new-mission__new-workplace-button-container')}>
            <Button disabled={!this.state.address || !this.state.name || !this.state.location_found} onClick={() => this.props.on_create_workplace(this.state.name.trim(), this.state.address.trim(), this.state.latitude, this.state.longitude)}>
              Créer
            </Button>
          </div>
        </div>
      </div>
    )
  }
}