import React from 'react';
import format from 'date-fns/format';
import { LineChart, XAxis, YAxis, Line, CartesianGrid } from 'recharts';

import { DataSource, Country, Data } from '../types';
import { getCases } from '../utils/get-cases';
import { processCases } from '../utils/regression';

type Props = {
  country: Country;
};

const margin = {
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
};

const dateTickFormatter = (date: Date): string => {
  return format(new Date(date), 'LLL do'); // 'Do MMM');
};

const GraphCases: React.FC<Props> = ({ country }) => {
  const dataSource = React.useMemo<DataSource>(() => getCases(country), [country]);
  const data = React.useMemo<Data>(() => processCases(dataSource.cases), [dataSource.cases]);

  return (
    <div>
      <h3>Country: {country.toUpperCase()}</h3>
      <p>
        Source: <a href={dataSource.source}>{dataSource.source}</a>
      </p>
      <LineChart width={640} height={480} data={data} margin={margin}>
        <XAxis
          dataKey="xValue"
          domain={['auto', 'auto']}
          tickFormatter={dateTickFormatter}
          type="number"
        />
        <YAxis tick yAxisId="left" />
        <CartesianGrid stroke="#f5f5f5" />
        <Line type="monotone" dataKey="value" stroke="#ffabf8" yAxisId="left" />
        <Line type="monotone" dataKey="regression" stroke="#ffcffb" yAxisId="left" dot={false} />
        <Line type="monotone" dataKey="valueCumulative" stroke="#cc3d55" yAxisId="left" />
        <Line
          type="monotone"
          dataKey="regressionCumulative"
          stroke="#e86178"
          yAxisId="left"
          dot={false}
        />
      </LineChart>
    </div>
  );
};

export default GraphCases;