import { createElement, useMemo, type ReactNode } from "react";
import { renderContentfulRichText } from "./use-contentful-rich-text";

import { type Options } from "@contentful/rich-text-react-renderer";
import { MARKS } from "@contentful/rich-text-types";
import { toDocument } from "@shared/utils/contentful/to-document";

export const label1BoldOptions = {
  renderMark: {
    [MARKS.BOLD]: (text: ReactNode) =>
      createElement("span", { className: "label1" }, text),
  },
};

export interface ProcessedChecklistItem {
  title: string;
  iconUrl?: string;
  anchorId?: string;
}

// titlesOnly as a boolean parameter with a conditional return type
export function useProcessedChecklist<T extends boolean = false>(
  checklistData?: any,
  titlesOnly?: T,
  richTextOptions?: Options,
  richTextClassName?: string
): T extends true ? string[] : ProcessedChecklistItem[] {
  return useMemo(() => {
    const rawItems: any[] = checklistData?.list?.items ?? [];

    if (titlesOnly) {
      return rawItems.map(
        item =>
          renderContentfulRichText(
            toDocument(item?.checkListTitle ?? ""),
            undefined,
            richTextClassName,
            undefined,
            richTextOptions
          ) ?? ""
      ) as any;
    }

    return rawItems.map(item => ({
      title:
        renderContentfulRichText(
          toDocument(item?.checkListTitle ?? ""),
          undefined,
          richTextClassName,
          undefined,
          richTextOptions
        ) ?? "",
      iconUrl: item?.icon?.url ?? undefined,
      anchorId: item?.anchorId ?? undefined,
    })) as any;
  }, [checklistData, titlesOnly, richTextOptions, richTextClassName]) as any;
}

// Usage:
// Full items
//const items = useProcessedChecklist(checklistData); // ProcessedChecklistItem[]
// Titles only
//const titles = useProcessedChecklist(checklistData, true); // string[]