import React, { Component, PropTypes } from 'react'
import moment from 'moment'

import Loading from '../../../common/components/Loading'
import toSentenceCase from '../../../common/util/to-sentence-case'
import {getChartMax, getChartPeriod} from '../../util'

const COLORS = {
  WEEKDAY: '#8da0cb',
  SATURDAY: '#66c2a5',
  SUNDAY: '#fc8d62'
}

export default class TripsChart extends Component {
  static propTypes = {
    validationResult: PropTypes.object
  }

  render () {
    const {validationResult} = this.props
    if (!validationResult || !validationResult.dailyTripCounts) {
      return <Loading />
    }
    const {dailyTripCounts, firstCalendarDate} = validationResult
    const firstDate = moment(firstCalendarDate)
    const data = dailyTripCounts.map((count, index) =>
      [firstDate.clone().add(index, 'days'), count])
    const graphHeight = 300
    const spacing = 8
    const leftMargin = 50
    const rightMargin = 50
    const bottomMargin = 75
    const svgWidth = leftMargin + rightMargin + (data.length * spacing)
    const svgHeight = graphHeight + bottomMargin
    const maxTrips = Math.max.apply(Math, data.map(d => d[1]))
    const yAxisMax = getChartMax(maxTrips)
    const yAxisPeriod = getChartPeriod(maxTrips)
    const yAxisLabels = []
    for (var i = yAxisPeriod; i <= yAxisMax; i += yAxisPeriod) {
      yAxisLabels.push(i)
    }
    return (
      <div
        className='text-center'
        style={{
          width: '100%',
          height: `${svgHeight}px`,
          overflowX: 'scroll',
          overflowY: 'hidden',
          border: '#ddd'
        }}>
        <svg style={{width: svgWidth, height: `${svgHeight}px`, paddingTop: '5px'}}>
          {yAxisLabels.map((l, index) => {
            const y = graphHeight - ((l / yAxisMax) * graphHeight)
            return <g key={index}>
              <line
                x1={0} y1={y}
                x2={svgWidth} y2={y}
                stroke='gray'
                strokeWidth={1}
              />
              <text x={0} y={y - 2} fill='gray'>
                {l}
              </text>
            </g>
          })}
          {data.map((d, index) => {
            const dow = d[0].day()
            const dateString = d[0].format('YYYY-MM-DD')
            const x = leftMargin + (spacing / 2) + (index * spacing)

            // generate the bar for this date
            return (
              <g key={index}>
                <title>{dateString}: {d[1]} trips</title>
                <line
                  x1={x} y1={graphHeight - ((d[1] / yAxisMax) * graphHeight)}
                  x2={x} y2={graphHeight}
                  title={`${dateString}: ${d[1]} trips`}
                  stroke={dow === 0
                    ? COLORS.SUNDAY
                    : dow === 6
                      ? COLORS.SATURDAY
                      : COLORS.WEEKDAY
                  }
                  strokeWidth={7} />
                {/* label x-axis with dates every 14 days */}
                {index % 14 === 0
                  ? <g>
                    <line x1={x} y1={graphHeight} x2={x} y2={graphHeight + 12} stroke='black' />
                    <text x={x - 35} y={graphHeight + 26} fill='black'>
                      {dateString}
                    </text>
                  </g>
                  : null
                }
              </g>
            )
          })}
          {/* Add baseline to chart */}
          <line
            x1={0}
            y1={graphHeight}
            x2={svgWidth}
            y2={graphHeight}
            stroke='black'
            strokeWidth={2} />
          {/* Add legend for bar colors */}
          {Object.keys(COLORS).map((k, i) => {
            console.log(k, COLORS[k])
            return (
              <g key={k}>
                <rect
                  x={100 * i - 5}
                  y={graphHeight + 30}
                  width='80'
                  height='18'
                  fill={COLORS[k]} />
                <text x={100 * i} y={graphHeight + 43} fill='black'>
                  {toSentenceCase(k)}
                </text>
              </g>
            )
          })}
        </svg>
      </div>
    )
  }
}

@@ -3682,71 +3682,10 @@
  =%3E 
-%7B%0A            console.log(k, COLORS%5Bk%5D)%0A            return (%0A  
+(%0A
     
@@ -3704,18 +3704,16 @@
 ey=%7Bk%7D%3E%0A
-  
         
@@ -3740,18 +3740,16 @@
         
-  
 x=%7B100 *
@@ -3772,18 +3772,16 @@
         
- 
- 
 y=%7Bgraph
@@ -3793,18 +3793,16 @@
 t + 30%7D%0A
-  
         
@@ -3832,26 +3832,24 @@
             
-  
 height='18'%0A
@@ -3864,18 +3864,16 @@
         
- 
- 
 fill=%7BCO
@@ -3880,26 +3880,24 @@
 LORS%5Bk%5D%7D /%3E%0A
-  
             
@@ -3967,18 +3967,16 @@
         
-  
 %7BtoSente
@@ -3997,34 +3997,32 @@
             
- 
- 
 %3C/text%3E%0A
             
@@ -4001,34 +4001,32 @@
         %3C/text%3E%0A
-  
             %3C/g%3E
@@ -4032,39 +4032,25 @@
 %3E%0A          
-  )%0A          %7D
+)
 )%7D%0A        %3C

remove log statement