import React, {Component} from 'react'
import {connect} from 'react-redux'
import moment from '../common/moment'
import {color} from '../common/constants'

const work_start = 6
const work_end = 24
const event_width = 140

class DayDetailStatic extends Component {
  render() {
    let working_hours = []
    for (let i = work_start; i < work_end; i = i + 1) {
      working_hours.push(i)
    }
    return (
      <div style={{borderLeftWidth: 1, borderLeftColor: color('black', 'bright'), borderLeftStyle: 'solid', display: 'flex', flexDirection: 'column', alignItems: 'stretch', width: 200, position: 'relative', overflow: 'hidden'}}>
        {working_hours.map((hour) => <Hour hour={hour} key={hour} />)}
        {this.props.events.map((event) => <Event event={event} key={event.id} currentDay={this.props.current_day} />)}
      </div>
    )
  }
}

const Hour = (props) => <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space between'}}>
  <div style={{width: 200 - event_width, display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'center', height: 30}}>
    <p style={{color: color('black', 'bright')}}>{props.hour}:00</p>
  </div>
  <div style={{height: 1, backgroundColor: color('black', 'bright'), marginLeft: 10, width: 180}}></div>
</div>

const Event = (props) => {
  let event = props.event
  let start = moment(event.start)
  let start_hour = work_start
  if (props.currentDay.isSame(start, 'day')) {
    start_hour = start.hour() + start.minute() / 60
  }
  let end = moment(event.end)
  let end_hour = work_end
  if (props.currentDay.isSame(end, 'day')) {
    end_hour = end.hour() + end.minute() / 60
  }
  return (
    <div style={{top: (start_hour - work_start) * 30, left: 200 - event_width, width: event_width, backgroundColor: color('important'), bottom: (work_end - end_hour) * 30, position: 'absolute'}}>
    </div>
  )
}

const DayDetail = connect(
  (state) => {
    let current_day = moment({y: state.calendar.current_year, M: state.calendar.current_month, d: state.calendar.current_date})
    return {
      events: state.calendar.current_events
        .map((event_id) => state.calendar.events[event_id])
        .filter((event) => current_day.isBetween(event.start, event.end, 'day', '[]')),
      current_day,
    }
  }
)(DayDetailStatic)

export default DayDetail