import { useState } from "react";
import { CodeFile } from "../CodeFile";
import { Button } from "~/ui/Button";
import { CsvTable } from "./CsvTable";
import { NotebookView } from "./NotebookView";
import { SvgPreview } from "./SvgPreview";
import type { Notebook } from "~/lib/code-intel";

type Kind = "csv" | "tsv" | "svg" | "notebook";

export function richKind(path: string, hasNotebook: boolean): Kind | null {
  const lower = path.toLowerCase();
  if (lower.endsWith(".csv")) return "csv";
  if (lower.endsWith(".tsv")) return "tsv";
  if (lower.endsWith(".svg")) return "svg";
  if (lower.endsWith(".ipynb") && hasNotebook) return "notebook";
  return null;
}

/** Preview for notebooks, delimited tables and SVG, with a toggle back to the highlighted source. */
export function RichBlob({
  kind,
  name,
  contents,
  notebook,
}: {
  kind: Kind;
  name: string;
  contents: string;
  notebook: Notebook | null;
}) {
  const [showSource, setShowSource] = useState(false);
  return (
    <div>
      <div className="flex justify-end border-b border-kumo-hairline px-3 py-1.5">
        <Button size="sm" variant="ghost" onClick={() => setShowSource((value) => !value)}>
          {showSource ? "Preview" : "Source"}
        </Button>
      </div>
      {showSource ? (
        <CodeFile name={name} contents={contents} />
      ) : kind === "notebook" && notebook ? (
        <NotebookView notebook={notebook} />
      ) : kind === "svg" ? (
        <SvgPreview contents={contents} name={name} />
      ) : (
        <CsvTable contents={contents} delimiter={kind === "tsv" ? "\t" : ","} />
      )}
    </div>
  );
}