/**
 * functions around the "root" element - the element which represents a given variant
 * as identified by the {@link UwcInputElement#type | `<uwc-input[type]>`} attribute
 *
 * ## Combining with custom content
 *
 * This is useful for example when you want to include custom content, like icons,
 * because it gives you the option to specify _where_ you want the icons to be in
 * relation to the root element
 *
 * @example
 *
 * ```html
 * <uwc-input style="display: flex">
 *   <span class="icon user"></span>
 *   <div part="root" style="flex-grow: 1"></div>
 *   <span class="icon search"></span>
 * </uwc-input>
 * ```
 *
 * @module
 */

import { create } from "@hesxenon/prelude/Dom.js";
import { iife } from "@hesxenon/prelude/Function.js";

/**
 * get the root for the given input
 *
 * @internal
 */
export function getFor(input: UwcInputElement) {
  return (
    input.querySelector<HTMLElement>(":scope > div[part=root]") ??
    iife(() => {
      const root = create("div", { part: "root" });
      input.prepend(root);
      return root;
    })
  );
}

/**
 * @internal
 */
export function replaceChildren(input: UwcInputElement, withNodes: Element[]) {
  const primary = getFor(input);
  primary.innerHTML = "";
  primary.append(...withNodes);
}

/**
 * @internal
 */
export function isHidden(input: UwcInputElement) {
  return getFor(input).hasAttribute("hidden");
}

/**
 * @internal
 */
export function isReadonly(input: UwcInputElement) {
  return getFor(input).getAttribute("aria-readonly") === "true";
}