/**
 * Dailymotion Pro – Admin Video Embed utilities
 *
 * Small, framework‑agnostic helpers shared across the admin video embed UI.
 */

/**
 * Shorthand for `document.getElementById`.
 * @param id Element id
 * @returns HTMLElement or null
 */
export function qs<T extends HTMLElement = HTMLElement>(id: string): T | null {
    return document.getElementById(id) as T | null;
}

/**
 * Extracts the CSS font-family from a select option value.
 * Values are expected in the format `Name|font-family`.
 * @param value Raw select value
 * @returns The CSS `font-family` string or the raw name if missing; undefined if input is empty.
 */
export function extractFontFamily(value?: string | null): string | undefined {
    if (!value) return undefined;
    const parts = value.split('|');
    return parts[1] || parts[0];
}

/**
 * Replaces a DOM element with a new tag while keeping attributes and children.
 * @param el Element to replace
 * @param newTag New tag name (e.g., `h1`)
 * @returns The newly created element
 */
export function replaceTagKeepAttrs(el: HTMLElement, newTag: string): HTMLElement {
    const doc = el.ownerDocument;
    const newEl = doc.createElement(newTag);
    for (let i = 0; i < el.attributes.length; i++) {
        const attr = el.attributes[i];
        newEl.setAttribute(attr.name, attr.value);
    }
    while (el.firstChild) newEl.appendChild(el.firstChild);
    el.parentNode?.replaceChild(newEl, el);
    return newEl;
}

/**
 * Detects which form is present on the page and returns the current mode.
 * @returns `'manual' | 'contextual'`
 */
export function getMode(): 'manual' | 'contextual' {
    // Only one form is present at a time on this page
    if (qs('contextual-player-id')) return 'contextual';
    return 'manual';
}

/**
 * Captures the current state of a form as a serialized string.
 * Unchecked checkboxes are included with empty string so state is consistent
 * (FormData omits unchecked checkboxes, which would make dirty detection unreliable).
 */
export function getFormState(form: HTMLFormElement): string {
    const formData = new FormData(form);
    const state: Record<string, any> = {};
    const keys: string[] = [];
    formData.forEach((_, key) => {
        // @ts-ignore
        if (!keys.includes(key)) {
            keys.push(key);
        }
    });
    keys.sort().forEach(key => {
        if (key === 'dm_pro_nonce' || key === '_wp_http_referer') return;
        const values = formData.getAll(key);
        state[key] = values.length > 1 ? values : values[0];
    });
    for (let i = 0; i < form.elements.length; i++) {
        const el = form.elements[i] as HTMLInputElement;
        if (el.name && (el.type === 'checkbox' || el.type === 'radio') && !(el.name in state)) {
            state[el.name] = '';
        }
    }
    const sortedKeys = Object.keys(state).sort();
    const sortedState: Record<string, any> = {};
    sortedKeys.forEach((k) => {
        sortedState[k] = state[k];
    });
    return JSON.stringify(sortedState);
}