import { createIcon } from "./icon";

function fillCheckbox(container, type, label) {
    const layer = document.createElement('layer');
    layer.className = 'check-box-inner';
    layer.appendChild(createIcon(type, 'check'));
    container.appendChild(layer);
    if (label != null && label.length > 0) {
        const span = document.createElement('span');
        span.innerText = label;
        container.appendChild(span);
    }
}

function createCheckbox(opts) {
    opts ??= {};
    const container = document.createElement('label');
    container.className = 'checkbox-wrapper';
    const input = document.createElement('input');
    input.setAttribute('type', 'checkbox');
    if (typeof opts.onchange === 'function') {
        input.addEventListener('change', opts.onchange);
    }
    container.appendChild(input);
    if (opts.isImage) {
        container.classList.add('checkbox-image');
        let height = opts.imageHeight;
        if (isNaN(height) || height <= 0) {
            height = 14;
        }
        if (opts.checkedNode != null) {
            if (!opts.checkedNode.classList.contains('checked')) {
                opts.checkedNode.classList.add('checked');
            }
            container.appendChild(opts.checkedNode);
        }
        if (opts.uncheckedNode != null) {
            if (!opts.uncheckedNode.classList.contains('unchecked')) {
                opts.uncheckedNode.classList.add('unchecked');
            }
            container.appendChild(opts.uncheckedNode);
        }
    } else {
        fillCheckbox(container, opts.type || 'fa-regular', opts.label);
    }
    return container;
}

function resolveCheckbox(container) {
    const boxes = container.querySelectorAll('label[data-checkbox]');
    for (let box of boxes) {
        if (!box.classList.contains('checkbox-wrapper')) {
            box.classList.add('checkbox-wrapper');
        }
        if (box.hasChildNodes()) {
            if (!box.classList.contains('checkbox-image')) {
                box.classList.add('checkbox-image');
            }
        } else {
            const type = box.getAttribute('data-type') || 'fa-regular';
            const label = box.getAttribute('data-label');
            fillCheckbox(box, type, label)
            box.removeAttribute('data-type');
            box.removeAttribute('data-label');
        }
        const input = document.createElement('input');
        input.setAttribute('type', 'checkbox');
        box.insertBefore(input, box.firstChild);
    }
    return container;
}

export {
    createCheckbox,
    resolveCheckbox
}