import type { VisualInkLine } from "@a-morphous/frontispiece-ink-processor/types"
import { marked } from "marked"
import { html } from "./bootstrap"
import { parseLineIntoTokens } from "@a-morphous/frontispiece-line-parser"

import "./tag-classes.css"

type LineViewerProps = {
	line: VisualInkLine
}

export const LineViewer = (props: LineViewerProps) => {
	const renderTokens = () => {
		let str = ""
		let tokens = parseLineIntoTokens(props.line.text)
		if (!tokens) {
			str = props.line.text
		} else {
			for (let t of tokens) {
				switch (t.type) {
					case "text":
						str += t.text
						break
					case "tag":
						if (t.isClosingTag) {
							str += `</span>`
						} else {
							str += `<span class="ink-${t.param}">`
						}
						break
					case "link":
					case "note":
						// we'll implement this later
						str += t.text
						break
				}
			}
		}

		const parsedMarkdown = marked.parseInline(str, {
			gfm: true,
		})
		return html`<span
			dangerouslySetInnerHTML=${{
				__html: parsedMarkdown,
			}}
		/>`
	}

	const classes: string[] = []
	if (props.line.isHidden) {
		classes.push("logbook")
	}

	return html`<p class=${classes.join(" ")}>
		${renderTokens()} <small style=${{ opacity: 0.4 }}>${props.line.path}</small>
	</p>`
}