import { useState } from "react"; 
import { FadeIn } from "../home-shared/FadeIn";
import { SectionHeader, SectionSubtext } from "../home-shared/Headings";
import { BenchmarksGraph } from "./PackBenchmarksGraph";
import { PackBenchmarksPicker } from "./PackBenchmarksPicker";
import { PackBenchmarkTabs } from "./PackBenchmarkTabs";

export type BenchmarkNumberOfModules = "1000" | "5000" | "10000" | "30000";
export type BenchmarkCategory =
  | "cold"
  | "from_cache"
  | "file_change"
  | "code_build"
  | "build_from_cache";
export interface BenchmarkData {
  HydroRoll: number;
  Shiki: number;
  OlivOS: number;
  SealDice: number;
}

export interface BenchmarkBar {
  label: string;
  key: keyof BenchmarkData;
  core?: true;
  swc?: true;
}

export const DEFAULT_BARS: BenchmarkBar[] = [
  {
    key: "HydroRoll",
    label: "HydroRoll水系",
    core: true,
  },
  {
    key: "Shiki",
    label: "溯洄Shiki",
  },
  {
    key: "OlivOS",
    label: "OlivOS青果",
    swc: true,
  },
  {
    key: "SealDice",
    label: "SealDice海豹",
  },
];
export const HMR_BARS: BenchmarkBar[] = [
  {
    key: "HydroRoll",
    label: "HydroRoll水系",
    core: true,
  },
  {
    key: "Shiki",
    label: "溯洄Shiki",
  },
  {
    key: "OlivOS",
    label: "OlivOS青果",
    swc: true,
  },
  {
    key: "SealDice",
    label: "SealDice海豹",
  },
];

export function PackBenchmarks() {
  const [numberOfModules, setNumberOfModules] =
    useState<BenchmarkNumberOfModules>("1000");
  const [category, setCategory] = useState<BenchmarkCategory>("cold");

  return (
    <FadeIn className="relative flex flex-col items-center justify-center w-full gap-10 py-16 font-sans md:py-24 lg:py-32">
      <div className="flex flex-col items-center gap-5 md:gap-6">
        <SectionHeader>速度不止于此</SectionHeader>
        <SectionSubtext>
          快速加载，模块化设计，fastapi、aiohttp、flask等高效率支持库，
          为核心提速。
        </SectionSubtext>
      </div>
      <div className="flex flex-col items-center w-full">
        <PackBenchmarkTabs onTabChange={setCategory} />
        <BenchmarksGraph
          category={category}
          numberOfModules={numberOfModules}
          bars={DEFAULT_BARS}
        />
      </div>
      <PackBenchmarksPicker
        setNumberOfModules={setNumberOfModules}
      ></PackBenchmarksPicker>
    </FadeIn>
  );
}