import React, {Component} from 'react'
import {color} from '../common/constants'
import {MdEvent, MdQueryBuilder} from 'react-icons/lib/md'
import classNames from 'classnames/bind'

let cx = classNames.bind(require('../styles/period_picker.scss'))

// TODO: correct file
class PeriodPicker extends Component {
  constructor(props) {
    super(props)
    this.state = {
      date_from: '',
      date_to: '',
      hour_from:'',
      hour_to: '',
      week: [true, true, true, true, true, false, false],
    }
    this.select_day = this.select_day.bind(this)
  }

  select_day(index) {
    var updated_week = this.state.week
    updated_week[index] = !updated_week[index]
    this.setState({week: [...updated_week]})
  }

  render() {
    const cancel_bootstrap_margin = -5
    return(
      <div className={cx('period-picker')}>
        <div className={cx('period-picker__times-fields')}>
          <div style={{color: color('black')}}>
            <MdEvent/>
          </div>
          <div className={cx('period-picker__times-inputs')}>
            <input
              type="text"
              className={cx('period-picker__input')}
              placeholder="Du"
              value={this.state.date_from}
              onChange={(event) => {
                this.setState({date_from: event.target.value})
              }}
            />
            <input
              type="text"
              className={cx('period-picker__input')}
              placeholder="Au"
              value={this.state.date_to}
              onChange={(event) => {
                this.setState({date_to: event.target.value})
              }}
              style={{marginLeft: 20}}
            />
          </div>
        </div>
        <div className={cx('period-picker__times-fields', 'period-picker__times-fields_hours')}>
          <div style={{color: color('black')}}>
            <MdQueryBuilder/>
          </div>
          <div style={{display: 'flex', marginLeft: 20, marginBottom: cancel_bootstrap_margin}}>
            <input
              type="text"
              className={cx('period-picker__input')}
              placeholder="De"
              value={this.state.hour_from}
              onChange={(event) => {
                this.setState({hour_from: event.target.value})
              }}
            />
            <input
              type="text"
              className={cx('period-picker__input')}
              placeholder="A"
              value={this.state.hour_to}
              onChange={(event) => {
                this.setState({hour_to: event.target.value})
              }}
              style={{marginLeft: 20}}
            />
          </div>
        </div>
        <div className={cx('period-picker__times-fields', 'period-picker__times-fields_week')}>
          {["L", "M", "M", "J", "V", "S", "D"].map((day, index) => <WeekDay day={day} key={index} selected={this.state.week[index]} select_day={() => this.select_day(index)} />)}
        </div>
      </div>
    )
  }
}

const WeekDay = (props) => {
  return (
    <div className={cx('period-picker__week-day', {'period-picker__week-day_selected' : props.selected})}>
      <span onClick={props.select_day}>
        {props.day}
      </span>
    </div>
  )
}

export default PeriodPicker