import * as React from "react";
import { ChartDataPoint, HistoryChartProps, ChartData } from "./HistoryChart.models";
import HistoryChartView from "./HistoryChart.view";

export default function HistoryChart(props: HistoryChartProps) {
  const { tabs, data, periodType, comparison } = props;

  const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
  const [startIndex, setStartIndex] = React.useState(0);

  const activeDataKey = activeTab.toLowerCase() as keyof ChartData;

  let rawData: ChartDataPoint[] = [];

  if (activeDataKey === "daily") {
    rawData = data.daily || [];
  } else {
    const section = data[activeDataKey];
    rawData = section?.[periodType] || [];
  }

  const currentData = rawData;

  const maxAmount =
    currentData.length > 0
      ? Math.max(
          ...currentData.flatMap((d) =>
            comparison ? [d.amount, d.compare?.amount ?? 0] : [d.amount]
          ),
          1
        )
      : 1;

  const visibleCountMap = { daily: 7, weekly: 6, monthly: 4 };
  const visibleCount = visibleCountMap[activeDataKey];

  const total = currentData.length;

  const clampedStartIndex = Math.min(startIndex, Math.max(total - visibleCount, 0));

  const visibleData = currentData.slice(
    clampedStartIndex,
    clampedStartIndex + visibleCount
  );

  return (
    <HistoryChartView
      {...props}
      activeTab={activeTab}
      setActiveTab={setActiveTab}
      currentData={currentData}
      visibleData={visibleData}
      maxAmount={maxAmount}
      visibleCount={visibleCount}
      startIndex={startIndex}
      setStartIndex={setStartIndex}
      activeDataKey={activeDataKey}
    />
  );
}