util.ts

import { html, isServer, nothing, type TemplateResult } from 'lit';
import type IgcFileInputComponent from '../file-input/file-input.js';

export const asPercent = (part: number, whole: number) => (part / whole) * 100;

export const clamp = (number: number, min: number, max: number) =>
  Math.max(min, Math.min(number, max));

export function numberOfDecimals(number: number): number {
  const [_, decimals] = number.toString().split('.');
  return decimals ? decimals.length : 0;
}

export function roundPrecise(number: number, magnitude = 1): number {
  const factor = 10 ** magnitude;
  return Math.round(number * factor) / factor;
}

export function numberInRangeInclusive(
  value: number,
  min: number,
  max: number
) {
  return value >= min && value <= max;
}

/**
 * Returns whether an element has a Left-to-Right directionality.
 */
export function isLTR(element: HTMLElement) {
  return element.matches(':dir(ltr)');
}

/**
 * Builds a string from format specifiers and replacement parameters.
 * Will coerce non-string parameters to their string representations.
 *
 * @example
 * ```typescript
 * formatString('{0} says "{1}".', 'John', 'Hello'); // 'John says "Hello".'
 * formatString('{1} is greater than {0}', 0, 1); // '1 is greater than 0'
 * ```
 */
export function formatString(template: string, ...params: unknown[]): string {
  const length = params.length;

  return template.replace(/{(\d+)}/g, (match: string, index: number) =>
    index >= length ? match : `${params[index]}`
  );
}

/**
 * Parse the passed `value` as a number or return the `fallback` if it can't be done.
 *
 * @example
 * ```typescript
 * asNumber('5'); // 5
 * asNumber('3.14'); // 3.14
 * asNumber('five'); // 0
 * asNUmber('five', 5); // 5
 * ```
 */
export function asNumber(value: unknown, fallback = 0) {
  const parsed = Number.parseFloat(value as string);
  return Number.isNaN(parsed) ? fallback : parsed;
}

/**
 * Returns the value wrapped between the min and max bounds.
 *
 * If the value is greater than max, returns the min and vice-versa.
 * If the value is between the bounds, it is returned unchanged.
 *
 * @example
 * ```typescript
 * wrap(1, 4, 2); // 2
 * wrap(1, 4, 5); // 1
 * wrap(1, 4, -1); // 4
 * ```
 */
export function wrap(min: number, max: number, value: number) {
  if (value < min) {
    return max;
  }
  if (value > max) {
    return min;
  }

  return value;
}

export function isDefined<T = unknown>(value: T) {
  return value !== undefined;
}

export type IterNodesOptions<T = Node> = {
  show?: keyof typeof NodeFilter;
  filter?: (node: T) => boolean;
};

function createNodeFilter<T extends Node>(predicate: (node: T) => boolean) {
  return {
    acceptNode: (node: T): number =>
      !predicate || predicate(node)
        ? NodeFilter.FILTER_ACCEPT
        : NodeFilter.FILTER_SKIP,
  };
}

export function* iterNodes<T extends Node>(
  root: Node,
  options?: IterNodesOptions<T>
): Generator<T> {
  if (!isDefined(globalThis.document)) {
    return;
  }

  const whatToShow = options?.show
    ? NodeFilter[options.show]
    : NodeFilter.SHOW_ALL;

  const nodeFilter = options?.filter
    ? createNodeFilter(options.filter)
    : undefined;

  const treeWalker = document.createTreeWalker(root, whatToShow, nodeFilter);

  while (treeWalker.nextNode()) {
    yield treeWalker.currentNode as T;
  }
}

export function getRoot(
  element: Element,
  options?: GetRootNodeOptions
): Document | ShadowRoot {
  return element.getRootNode(options) as Document | ShadowRoot;
}

export function getElementByIdFromRoot(root: HTMLElement, id: string) {
  return getRoot(root).getElementById(id);
}

export function isElement(node: unknown): node is Element {
  return node instanceof Node && node.nodeType === Node.ELEMENT_NODE;
}

