import React, {Fragment} from 'react';
import {LineChart} from '@common/charts/line-chart';
import {Trans} from '@common/i18n/trans';
import {PolarAreaChart} from '@common/charts/polar-area-chart';
import {BarChart} from '@common/charts/bar-chart';
import {VisitorsReportData} from '@common/admin/analytics/visitors-report-data';
import {FormattedNumber} from '@common/i18n/formatted-number';
import {GeoChart} from '@common/admin/analytics/geo-chart/geo-chart';

export const AdminReportPageColGap = 'gap-12 md:gap-24 mb-12 md:mb-24';
const rowClassName = `flex flex-col md:flex-row md:items-center overflow-x-auto ${AdminReportPageColGap}`;

interface AdminReportChartsProps {
  report?: VisitorsReportData;
  isLoading: boolean;
}
export function VisitorsReportCharts({
  report,
  isLoading,
}: AdminReportChartsProps) {
  const totalViews = report?.pageViews.total;
  return (
    <Fragment>
      <div className={rowClassName}>
        <LineChart
          isLoading={isLoading}
          className="flex-auto"
          data={report?.pageViews}
          title={<Trans message="Pageviews" />}
          description={
            totalViews ? (
              <Trans
                message=":count total views"
                values={{count: <FormattedNumber value={totalViews} />}}
              />
            ) : null
          }
        />
        <PolarAreaChart
          isLoading={isLoading}
          data={report?.devices}
          title={<Trans message="Top devices" />}
        />
      </div>
      <div className={rowClassName}>
        <BarChart
          isLoading={isLoading}
          data={report?.browsers}
          className="flex-auto md:w-1/3"
          direction="horizontal"
          individualBarColors
          hideLegend
          title={<Trans message="Top browsers" />}
        />
        <GeoChart
          isLoading={isLoading}
          className="flex-auto"
          data={report?.locations}
          title={<Trans message="Top locations" />}
        />
      </div>
    </Fragment>
  );
}