---
import { COMMENT_NODE, DOCTYPE_NODE, DOCUMENT_NODE, ELEMENT_NODE, TEXT_NODE } from 'ultrahtml'
import type { NodeType } from 'ultrahtml'
import Children from './children.astro'
import Match from './match.astro'
import {
  PSEUDO_ELEMENT,
  PSEUDO_ELEMENTS,
} from './html.ts'

interface Props {
  html?: string,
  debug?: number,
  xpath?: string,
  replacements?: Replacements,

  slotHandler
  parent?: NodeType,
  node: NodeType,
  index?: number,
}


const { props: { parent = null, node, special, index = 0, debug = 0, replacers, slotHandler } } = Astro
const { name: Name, attributes } = node

if (debug) {
  console.log('node.astro:debug', {node})
}
const nextDebug = debug ? debug - 1 : 0
---
{
  special?.type === PSEUDO_ELEMENT ? ''
  : node.type === DOCTYPE_NODE ? ''
  : node.type === DOCUMENT_NODE ? <Children parent={node} children={node.children} debug={nextDebug} replacers={replacers} slotHandler={slotHandler}/>
  : node.type === COMMENT_NODE ? <Fragment set:html={'<!-- ' + node.value + ' -->'}/>
  : node.type === TEXT_NODE ? <Fragment set:html={node.value}/>
  : node.type === ELEMENT_NODE ? (
    node.isSelfClosingTag ? <Name {...attributes}/>
    : <Name {...attributes}><Match parent={parent} node={node} special={PSEUDO_ELEMENTS.before} index={0} debug={nextDebug} replacers={replacers} slotHandler={slotHandler}/><Children parent={node} children={node.children} debug={nextDebug} replacers={replacers} slotHandler={slotHandler}/><Match parent={parent} node={node} special={PSEUDO_ELEMENTS.after} index={0} debug={nextDebug} replacers={replacers} slotHandler={slotHandler}/></Name>
  ) : ''
}