import React, { Component } from 'react'
import csv from 'parse-csv'
import C3Chart from 'react-c3js'

import { toTuples } from '../util'

import 'c3/c3.css'
import './chart.css'

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

class SinglePieChart extends Component {
  state = {
    keys: [],
    data: [],
    fields: {},
  }

  componentDidMount() {
    const { payload } = this.props
    console.log(payload)
    console.log(payload.fields)
    const fields = {}
    payload.fields.forEach(field => {
      const [k, v] = field.split(': ')
      fields[k] = v
    })

    fetch(payload.url, { mode: 'cors' })
      .then(r => r.text())
      .then(text => {
        try {
          const keys = text.split('\n')[0].split(',').map(s => s.trim().replace(/"/, ''))
          const data = csv.toJSON(text, { headers: { included: true } })
          this.setState({ keys, data, fields })
        } catch (e) {
          console.error("error making json:", payload.url)
          console.error(e)
        }
      })
  }

  render() {
    const { payload } = this.props
    const { keys, data, fields } = this.state
    console.log(keys, data)
    const [labelField, numberField] = keys
    if (!data.length) return null

    const rowsToDisplay = parseInt(fields.Top, 10)

    const rows = data.map(row => {
      const label = row[labelField]
      const number = parseFloat(row[numberField])
      return [label, number]
    }).sort((a, b) => b[1] - a[1])

    console.log(rows)

    let chartRows = rows.slice(0, rowsToDisplay)
    let otherCount = rows.slice(rowsToDisplay).reduce((a, b) => { return a + b[1] }, 0)
    if (otherCount > 0) {
      chartRows.push([fields.OtherLabel, otherCount])
    }

    console.log(rowsToDisplay, chartRows)

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

export default SinglePieChart