import React from 'react'

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer
} from 'recharts'

import returnTableData from './returnTableData'

export default ({
  result,
  numberOfRounds,
  numberOfBreakingTeams
}) => {
  const tableData = returnTableData(
    result,
    numberOfRounds,
    numberOfBreakingTeams
  )

  return (
    <ResponsiveContainer
      width={'100%'}
      height={400}
    >
      <BarChart
        data={tableData}
        margin={{ top: 16, right: 16, left: -16, bottom: 0 }}
      >
        <XAxis
          dataKey='name'
          allowDecimals={false}
        />
        <YAxis
          allowDecimals={false}
        />
        <CartesianGrid strokeDasharray='3 3' />
        <Tooltip />
        <Legend />
        <Bar name={'Pull-up always loses'} dataKey='pv' fill='#8884d8' />
        <Bar name={'Pull-up always wins'} dataKey='uv' fill='#82ca9d' />
      </BarChart>
    </ResponsiveContainer>
  )
}
