domFunctions.ts

import type { ChibiCtx } from '../ChibiCtx';
import type { ChibiJson } from '../ChibiGenerator';

export default {
  /**
   * Selects an element from the DOM using a CSS selector
   * @input void - No input required
   * @param selector - CSS selector string or ChibiJson that resolves to a string
   * @returns The first matching Element or null if not found
   * @example
   * $c.querySelector('h1')
   */
  querySelector: (ctx: ChibiCtx, input: void, selector: string | ChibiJson<string>) => {
    const selectorValue = typeof selector === 'string' ? selector : (ctx.run(selector) as string);
    return document.querySelector(selectorValue);
  },

  /**
   * Selects multiple elements from the DOM using a CSS selector
   * @input void - No input required
   * @param selector - CSS selector string or ChibiJson that resolves to a string
   * @returns Array of all matching elements
   * @example
   * $c.querySelectorAll('h1')
   */
  querySelectorAll: (ctx: ChibiCtx, input: void, selector: string | ChibiJson<string>) => {
    const selectorValue = typeof selector === 'string' ? selector : (ctx.run(selector) as string);
    return Array.from(document.querySelectorAll(selectorValue));
  },

  /**
   * Finds elements within the input element using a CSS selector
   * @input Element - DOM element to search within
   * @param selector - CSS selector string or ChibiJson that resolves to a string
   * @returns The first matching Element or null if not found
   * @example
   * $c.querySelector('div').find('h1')
   */
  find: (ctx: ChibiCtx, input: Element, selector: string | ChibiJson<string>) => {
    const selectorValue = typeof selector === 'string' ? selector : (ctx.run(selector) as string);
    return input.querySelector(selectorValue);
  },

  /**
   * Finds all elements within the input element using a CSS selector
   * @input Element - DOM element to search within
   * @param selector - CSS selector string or ChibiJson that resolves to a string
   * @returns Array of all matching elements
   * @example
   * $c.querySelector('div').findAll('h1')
   */
  findAll: (ctx: ChibiCtx, input: Element, selector: string | ChibiJson<string>) => {
    const selectorValue = typeof selector === 'string' ? selector : (ctx.run(selector) as string);
    return Array.from(input.querySelectorAll(selectorValue));
  },

  /**
   * Gets the text content of an element
   * @input Element - DOM element
   * @returns Text content of the element
   * @example
   * $c.querySelector('h1').text()
   */
  text: (ctx: ChibiCtx, input: Element) => {
    return input.textContent;
  },

  /**
   * Gets the HTML content of an element
   * @input Element - DOM element
   * @returns HTML content of the element
   * @example
   * $c.querySelector('h1').html()
   */
  html: (ctx: ChibiCtx, input: Element) => {
    return input.innerHTML;
  },

  /**
   * Gets the value of an attribute on an element
   * @input Element - DOM element
   * @param name - Name of the attribute
   * @returns Value of the attribute or null if not present
   * @example
   * $c.querySelector('input').getAttribute('value')
   */
  getAttribute: (ctx: ChibiCtx, input: Element, name: string) => {
    return input.getAttribute(name);
  },

  /**
   * Gets computed style of an element
   * @input Element - DOM element
   * @param property - CSS property name
   * @returns Value of the computed style property
   * @example
   * $c.querySelector('h1').getComputedStyle('color')
   */
  getComputedStyle: (ctx: ChibiCtx, input: Element, property: string) => {
    return window.getComputedStyle(input).getPropertyValue(property);
  },

  /**
   * Finds the closest ancestor of an element matching a selector
   * @input Element - DOM element to start from
   * @param selector - CSS selector to match ancestors against or ChibiJson that resolves to a string
   * @returns The matching ancestor element or null if none found
   * @example
   * $c.querySelector('h1').closest('.container')
   */
  closest: (ctx: ChibiCtx, input: Element, selector: string | ChibiJson<string>) => {
    const selectorValue = typeof selector === 'string' ? selector : (ctx.run(selector) as string);
    return input.closest(selectorValue);
  },

  /**
   * Gets the parent element of a DOM node
   * @input Element - DOM element
   * @returns The parent Element or null if no parent exists
   * @example
   * $c.querySelector('h1').parent()
   */
  parent: (ctx: ChibiCtx, input: Element) => {
    return input.parentElement;
  },

  /**
   * Gets the next sibling element of a DOM node
   * @input Element - DOM element
   * @returns The next sibling Element or null if no sibling exists
   * @example
   * $c.querySelector('h1').next()
   */
  next: (ctx: ChibiCtx, input: Element) => {
    return input.nextElementSibling;
  },

  /**
   * Gets the previous sibling element of a DOM node
   * @input Element - DOM element
   * @returns The previous sibling Element or null if no sibling exists
   * @example
   * $c.querySelector('h1').prev()
   */
  prev: (ctx: ChibiCtx, input: Element) => {
    return input.previousElementSibling;
  },

  /**
   * Checks if an element matches a CSS selector
   * @input Element - DOM element
   * @param selector - CSS selector string
   * @returns Boolean indicating if the element matches the selector
   * @example
   * $c.querySelector('h1').matches('.highlight')
   */
  elementMatches: (ctx: ChibiCtx, input: Element, selector: string) => {
    return input.matches(selector);
  },

  /**
   * Gets the current document title
   * @returns The current document title
   * @example
   * $c.document().title() // returns "My Page Title"
   */
  title: (ctx: ChibiCtx, input: void) => {
    return document.title;
  },

  /**
   * Checks if the selected element is currently visible
   * @input Element - DOM element
   * @returns Boolean indicating if the element is visible
   * @options Optional settings for visibility check. Defaults to { visibilityProperty: true, opacityProperty: true }.
   * @example
   * $c.querySelector('#player').checkVisibility()
   * $c.querySelector('#player').checkVisibility({ opacityProperty: false })
   */
  checkVisibility: (
    ctx: ChibiCtx,
    input: Element,
    options: CheckVisibilityOptions = { visibilityProperty: true, opacityProperty: true },
  ) => {
    return input.checkVisibility(options);
  },

  /**
   * Checks if the selected element is currently within the browser's viewport.
   * By default, it checks if the element is **fully** in the viewport.
   * If `partial` is true, it checks if **any part** of it is in the viewport.
   * @param ctx - The ChibiCtx context
   * @param input - The DOM element to check
   * @param partial - Allow partial visibility. Defaults to false (must be fully visible).
   * @returns A boolean indicating if the element is in the viewport
   * @example
   * // Checks if ANY part of the player is visible
   * $c.querySelector('#player').isInViewport(true)
   * * // Checks if the ENTIRE player is visible
   * $c.querySelector('#player').isInViewport()
   */
  isInViewport: (ctx: ChibiCtx, input: Element, partial?: boolean): boolean => {
    const rect = input.getBoundingClientRect();
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    const windowWidth = window.innerWidth || document.documentElement.clientWidth;

    if (partial) {
      return (
        rect.top <= windowHeight && rect.bottom >= 0 && rect.left <= windowWidth && rect.right >= 0
      );
    }

    return (
      rect.top >= 0 && rect.left >= 0 && rect.bottom <= windowHeight && rect.right <= windowWidth
    );
  },
};