import { useMemo } from "react";
import { CountBadge } from "../components/core/CountBadge";
import type { TabItem } from "../components/core/Tabs/Tabs";
import type { HeaderModel } from "./useInheritedHeaders";
import { useInheritedHeaders } from "./useInheritedHeaders";

export function useHeadersTab<T extends string>(
  tabValue: T,
  model: HeaderModel | null,
  label?: string,
) {
  const inheritedHeaders = useInheritedHeaders(model);

  return useMemo<TabItem[]>(() => {
    if (model == null) return [];

    const allHeaders = [
      ...inheritedHeaders,
      ...(model.model === "grpc_request" ? model.metadata : model.headers),
    ];
    const numHeaders = allHeaders.filter((h) => h.name).length;

    const tab: TabItem = {
      value: tabValue,
      label: label ?? "Headers",
      rightSlot: <CountBadge count={numHeaders} />,
    };

    return [tab];
  }, [inheritedHeaders, label, model, tabValue]);
}