* {
  font-family: 'Lato', sans-serif;
}

.recharts-cartesian-axis-line {
  display: none;
}

.recharts-cartesian-axis-tick-line {
  display: none;
}

const {AreaChart, Area, BarChart, Bar, XAxis, YAxis} = Recharts;
const sc = styled.default;

const StackedBarChart = React.createClass({
	render () {
  	return (
    	<BarChart width={400} height={400} data={barChartData}>
       <XAxis dataKey="name"/>
       <YAxis/>
       <Bar dataKey="pv" stackId="a" fill="#4bbff7" />
       <Bar dataKey="uv" stackId="a" fill="#c7edfd" />
      </BarChart>
    );
  }
})

const TinyAreaChart = React.createClass({
	render () {
    const {chartData} = this.props;
  	return (
        <AreaChart width={150} height={60} data={chartData}
            margin={{top: 5, right: 0, left: 0, bottom: 5}}>
        <Area type='monotone' dataKey='uv' stroke='#4bbff7' fill='#4bbff7' />
      </AreaChart>
    );
  }
});

const GitHubIssuesTinyChartWithLabel = ({
  label,
  maxValue,
  chartData
}) => (
  <IssuesTinyChartContainer>
    <IssuesTinyChartLabel>{label}</IssuesTinyChartLabel>
    <IssuesTinyChartValue>{maxValue}</IssuesTinyChartValue>
    <TinyAreaChart chartData={chartData} />
  </IssuesTinyChartContainer>
);

const ChartsCard = () => {
	return (
    <ChartsCardContainer>
      <ChartCardHeading>Github Issues</ChartCardHeading>
      <Line></Line>
      <ChartCardContent>
        <StackedBarChart />
        <GitHubIssuesChartsContainer>
          <GitHubIssuesTinyChartWithLabel
            label="Created"
            maxValue={getMaxChartValue(CreatedIssuesChartData)}
            chartData={CreatedIssuesChartData}
          />
          <GitHubIssuesTinyChartWithLabel
            label="Closed"
            maxValue={getMaxChartValue(ClosedIssuesChartData)}
            chartData={ClosedIssuesChartData}
          />
          <GitHubIssuesTinyChartWithLabel
            label="Re-opened"
            maxValue={getMaxChartValue(ReOpenedIssuesChartData)}
            chartData={ReOpenedIssuesChartData}
          />
          <GitHubIssuesTinyChartWithLabel
            label="Won't fix"
            maxValue={getMaxChartValue(WontFixIssuesChartData)}
            chartData={WontFixIssuesChartData}
          />
          <GitHubIssuesTinyChartWithLabel
            label="Needs test"
            maxValue={getMaxChartValue(NeedsTestIssuesChartData)}
            chartData={NeedsTestIssuesChartData}
          />
          <GitHubIssuesTinyChartWithLabel
            label="Needs test"
            maxValue={getMaxChartValue(FixedIssuesChartData)}
            chartData={FixedIssuesChartData}
          />
        </GitHubIssuesChartsContainer>
      </ChartCardContent>
    </ChartsCardContainer>
  );
};

const getMaxChartValue = (chartData) => (
  chartData.reduce((prev, current) => (
     (prev.uv > current.uv) ? prev : current
  )).uv
);

const barChartData = [
      {name: 'Mon', uv: 18, pv: 42, amt: 2400},
      {name: 'Tue', uv: 10, pv: 29, amt: 2210},
      {name: 'Wed', uv: 13, pv: 45, amt: 2290},
      {name: 'Thu', uv: 13, pv: 35, amt: 2000},
      {name: 'Fri', uv: 10, pv: 19, amt: 2181},
      {name: 'Sat', uv: 11, pv: 23, amt: 2500},
      {name: 'Sun', uv: 17, pv: 20, amt: 2100},
];

const CreatedIssuesChartData = [
      {name: 'Mon', uv: 25, amt: 2400},
      {name: 'Tue', uv: 10, amt: 2210},
      {name: 'Wed', uv: 28, amt: 2290},
      {name: 'Thu', uv: 44, amt: 2000},
      {name: 'Fri', uv: 54, amt: 2181},
      {name: 'Sat', uv: 50, amt: 2500},
      {name: 'Sun', uv: 32, amt: 2500},
];

const ClosedIssuesChartData = [
      {name: 'Mon', uv: 25, amt: 2400},
      {name: 'Tue', uv: 15, amt: 2210},
      {name: 'Wed', uv: 22, amt: 2290},
      {name: 'Thu', uv: 20, amt: 2000},
      {name: 'Fri', uv: 18, amt: 2181},
      {name: 'Sat', uv: 15, amt: 2500},
      {name: 'Sun', uv: 26, amt: 2500},
];

const ReOpenedIssuesChartData = [
      {name: 'Mon', uv: 0, amt: 2400},
      {name: 'Tue', uv: 1, amt: 2210},
      {name: 'Wed', uv: 1, amt: 2290},
      {name: 'Thu', uv: 1, amt: 2000},
      {name: 'Fri', uv: 2, amt: 2181},
      {name: 'Sat', uv: 1, amt: 2500},
      {name: 'Sun', uv: 1, amt: 2500},
];

const WontFixIssuesChartData = [
      {name: 'Mon', uv: 3, amt: 2400},
      {name: 'Tue', uv: 2, amt: 2210},
      {name: 'Wed', uv: 1, amt: 2290},
      {name: 'Thu', uv: 2, amt: 2000},
      {name: 'Fri', uv: 3, amt: 2181},
      {name: 'Sat', uv: 2, amt: 2500},
      {name: 'Sun', uv: 4, amt: 2500},
];

const NeedsTestIssuesChartData = [
      {name: 'Mon', uv: 6, amt: 2400},
      {name: 'Tue', uv: 4, amt: 2210},
      {name: 'Wed', uv: 6, amt: 2290},
      {name: 'Thu', uv: 5, amt: 2000},
      {name: 'Fri', uv: 4, amt: 2181},
      {name: 'Sat', uv: 6, amt: 2500},
      {name: 'Sun', uv: 8, amt: 2500},
];

const FixedIssuesChartData = [
      {name: 'Mon', uv: 10, amt: 2400},
      {name: 'Tue', uv: 14, amt: 2210},
      {name: 'Wed', uv: 9, amt: 2290},
      {name: 'Thu', uv: 11, amt: 2000},
      {name: 'Fri', uv: 9, amt: 2181},
      {name: 'Sat', uv: 6, amt: 2500},
      {name: 'Sun', uv: 3, amt: 2500},
];

const IssuesTinyChartContainer = sc.div`
  display: flex;
  flex-direction: column;
`;

const IssuesTinyChartLabel = sc.span`
  text-transform: uppercase;
  color: #929292;
  font-weight: 300;
`;

const IssuesTinyChartValue = sc.span`
  font-size: 28px;
  font-weight: 500;
`;

const ChartsCardContainer = sc.div`
  display: flex;
  flex-direction: column;
  border: 1px solid silver;
  border-radius: 10px;
  width: max-content;
`;

const ChartCardHeading = sc.h4`
  margin-left: 20px;
`;

const Line = sc.hr`
  width: 100%;
  color: #e7e7e7;
  border: 1px solid;
`;

const ChartCardContent = sc.div`
  display: flex;
  padding: 20px 0;
`;

const GitHubIssuesChartsContainer = sc.div`
  display: grid;
  margin-left: 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  margin: 0 20px;
`;

ReactDOM.render(
  <ChartsCard />,
  document.getElementById('app')
);