import { useLabContext } from "@/components/labs/context";
import { LabContentPlaceholder } from "@/components/labs/lab-content-placeholder";
import { LabScreenAlert } from "@/components/labs/lab-screen-alert";
import Markdown from "@/components/markdown/markdown";
import { useLocaleFunction } from "@/hooks/use-localed";
import { matchParent } from "@/lib/dom";
import { cn } from "@/lib/utils";
import { useEffect, useRef } from "react";

export function LabMain() {
  const {
    meta,
    parsedSections: sections = [],
    parts = [],
    step,
    navigating,
  } = useLabContext();

  const t = useLocaleFunction();

  const ref = useRef<HTMLDivElement>(null);

  const contentReady = !!sections[step]?.element;

  useEffect(() => {
    const main = ref.current;
    if (main) {
      const viewport = matchParent(main, "[data-radix-scroll-area-viewport]");
      if (viewport) {
        viewport.scrollTo({
          top: 0,
        });
      }
    }
  }, [step]);

  return (
    <main className="w-lab-main p-4 gap-4 relative" ref={ref}>
      <LabScreenAlert />
      <Markdown
        className={cn(
          "p-4 relative",
          navigating && "pointer-events-none opacity-50"
        )}
        // Temporarily hide markdown selection Explain
        enableAIExplain={false}
        // enableAIExplain={
        //   !!meta?.features?.enable_content_explain &&
        //   parts[step]?.type !== "quiz"
        // }
      >
        <h1 className="md:hidden mt-0" aria-hidden>
          {t(meta, "title")}
        </h1>
        {sections[step]?.element}
        {!contentReady && <LabContentPlaceholder />}
      </Markdown>
    </main>
  );
}