import { isValueReactor } from "#Source/reactor/index.ts"

import * as Lit from "../lit-html/index.ts"

import { reactor } from "./reactor-directive.ts"

export type HtmlTemplateResult = Lit.HTMLTemplateResult
export type SvgTemplateResult = Lit.SVGTemplateResult
export type MathmlTemplateResult = Lit.MathMLTemplateResult
export type TemplateResult = HtmlTemplateResult | SvgTemplateResult | MathmlTemplateResult

export type HtmlSimple = (
  strings: TemplateStringsArray,
  ...values: unknown[]
) => Lit.HTMLTemplateResult
export const htmlSimple: HtmlSimple = (strings: TemplateStringsArray, ...values: unknown[]) => {
  return Lit.html(strings, ...values)
}

export type Html = (strings: TemplateStringsArray, ...values: unknown[]) => Lit.HTMLTemplateResult
export const html: Html = (strings: TemplateStringsArray, ...values: unknown[]) => {
  const modifiedValues = values.map((value) => {
    if (isValueReactor(value)) {
      return reactor(value)
    } else {
      return value
    }
  })

  return Lit.html(strings, ...modifiedValues)
}