import { Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

import type { AnalyticsOverviewDto } from "~/utils/helpers/.server/AnalyticsService";
import { useLocaleFormatters } from "~/locale/format";

import { Card } from "../ui/card";

type AnalyticsOverviewChartProps = {
  chartData: NonNullable<AnalyticsOverviewDto["charts"]>["pageViewsAndUniqueVisitors"];
  pageViewsLabel: string;
  uniqueVisitorsLabel: string;
};

export default function AnalyticsOverviewChart({ chartData, pageViewsLabel, uniqueVisitorsLabel }: AnalyticsOverviewChartProps) {
  const formatters = useLocaleFormatters();
  const valueFormatter = (value: number) => formatters.number(value, { maximumFractionDigits: 0 });

  return (
    <Card className="h-56 p-4">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={chartData} margin={{ top: 8, right: 16, left: 0, bottom: 0 }}>
          <CartesianGrid strokeDasharray="3 3" vertical={false} />
          <XAxis dataKey="date" tickLine={false} axisLine={false} fontSize={12} />
          <YAxis tickFormatter={valueFormatter} tickLine={false} axisLine={false} fontSize={12} width={48} />
          <Tooltip formatter={(value) => valueFormatter(Number(value))} />
          <Legend />
          <Area type="monotone" dataKey="Page views" name={pageViewsLabel} stroke="#4f46e5" fill="#4f46e5" fillOpacity={0.16} strokeWidth={2} />
          <Area type="monotone" dataKey="Unique visitors" name={uniqueVisitorsLabel} stroke="#0891b2" fill="#0891b2" fillOpacity={0.16} strokeWidth={2} />
        </AreaChart>
      </ResponsiveContainer>
    </Card>
  );
}