import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { toArray, toTuples } from '../util'
import C3Chart from 'react-c3js'
import 'c3/c3.css'

class PaperChart extends Component {
  render() {
    const { rows, title } = this.props
    if (!rows.length) return null
    const colorPattern = [
      "#00b200",
      "#ff0000",
      "#e0c200",
      "#dddddd",
    ]

    return (
      <div className='chart'>
        <div>
          <C3Chart
            data={{
              columns: rows,
              type: 'pie',
            }}
            color={{
              pattern: colorPattern,
            }}
            tooltip={{
              format: {
                value: value => value,
              }
            }}
            size={{
              height: rows.length < 4 ? 316 : 336,
            }}
          />
          <span className='chartCaption'>{title}</span>
        </div>
      </div>
    )
  }
}

/*
          legend={{
            position: 'right'
          }}
          tooltip={{
            contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
              const countriesByYearLookup = years[yearList[d[0].x]]
              let countriesByYear = Object.keys(countriesByYearLookup).map(country => [country, countriesByYearLookup[country]]).sort((a,b) => b[1] - a[1])
              let topCountriesForThisYear = countriesByYear.slice(0, topCountryCount)
              let bottomTotal = countriesByYear.slice(topCountryCount).reduce((a,b) => (a + b[1]), 0)
              // console.log(topCountriesForThisYear)
              topCountriesForThisYear.push([otherCountriesLabel, bottomTotal])
              const tableRows = topCountriesForThisYear.filter(pair => !!pair[1]).map(([country, total]) => {
                let colorIndex = topCountries.indexOf(country)
                if (colorIndex < 0) colorIndex = colorPattern.length - 1
                const color = colorPattern[ colorIndex ]
                return [
                  "<tr>",
                  "<td>",
                    "<span style='background-color:" + color + "' class='swatch'></span>",
                    country,
                  "</td>",
                  "<td>",
                    total,
                  "</td>",
                  "</tr>",
                ].join('')
              })
              return [
                "<table class='c3-tooltip'>",
                ...tableRows,
                "</table>",
              ].join('')
            }
          }}
*/

export default PaperChart