import { Component } from 'react'
import { BarChart } from '../src/barchart'
import { stack } from 'd3-shape'
import SvgContainer from '../src/common/charts/SvgContainer';
import { XAxis, YAxis } from '../src/common';

var barData = [
  {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400},
  {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400},
  {month: new Date(2015, 2, 1), apples:  640, bananas:  960, cherries: 640, dates: 400},
  {month: new Date(2015, 3, 1), apples:  320, bananas:  480, cherries: 640, dates: 400}
];

const width = 500;
const height = 200;
// stacked 
const stacked = stack()
      .keys(['apples', 'bananas', 'cherries', 'dates'])

const stackedData = stacked(barData)
// xScale
const xDomain = barData.map(d => d.month)
const xScale = d3.scale.ordinal()
                   .domain(xDomain)
                   .rangeRoundBands([0, width], 0.25);

const xAccessor = d => d['month']
// yScale

// in stacked bar chart, the maximum height we need for
// yScale domain is the sum of y0 + y
const maxYDomain = d3.max(stackedData, (d) => (
    d3.max(d, (d2) => (
      // where y0, y is generated by d3.layout.stack()
      d2[0] + d2[1]
    ))
));
const yDomain = [0, maxYDomain];
const yScale = d3.scale.linear().range([height, 0]).domain(yDomain);

let isMouseOver = false

class Rect extends Component {

  getInitialState() {
    return {
      fill: this.props.fill
    }
  }

  render() {
    console.log(this.props)
    console.log(this.state)
    return (
      <rect
        {...this.props}
        fill={this.state.fill}
      />
    )
  }
}

export default class MyBarChart extends Component {

  render() {
    return (
      <SvgContainer width={width}>
        <BarChart
          data={stackedData}
          width={width}
          height={height}
          xScale={xScale}
          yScale={yScale}
          xAccessor={xAccessor}
          transform={'translate(50, 0)'}
          SvgComponent={Rect}
        />
        <XAxis
          width={width}
          height={height}
          xScale={xScale}
          tickFormatting={d => d.getMonth() + 1 }
          transform={'translate(50, 200)'}
        />
        <YAxis
          width={width}
          height={height}
          yScale={yScale}
          transform={'translate(50, 0)'}
        />
      </SvgContainer>
    )
  }
}