text: /* eslint-disable no-console */
  import React, { Component } from 'react'
  import moment from 'moment'
  
  import Timeline, {
    TimelineMarkers,
    TodayMarker,
    CustomMarker,
    CursorMarker,
  } from 'react-calendar-timeline'
  
  import generateFakeData from '../generate-fake-data'
  
  var minTime = moment()
    .add(-6, 'months')
    .valueOf()
  var maxTime = moment()
    .add(6, 'months')
    .valueOf()
  
  var keys = {
    groupIdKey: 'id',
    groupTitleKey: 'title',
    groupRightTitleKey: 'rightTitle',
    itemIdKey: 'id',
    itemTitleKey: 'title',
    itemDivTitleKey: 'title',
    itemGroupKey: 'group',
    itemTimeStartKey: 'start',
    itemTimeEndKey: 'end'
  }
  
  function iterateTimes(start, end, unit, timeSteps, callback) {
    let time = moment(start).startOf(unit)
  
    if (timeSteps[unit] && timeSteps[unit] > 1) {
      let value = time.get(unit)
      time.set(unit, value - value % timeSteps[unit])
    }
  
    while (time.valueOf() < end) {
      let nextTime = moment(time).add(timeSteps[unit] || 1, `${unit}s`)
      callback(time, nextTime)
      time = nextTime
    }
  }
  
  export default class App extends Component {
    constructor(props) {
      super(props)
  
      const { groups, items } = generateFakeData()
      const defaultTimeStart = moment()
        .startOf('day')
        .toDate()
      const defaultTimeEnd = moment()
        .startOf('day')
        .add(1, 'day')
        .toDate()
  
      this.state = {
        groups,
        items,
        defaultTimeStart,
        defaultTimeEnd
      }
    }
  
    handleCanvasClick = (groupId, time) => {
      console.log('Canvas clicked', groupId, moment(time).format())
    }
  
    handleCanvasDoubleClick = (groupId, time) => {
      console.log('Canvas double clicked', groupId, moment(time).format())
    }
  
    handleCanvasContextMenu = (group, time) => {
      console.log('Canvas context menu', group, moment(time).format())
    }
  
    handleItemClick = (itemId, _, time) => {
      console.log('Clicked: ' + itemId, moment(time).format())
    }
  
    handleItemSelect = (itemId, _, time) => {
      console.log('Selected: ' + itemId, moment(time).format())
    }
  
    handleItemDoubleClick = (itemId, _, time) => {
      console.log('Double Click: ' + itemId, moment(time).format())
    }
  
    handleItemContextMenu = (itemId, _, time) => {
      console.log('Context Menu: ' + itemId, moment(time).format())
    }
  
    handleItemMove = (itemId, dragTime, newGroupOrder) => {
      const { items, groups } = this.state
  
      const group = groups[newGroupOrder]
  
      this.setState({
        items: items.map(
          item =>
            item.id === itemId
              ? Object.assign({}, item, {
                  start: dragTime,
                  end: dragTime + (item.end - item.start),
                  group: group.id
                })
              : item
        )
      })
  
      console.log('Moved', itemId, dragTime, newGroupOrder)
    }
  
    handleItemResize = (itemId, time, edge) => {
      const { items } = this.state
  
      this.setState({
        items: items.map(
          item =>
            item.id === itemId
              ? Object.assign({}, item, {
                  start: edge === 'left' ? time : item.start,
                  end: edge === 'left' ? item.end : time
                })
              : item
        )
      })
  
      console.log('Resized', itemId, time, edge)
    }
  
    // this limits the timeline to -6 months ... +6 months
    handleTimeChange = (visibleTimeStart, visibleTimeEnd, updateScrollCanvas) => {
      if (visibleTimeStart < minTime && visibleTimeEnd > maxTime) {
        updateScrollCanvas(minTime, maxTime)
      } else if (visibleTimeStart < minTime) {
        updateScrollCanvas(minTime, minTime + (visibleTimeEnd - visibleTimeStart))
      } else if (visibleTimeEnd > maxTime) {
        updateScrollCanvas(maxTime - (visibleTimeEnd - visibleTimeStart), maxTime)
      } else {
        updateScrollCanvas(visibleTimeStart, visibleTimeEnd)
      }
    }
  
    handleZoom = (timelineContext, unit) => {
      console.log('Zoomed', timelineContext, unit)
    }
  
    moveResizeValidator = (action, item, time) => {
      if (time < new Date().getTime()) {
        var newTime =
          Math.ceil(new Date().getTime() / (15 * 60 * 1000)) * (15 * 60 * 1000)
        return newTime
      }
  
      return time
    }
  
    rowRenderer = ({ group, className, style, timelineContext, getLeftOffsetFromDate }) => {
      const cells = []
      const { canvasTimeStart, canvasTimeEnd, timelineUnit, timeSteps } = timelineContext
  
      const hasE = group.title.includes('e')
      const hasC = group.title.includes('c')
  
      iterateTimes(canvasTimeStart, canvasTimeEnd, timelineUnit, timeSteps, (time, nextTime) => {
        let color = '#fff'
  
        const nineAm = moment({ h: 9, s:0 })
        const elevenAm = moment({ h: 11, s:0 })
        const onePm = moment({ h: 13, s:0 })
        const twoPm = moment({ h: 14, s:0 })
        const fourPm = moment({ h: 16, s: 0 })
  
        if (hasE) {
          if (time.isSameOrAfter(nineAm) && time.isBefore(elevenAm)) {
            color = 'yellow'
          }
          if (time.isSameOrAfter(onePm) && time.isBefore(twoPm)) {
            color = 'red'
          }
        }
  
        if (hasC) {
          if (time.isSameOrAfter(elevenAm) && time.isBefore(onePm)) {
            color = 'green'
          }
          if (time.isSameOrAfter(onePm) && time.isBefore(fourPm)) {
            color = 'orange'
          }
        }
        
        const left = getLeftOffsetFromDate(time.valueOf());
        const right = getLeftOffsetFromDate(nextTime.valueOf());
        
        cells.push(
          <div
            key={`cell-${time.valueOf()}-${nextTime.valueOf()}`}
            style={{
                pointerEvents: 'none',
                position: 'absolute',
                left: `${left}px`,
                width: `${right - left}px`,
                height: style.height,
                background: color,
                borderBottom: '1px solid #bbb'
            }}
          >
          </div>
        );
      });
  
      return (
        <div
          className={className}
          style={style}
        >
          {cells}
        </div>
      )
    }
  
    render() {
      const { groups, items, defaultTimeStart, defaultTimeEnd } = this.state
  
      return (
        <Timeline
          groups={groups}
          items={items}
          keys={keys}
          sidebarWidth={150}
          sidebarContent={<div>Above The Left</div>}
          canMove
          canResize="right"
          canSelect
          itemsSorted
          itemTouchSendsClick={false}
          stackItems
          itemHeightRatio={0.75}
          defaultTimeStart={defaultTimeStart}
          defaultTimeEnd={defaultTimeEnd}
          onCanvasClick={this.handleCanvasClick}
          onCanvasDoubleClick={this.handleCanvasDoubleClick}
          onCanvasContextMenu={this.handleCanvasContextMenu}
          onItemClick={this.handleItemClick}
          onItemSelect={this.handleItemSelect}
          onItemContextMenu={this.handleItemContextMenu}
          onItemMove={this.handleItemMove}
          onItemResize={this.handleItemResize}
          onItemDoubleClick={this.handleItemDoubleClick}
          onTimeChange={this.handleTimeChange}
          onZoom={this.handleZoom}
          moveResizeValidator={this.moveResizeValidator}
          rowRenderer={this.rowRenderer}
        >
          <TimelineMarkers>
            <TodayMarker />
            <CustomMarker
              date={
                moment()
                  .startOf('day')
                  .valueOf() +
                1000 * 60 * 60 * 2
              }
            />
            <CustomMarker
              date={moment()
                .add(3, 'day')
                .valueOf()}
            >
              {({ styles }) => {
                const newStyles = { ...styles, backgroundColor: 'blue' }
                return <div style={newStyles} />
              }}
            </CustomMarker>
            <CursorMarker />
          </TimelineMarkers>
        </Timeline>
      )
    }
  }
  