import { qs } from '../../Libs/Utils';

/**
 * Enables/disables manual heading related inputs based on the checkbox state.
 *
 * It toggles the disabled attribute for manual heading text, font, and size inputs
 * depending on whether the 'manual-video-heading' checkbox is checked.
 *
 * @returns {void}
 */
export function applyManualHeadingEnabledState(): void {
    const checkbox = qs('manual-video-heading') as HTMLInputElement | null;
    const textInput = qs('manual-video-heading-text') as HTMLInputElement | null;
    const fontSelect = qs('manual-font-heading') as HTMLSelectElement | null;
    const sizeSelect = qs('manual-heading-size') as HTMLSelectElement | null;
    if (!checkbox) return;
    const enabled = !!checkbox.checked;
    [textInput, fontSelect, sizeSelect].forEach(el => {
        if (el) {
            (el as HTMLInputElement | HTMLSelectElement).disabled = !enabled;
        }
    });
}

/**
 * Enables/disables manual title-related inputs based on the checkbox state.
 *
 * It toggles the disabled attribute for manual title font and size selects
 * depending on whether the 'manual-video-title' checkbox is checked.
 *
 * @returns {void}
 */
export function applyManualTitleEnabledState(): void {
    const checkbox = qs('manual-video-title') as HTMLInputElement | null;
    const fontSelect = qs('manual-font-title') as HTMLSelectElement | null;
    const sizeSelect = qs('manual-title-size') as HTMLSelectElement | null;
    if (!checkbox) return;
    const enabled = !!checkbox.checked;
    [fontSelect, sizeSelect].forEach(el => {
        if (el) {
            (el as HTMLSelectElement).disabled = !enabled;
        }
    });
}

/**
 * Enables/disables contextual heading inputs based on local and global toggles.
 *
 * It toggles the disabled attribute for contextual heading text, font, and size inputs.
 * The inputs are enabled only if both the local 'contextual-video-heading' checkbox
 * and the global 'contextual_embed' checkbox are checked.
 *
 * @returns {void}
 */
export function applyContextualHeadingEnabledState(): void {
    const checkbox = qs('contextual-video-heading') as HTMLInputElement | null;
    const textInput = qs('contextual-video-heading-text') as HTMLInputElement | null;
    const fontSelect = qs('contextual-font-heading') as HTMLSelectElement | null;
    const sizeSelect = qs('contextual-heading-size') as HTMLSelectElement | null;
    const globalEnabled = !!((qs('contextual_embed') as HTMLInputElement | null)?.checked);
    const enabled = !!(checkbox && checkbox.checked) && globalEnabled;
    [textInput, fontSelect, sizeSelect].forEach(el => {
        if (el) {
            (el as HTMLInputElement | HTMLSelectElement).disabled = !enabled;
        }
    });
}

/**
 * Enables/disables contextual title inputs based on local and global toggles.
 *
 * It toggles the disabled attribute for contextual title font and size selects.
 * The inputs are enabled only if both the local 'contextual-video-title' checkbox
 * and the global 'contextual_embed' checkbox are checked.
 *
 * @returns {void}
 */
export function applyContextualTitleEnabledState(): void {
    const checkbox = qs('contextual-video-title') as HTMLInputElement | null;
    const fontSelect = qs('contextual-font-title') as HTMLSelectElement | null;
    const sizeSelect = qs('contextual-title-size') as HTMLSelectElement | null;
    const globalEnabled = !!((qs('contextual_embed') as HTMLInputElement | null)?.checked);
    const enabled = !!(checkbox && checkbox.checked) && globalEnabled;
    [fontSelect, sizeSelect].forEach(el => {
        if (el) {
            (el as HTMLSelectElement).disabled = !enabled;
        }
    });
}

/**
 * Applies the global contextual toggle: disables all inputs in the form when off
 * and re-applies section states and preview.
 */
export function applyContextualGlobalToggle(): void {
    const toggle = qs('contextual_embed') as HTMLInputElement | null;
    if (!toggle) return;
    const form = qs('contextual-store__form') as HTMLFormElement | null;
    if (!form) return;
    const enabled = !!toggle.checked;

    const elements = form.querySelectorAll('input, select, button:not(#back-to-step-4)') as NodeListOf<HTMLInputElement | HTMLSelectElement | HTMLButtonElement>;
    elements.forEach((el) => {
        if (el === toggle) return; // don't disable the global toggle itself
        (el as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement).disabled = !enabled;
    });

    const wrappers = form.querySelectorAll('.input-wrapper');
    wrappers.forEach((wrap) => {
        (wrap as HTMLElement).classList.toggle('disable-view-mode', !enabled);
    });
    const saveBtn = form.querySelector('button[type="submit"]');
    if (saveBtn) {
        (saveBtn as HTMLElement).classList.toggle('disable-view-mode', !enabled);
    }

    // enforce per-section state
    applyContextualHeadingEnabledState();
    applyContextualTitleEnabledState();
    // updatePreview();
}