export function findElementFromEventPath<K extends keyof HTMLElementTagNameMap>(
  predicate: K,
  event: Event
): HTMLElementTagNameMap[K] | undefined;
export function findElementFromEventPath<T extends Element>(
  predicate: string | ((element: Element) => boolean),
  event: Event
): T | undefined;
export function findElementFromEventPath(
  predicate: string | ((element: Element) => boolean),
  event: Event
) {
  const func = isString(predicate)
    ? (e: Element) => e.matches(predicate)
    : (e: Element) => predicate(e);

  return Iterator.from(event.composedPath()).find(
    (item) => isElement(item) && func(item)
  ) as Element | undefined;
}

export function first<T>(arr: T[]) {
  return arr.at(0) as T;
}

export function last<T>(arr: T[]) {
  return arr.at(-1) as T;
}

export function modulo(n: number, d: number) {
  return ((n % d) + d) % d;
}

/**
 * Splits an array into chunks of a specified size and returns a generator that yields each chunk.
 *
 * @example
 * ```typescript
 * [...chunk([1, 2, 3, 4, 5], 2)]; // [[1, 2], [3, 4], [5]]
 * ```
 *
 * @throws If the `size` parameter is not a safe integer greater than or equal to 1.
 */
export function* chunk<T>(arr: T[], size: number): Generator<T[]> {
  if (!Number.isSafeInteger(size) || size < 1) {
    throw new Error('size must be an integer >= 1');
  }

  const iterator = Iterator.from(arr);
  const length = arr.length;
  let i = 0;

  while (i < length) {
    yield iterator.take(size).toArray();
    i += size;
  }
}

export function splitToWords(text: string) {
  const input = text.replaceAll(/[^a-zA-Z0-9\s-_]/g, '');
  if (/[\s-_]+/.test(input)) return input.split(/[\s-_]+/);
  return input.split(/(?=[A-Z])+/);
}

export function toKebabCase(text: string): string {
  const input = text.trim();
  return splitToWords(input).join('-').toLocaleLowerCase();
}

export function isFunction(value: unknown): value is CallableFunction {
  return typeof value === 'function';
}

export function isString(value: unknown): value is string {
  return typeof value === 'string';
}

export function isObject(value: unknown): value is object {
  return value != null && typeof value === 'object';
}

export function isPlainObject(
  value: unknown
): value is Record<PropertyKey, unknown> {
  if (!isObject(value)) {
    return false;
  }

  const proto = Object.getPrototypeOf(value) as typeof Object.prototype | null;

  const hasObjectPrototype =
    proto === null ||
    proto === Object.prototype ||
    Object.getPrototypeOf(proto) === null;

  return hasObjectPrototype
    ? Object.prototype.toString.call(value) === '[object Object]'
    : false;
}

function isUnsafeProperty(key: PropertyKey) {
  return key === '__proto__' || key === 'constructor' || key === 'prototype';
}

export function isEventListenerObject(x: unknown): x is EventListenerObject {
  return isObject(x) && 'handleEvent' in x;
}

export function addWeakEventListener(
  element: Element,
  event: string,
  listener: EventListenerOrEventListenerObject,
  options?: AddEventListenerOptions | boolean
): void {
  const weakRef = new WeakRef(listener);
  const wrapped = (evt: Event) => {
    const handler = weakRef.deref();

    return isEventListenerObject(handler)
      ? handler.handleEvent(evt)
      : handler?.(evt);
  };

  element.addEventListener(event, wrapped, options);
}

type EventTypeOf<T extends keyof HTMLElementEventMap | keyof WindowEventMap> =
  (HTMLElementEventMap & WindowEventMap)[T];

/**
 * Safely adds an event listener to an HTMLElement, automatically handling
 * server-side rendering environments by doing nothing if `isServer` is true.
 * This function also correctly binds the `handler`'s `this` context to the `target` element
 * and ensures proper event type inference.
 */
export function addSafeEventListener<
  E extends keyof HTMLElementEventMap | keyof WindowEventMap,
>(
  target: HTMLElement,
  eventName: E,
  handler: (event: EventTypeOf<E>) => unknown,
  options?: boolean | AddEventListenerOptions
): void {
  if (isServer) {
    return;
  }

  const boundHandler = (event: Event) =>
    handler.call(target, event as EventTypeOf<E>);

  target.addEventListener(eventName, boundHandler, options);
}

