import React from 'react';
import { useIntl } from 'react-intl';
import CheckVisible from 'components/helpers/CheckVisible';
import BarChart from './BarChart';

export default function PageviewsChart({ websiteId, data, unit, records, className }) {
  const intl = useIntl();

  const handleUpdate = chart => {
    const {
      data: { datasets },
    } = chart;

    datasets[0].data = data.uniques;
    datasets[0].label = intl.formatMessage({
      id: 'metrics.unique-visitors',
      defaultMessage: 'Unique visitors',
    });
    datasets[1].data = data.pageviews;
    datasets[1].label = intl.formatMessage({
      id: 'metrics.page-views',
      defaultMessage: 'Page views',
    });

    chart.update();
  };

  if (!data) {
    return null;
  }

  return (
    <CheckVisible>
      {visible => (
        <BarChart
          className={className}
          chartId={websiteId}
          datasets={[
            {
              label: intl.formatMessage({
                id: 'metrics.unique-visitors',
                defaultMessage: 'Unique visitors',
              }),
              data: data.uniques,
              lineTension: 0,
              backgroundColor: 'rgb(38, 128, 235, 0.4)',
              borderColor: 'rgb(13, 102, 208, 0.4)',
              borderWidth: 1,
            },
            {
              label: intl.formatMessage({
                id: 'metrics.page-views',
                defaultMessage: 'Page views',
              }),
              data: data.pageviews,
              lineTension: 0,
              backgroundColor: 'rgb(38, 128, 235, 0.2)',
              borderColor: 'rgb(13, 102, 208, 0.2)',
              borderWidth: 1,
            },
          ]}
          unit={unit}
          records={records}
          animationDuration={visible ? 300 : 0}
          onUpdate={handleUpdate}
        />
      )}
    </CheckVisible>
  );
}