/**
 * PreviewPane shows a file from the workspace: rendered Markdown or AsciiDoc
 * (with a Rendered/Source toggle), images at natural size, draw.io diagrams
 * through the diagrams.net viewer (with the XML as Source), and
 * syntax-highlighted read-only code for everything else.
 *
 * @example
 * <PreviewPane path="README.md" />
 */

import { useEffect, useState } from "react";
import { readFile } from "../api";
import { type DocumentKind, kindForPath, languageForPath } from "../lang";
import { openEditor } from "../workspace";
import { AsciiDocView } from "./AsciiDocView";
import { CodeView } from "./CodeView";
import { DrawioView } from "./DrawioView";
import { ImageView } from "./ImageView";
import { Markdown } from "./Markdown";

type PreviewMode = "rendered" | "source";

/** Kinds with both a rendered form and a source form. */
const toggleableKinds: ReadonlySet<DocumentKind> = new Set([
	"markdown",
	"asciidoc",
	"drawio",
]);

/**
 * usePreviewFile loads the file behind path (images excepted: the browser
 * fetches their bytes itself) and resets the view mode whenever the path
 * changes. `content` stays null while loading.
 */
function usePreviewFile(path: string | null) {
	const [content, setContent] = useState<string | null>(null);
	const [error, setError] = useState<string | null>(null);
	const [mode, setMode] = useState<PreviewMode>("rendered");

	useEffect(() => {
		if (!path) {
			return;
		}
		setContent(null);
		setError(null);
		setMode("rendered");
		if (kindForPath(path) === "image") {
			return;
		}
		readFile(path)
			.then((file) => setContent(file.content))
			.catch((cause: Error) => setError(cause.message));
	}, [path]);

	return { content, error, mode, setMode };
}

export function PreviewPane({ path }: { path: string | null }) {
	const { content, error, mode, setMode } = usePreviewFile(path);
	const kind = path ? kindForPath(path) : "code";

	if (!path) {
		return (
			<p className="pane-empty">Select a file in the tree to preview it.</p>
		);
	}
	if (error) {
		return <p className="pane-error">{error}</p>;
	}
	if (kind !== "image" && content === null) {
		return <p className="pane-empty">loading…</p>;
	}

	const toggleable = toggleableKinds.has(kind);

	return (
		<div className="preview">
			<div className="pane-header">
				<span className="pane-path" title={path}>
					{path.split("/").pop()}
				</span>
				{toggleable && (
					<div className="pane-modes">
						<ModeButton current={mode} mode="rendered" onSelect={setMode} />
						<ModeButton current={mode} mode="source" onSelect={setMode} />
					</div>
				)}
				{kind !== "image" && (
					<button
						type="button"
						className="pane-action"
						onClick={() => openEditor(path)}
					>
						Edit
					</button>
				)}
			</div>
			<div className="preview-body">
				<PreviewContent
					path={path}
					kind={kind}
					content={content ?? ""}
					mode={toggleable ? mode : "rendered"}
				/>
			</div>
		</div>
	);
}

function ModeButton({
	current,
	mode,
	onSelect,
}: {
	current: PreviewMode;
	mode: PreviewMode;
	onSelect: (mode: PreviewMode) => void;
}) {
	return (
		<button
			type="button"
			className={`pane-mode${current === mode ? " pane-mode-active" : ""}`}
			onClick={() => onSelect(mode)}
		>
			{mode === "rendered" ? "Rendered" : "Source"}
		</button>
	);
}

function PreviewContent({
	path,
	kind,
	content,
	mode,
}: {
	path: string;
	kind: DocumentKind;
	content: string;
	mode: PreviewMode;
}) {
	if (kind === "image") {
		return <ImageView path={path} />;
	}
	if (mode === "source" || kind === "code") {
		return <CodeView content={content} language={languageForPath(path)} />;
	}
	if (kind === "drawio") {
		return <DrawioView xml={content} />;
	}
	return (
		<div className="preview-rendered">
			{kind === "markdown" ? (
				<Markdown text={content} />
			) : (
				<AsciiDocView content={content} />
			)}
		</div>
	);
}