/**
 * Returns whether a given collection is empty.
 */
export function isEmpty<T, U extends object>(
  x: ArrayLike<T> | Set<T> | Map<U, T>
): boolean {
  return 'length' in x ? x.length < 1 : x.size < 1;
}

export function asArray<T>(value?: T | T[]): T[] {
  if (!isDefined(value)) return [];
  return Array.isArray(value) ? value : [value];
}

export function partition<T>(
  array: T[],
  isTruthy: (value: T) => boolean
): [truthy: T[], falsy: T[]] {
  const truthy: T[] = [];
  const falsy: T[] = [];

  for (const item of array) {
    (isTruthy(item) ? truthy : falsy).push(item);
  }

  return [truthy, falsy];
}

/** Returns the center x/y coordinate of a given element. */
export function getCenterPoint(element: Element): { x: number; y: number } {
  const { left, top, width, height } = element.getBoundingClientRect();

  return {
    x: left + width * 0.5,
    y: top + height * 0.5,
  };
}

/** Returns the scale factor of a given element based on its bounding client rect and offset dimensions. */
export function getScaleFactor(element: HTMLElement): { x: number; y: number } {
  const { offsetWidth, offsetHeight } = element;
  const { width, height } = element.getBoundingClientRect();
  return { x: offsetWidth / width || 1, y: offsetHeight / height || 1 };
}

export function roundByDPR(value: number): number {
  const dpr = globalThis.devicePixelRatio || 1;
  return Math.round(value * dpr) / dpr;
}

export function scrollIntoView(
  element?: HTMLElement | null,
  config?: ScrollIntoViewOptions
): void {
  if (!element) {
    return;
  }

  element.scrollIntoView(
    Object.assign(
      {
        behavior: 'auto',
        block: 'nearest',
        inline: 'nearest',
      },
      config
    )
  );
}

export function isRegExp(value: unknown): value is RegExp {
  return value != null && value.constructor === RegExp;
}

export function equal<T>(a: unknown, b: T, visited = new WeakSet()): boolean {
  // Early return
  if (Object.is(a, b)) {
    return true;
  }

  if (isObject(a) && isObject(b)) {
    if (a.constructor !== b.constructor) {
      return false;
    }

    // Circular references
    if (visited.has(a) && visited.has(b)) {
      return true;
    }

    visited.add(a);
    visited.add(b);

    // RegExp
    if (isRegExp(a) && isRegExp(b)) {
      return a.source === b.source && a.flags === b.flags;
    }

    // Maps
    if (a instanceof Map && b instanceof Map) {
      if (a.size !== b.size) {
        return false;
      }
      for (const [keyA, valueA] of a.entries()) {
        let found = false;
        for (const [keyB, valueB] of b.entries()) {
          if (equal(keyA, keyB, visited) && equal(valueA, valueB, visited)) {
            found = true;
            break;
          }
        }
        if (!found) {
          return false;
        }
      }
      return true;
    }

    // Sets
    if (a instanceof Set && b instanceof Set) {
      if (a.size !== b.size) {
        return false;
      }
      for (const valueA of a) {
        let found = false;
        for (const valueB of b) {
          if (equal(valueA, valueB, visited)) {
            found = true;
            break;
          }
        }
        if (!found) {
          return false;
        }
      }
      return true;
    }

    // Arrays
    if (Array.isArray(a) && Array.isArray(b)) {
      const length = a.length;
      if (length !== b.length) {
        return false;
      }
      for (let i = 0; i < length; i++) {
        if (!equal(a[i], b[i], visited)) {
          return false;
        }
      }
      return true;
    }

    // toPrimitive
    if (a.valueOf !== Object.prototype.valueOf) {
      return a.valueOf() === b.valueOf();
    }
    // Strings based
    if (a.toString !== Object.prototype.toString) {
      return a.toString() === b.toString();
    }

    const aKeys = Object.keys(a);
    const bKeys = Object.keys(b);
    if (aKeys.length !== bKeys.length) {
      return false;
    }

    for (const key of aKeys) {
      if (!Object.hasOwn(b, key)) {
        return false;
      }
    }

    for (const key of aKeys) {
      if (!equal(a[key as keyof typeof a], b[key as keyof typeof b], visited)) {
        return false;
      }
    }

    visited.delete(a);
    visited.delete(b);

    return true;
  }

  return false;
}

