import React, {Component} from 'react'
import {color} from '../../common/constants'
import {range, capitalize_first_letter, array_contains, map_hash} from '../../common/utilities'
import {event_intersects} from '../../common/calendar'
import {tolerant_equal} from '../../selectors/base'
import Calendar from '../generic_calendar'
import Week from '../generic_week'
import Radio from '../radio'
import {MdTitle, MdMenu} from 'react-icons/lib/md'
import {connect} from 'react-redux'

class InputCalendarStatic extends Component {
  constructor(props) {
    super(props)
    this.state = {
      calendar: 'month',
    }
  }

  render() {
    return (
      <div style={{display: "flex", flex: 1, flexDirection: "column", alignItems: "stretch"}}>
        <div style={{flexShrink: 0, padding: 10, display: 'flex', flexDirection: 'row', alignItems: 'center', fontWeight: 900}}>
          <Radio
            selected={this.state.calendar}
            on_click={(calendar) => this.setState({calendar})}
            names={["month", "week"]}
            render_radio={(name) => {
              switch (name) {
                case "month":
                  return (
                    <MdMenu/>
                  )
                case "week":
                  return (
                    <div style={{WebkitTransform: "rotate(90deg)"}}><MdMenu /></div>
                  )
                case "period":
                  return (
                    <MdTitle/>
                  )
                default:
                  return null
              }
            }}
          />
        </div>
        <div style={{flex: 1, display: "flex"}}>
          {(() => {
            switch (this.state.calendar) {
              case "month":
                return (
                  <Calendar
                    events={this.props.events}
                    on_click={(day, day_event) => {
                      if (day_event) {
                        if (day_event.full_days) {
                          this.props.remove_event(day_event)
                        } else {
                          this.setState({calendar: 'week'})
                        }
                      } else {
                        this.props.create_one_day_event(day)
                      }
                    }}
                    drag_color={this.props.drag_color}
                    on_drag_and_drop={this.props.on_drag_and_drop}
                  />
                )
              case "week":
                return (
                  <Week
                    day_events={map_hash(this.props.events, (events) => events.filter((e) => e.full_days))}
                    hour_events={map_hash(this.props.events, (events) => events.filter((e) => !e.full_days))}
                    scrollbar_size={this.props.scrollbar_size}
                    on_hour_click={(hour, hour_event) => {
                      if (hour_event) {
                        this.props.remove_event(hour_event)
                      } else {
                        this.props.create_one_hour_event(hour)
                      }
                    }}
                    on_day_click={(day, day_event) => {
                      if (day_event) {
                        if (day_event.full_days) {
                          this.props.remove_event(day_event)
                        }
                      } else {
                        this.props.create_one_day_event(day)
                      }
                    }}
                  />
                )
              case "period":
                return (
                  <PeriodPicker/>
                )
              default:
                return null
            }
          })()}
        </div>
      </div>
    )
  }
}

const InputCalendar = connect(
  (state) => ({
    scrollbar_size: state.display.scrollbar_size,
  }),
)(InputCalendarStatic)

InputCalendar.defaultProps = {
  events: {},
  remove_event: () => {},
  create_one_day_event: () => {},
  create_one_hour_event: () => {},
  drag_color: '',
  on_drag_and_drop: (start, end, paint) => {},
}

export default InputCalendar