import { useMemo } from 'react';
import PageviewsChart from 'components/metrics/PageviewsChart';
import { useApi, useDateRange, useTimezone, usePageQuery } from 'hooks';
import { getDateArray, getDateLength } from 'lib/date';

export function WebsiteChart({ websiteId }) {
  const [dateRange] = useDateRange(websiteId);
  const { startDate, endDate, unit, modified } = dateRange;
  const [timezone] = useTimezone();
  const {
    query: { url, referrer, os, browser, device, country, region, city, title },
  } = usePageQuery();
  const { get, useQuery } = useApi();

  const { data, isLoading } = useQuery(
    [
      'websites:pageviews',
      { websiteId, modified, url, referrer, os, browser, device, country, region, city, title },
    ],
    () =>
      get(`/websites/${websiteId}/pageviews`, {
        startAt: +startDate,
        endAt: +endDate,
        unit,
        timezone,
        url,
        referrer,
        os,
        browser,
        device,
        country,
        region,
        city,
        title,
      }),
  );

  const chartData = useMemo(() => {
    if (data) {
      return {
        pageviews: getDateArray(data.pageviews, startDate, endDate, unit),
        sessions: getDateArray(data.sessions, startDate, endDate, unit),
      };
    }
    return { pageviews: [], sessions: [] };
  }, [data, startDate, endDate, unit, modified]);

  return (
    <PageviewsChart
      websiteId={websiteId}
      data={chartData}
      unit={unit}
      records={getDateLength(startDate, endDate, unit)}
      loading={isLoading}
    />
  );
}

export default WebsiteChart;