/**
 *  Escapes any potential regex syntax characters in a string, and returns a new string
 *  that can be safely used as a literal pattern for the `RegExp()` constructor.
 *
 *  @remarks
 *  Substitute with `RegExp.escape` once it has enough support:
 *
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/escape#browser_compatibility
 */
export function escapeRegex(value: string): string {
  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

/** Required utility type for specific props */
export type RequiredProps<T, K extends keyof T> = T & {
  [P in K]-?: T[P];
};

export function setStyles(
  element: HTMLElement,
  styles: Partial<CSSStyleDeclaration>
): void {
  merge(element.style, styles);
}

/**
 * Merges the properties of `source` into `target` performing a recursive deep merge over POJOs and arrays.
 *
 * @remarks
 * This function mutates the `target` object.
 * If that is not the desired outcome, see {@link toMerged} for another approach.
 */
export function merge<
  T extends Record<PropertyKey, any>,
  S extends Record<PropertyKey, any>,
>(target: T, source: S): T & S {
  const sourceKeys = Object.keys(source) as Array<keyof S>;
  const length = sourceKeys.length;

  for (let i = 0; i < length; i++) {
    const key = sourceKeys[i];

    if (isUnsafeProperty(key)) {
      continue;
    }

    const sourceValue = source[key];
    const targetValue = target[key];

    if (Array.isArray(sourceValue)) {
      if (Array.isArray(targetValue)) {
        target[key] = merge(targetValue, sourceValue);
      } else {
        target[key] = merge([], sourceValue);
      }
    } else if (isPlainObject(sourceValue)) {
      if (isPlainObject(targetValue)) {
        target[key] = merge(targetValue, sourceValue);
      } else {
        target[key] = merge({}, sourceValue);
      }
    } else if (targetValue === undefined || sourceValue !== undefined) {
      target[key] = sourceValue;
    }
  }

  return target;
}

/**
 * Just like {@link merge} but it does not mutate the `target` object instead
 * mutating a structured clone of it.
 */
export function toMerged<
  T extends Record<PropertyKey, any>,
  S extends Record<PropertyKey, any>,
>(target: T, source: S): T & S {
  return merge(structuredClone(target), source);
}

/**
 * Similar to Lit's `ifDefined` directive except one can check `assertion`
 * and bind a different `value` through this wrapper.
 */
export function bindIf<T>(assertion: unknown, value: T): NonNullable<T> {
  return assertion
    ? (value ?? (nothing as NonNullable<T>))
    : (nothing as NonNullable<T>);
}

let pool: Uint8Array<ArrayBuffer>;
let poolOffset: number;
const urlAlphabet =
  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';

function fillPool(bytes: number): void {
  if (!pool || pool.length < bytes) {
    pool = new Uint8Array(new ArrayBuffer(bytes * 128));
    crypto.getRandomValues(pool);
    poolOffset = 0;
  } else if (poolOffset + bytes > pool.length) {
    crypto.getRandomValues(pool);
    poolOffset = 0;
  }
  poolOffset += bytes;
}

export function nanoid(size = 21): string {
  const bytes = size | 0;
  fillPool(bytes);

  let id = '';
  for (let i = poolOffset - bytes; i < poolOffset; i++) {
    id += urlAlphabet[pool[i] & 63];
  }

  return id;
}

export function hasFiles(
  input: HTMLInputElement | IgcFileInputComponent
): boolean {
  return input.files != null && input.files.length > 0;
}

const trimmedCache = new WeakMap<TemplateStringsArray, TemplateStringsArray>();

/** @internal */
export function trimmedHtml(
  strings: TemplateStringsArray,
  ...values: unknown[]
): TemplateResult {
  if (!trimmedCache.has(strings)) {
    const trimmedStrings = strings.map((s) => s.trim().replaceAll('\n', ''));
    trimmedCache.set(
      strings,
      Object.assign([...trimmedStrings], { raw: [...strings.raw] })
    );
  }

  return html(trimmedCache.get(strings)!, ...values);
}