import React, { Component } from 'react'
import C3Chart from 'react-c3js'
import { toTuples } from '../util'
import 'c3/c3.css'
import './chart.css'

import {
  rainbow, colorblindSafeRainbow,
  topCountryCount, otherCountriesLabel,
  institutionOrder, institutionLabels, institutionColors,
  initialInstitutionLookup,
} from './constants'

class PieCharts extends Component {
  render() {
    const { payload } = this.props
    const { paper, citations } = payload.data
    // console.log(this.props)
    if (!citations.length) return null

    const countries = {}
    const institutionTypes = { ...initialInstitutionLookup }
    citations.forEach(citation => {
      citation.addresses.forEach(address => {
        const { country } = address
        if (!country) return
        if (!(country in countries)) {
          countries[country] = 1
        } else {
          countries[country] += 1
        }
        switch (address.type) {
          case 'company':
          case 'edu':
          case 'gov':
            institutionTypes[address.type] += 1
            break
          case 'mil':
            institutionTypes.gov += 1
            break
          default:
            console.log('weird institution type', address)
            break
        }
      })
    })

    const countryTuples = toTuples(countries).sort((a, b) => b[1] - a[1])
    let countryRows = countryTuples.slice(0, 10)

    const otherCountryCount = countryTuples.slice(10).reduce((a, b) => (a + b[1]), 0)
    if (otherCountryCount > 0) {
      countryRows.push([
        otherCountriesLabel,
        otherCountryCount,
      ])
    }
    // console.log(countryTuples, otherCountryCount, countryRows)

    const institutionRows = toTuples(institutionTypes)
      .map(a => [institutionOrder[a[0]], a])
      .sort((a, b) => a[0] - b[0])
      .map(a => a[1])
      .map(a => [institutionLabels[a[0]], a[1]])

    return (
      <div className='chart'>
        <div>
          <C3Chart
            data={{
              columns: countryRows,
              type: 'pie',
            }}
            color={{
              pattern: rainbow,
            }}
            tooltip={{
              format: {
                value: value => value,
              }
            }}
            size={{
              height: countryRows.length < 4 ? 316 : 336,
            }}
          />
          <span className='chartCaption'>{citations.length + ' verified ' + paper.name + ' dataset citations by country'}</span>
        </div>
        <div>
          <C3Chart
            data={{
              columns: institutionRows,
              type: 'pie',
            }}
            color={{
              pattern: institutionColors,
            }}
            tooltip={{
              format: {
                value: value => value,
              }
            }}
            size={{
              height: 316,
            }}
          />
          <span className='chartCaption'>{citations.length + ' verified ' + paper.name + ' dataset citations by organization type'}</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 PieCharts