"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
function _export(target, all) {
    for(var name in all)Object.defineProperty(target, name, {
        enumerable: true,
        get: Object.getOwnPropertyDescriptor(all, name).get
    });
}
_export(exports, {
    get SELECTED_ITEM_CLASS () {
        return SELECTED_ITEM_CLASS;
    },
    get createListElement () {
        return createListElement;
    },
    get createListItemElement () {
        return createListItemElement;
    },
    get createSearchIcon () {
        return createSearchIcon;
    },
    get createSearchInputElement () {
        return createSearchInputElement;
    },
    get createSearchInputWrapper () {
        return createSearchInputWrapper;
    },
    get createSeparatorElement () {
        return createSeparatorElement;
    },
    get defocusItem () {
        return defocusItem;
    },
    get deselectAllItems () {
        return deselectAllItems;
    },
    get deselectItem () {
        return deselectItem;
    },
    get disableUncheckedCheckboxes () {
        return disableUncheckedCheckboxes;
    },
    get enableAllCheckboxes () {
        return enableAllCheckboxes;
    },
    get focusItemAt () {
        return focusItemAt;
    },
    get getDropdownWidth () {
        return getDropdownWidth;
    },
    get selectItem () {
        return selectItem;
    }
});
const _element = require("../../../helpers/dom/element");
const _a11y = require("../../../helpers/a11y");
const _utils = require("../utils/utils");
const classPrefix = 'ht-multi-select-editor';
const SEARCH_INPUT_WRAPPER_CLASS = `${classPrefix}-search-input-wrapper`;
const SEARCH_ICON_CLASS = `${classPrefix}-search-icon`;
const SEARCH_INPUT_CLASS = `${classPrefix}-search-input`;
const SEPARATOR_CLASS = `${classPrefix}-separator`;
const SEARCH_INPUT_PLACEHOLDER = 'Search...';
const SEARCH_INPUT_ARIA_LABEL = 'Search options';
const CHECKBOX_ID_PREFIX = `${classPrefix}-item-`;
const SELECTED_ITEM_CLASS = `${classPrefix}-item-selected`;
function selectItem(itemElement) {
    const checkbox = (0, _utils.getCheckboxElement)(itemElement);
    (0, _element.addClass)(itemElement, SELECTED_ITEM_CLASS);
    if (!checkbox.checked) {
        checkbox.checked = true;
    }
}
function deselectItem(itemElement) {
    const checkbox = (0, _utils.getCheckboxElement)(itemElement);
    (0, _element.removeClass)(itemElement, SELECTED_ITEM_CLASS);
    if (checkbox.checked) {
        checkbox.checked = false;
    }
}
function createSearchInputWrapper({ root }) {
    const wrapperElement = root.createElement('div');
    wrapperElement.className = SEARCH_INPUT_WRAPPER_CLASS;
    return wrapperElement;
}
function createSearchIcon({ root }) {
    const iconElement = root.createElement('div');
    (0, _element.addClass)(iconElement, SEARCH_ICON_CLASS);
    (0, _element.setAttribute)(iconElement, [
        (0, _a11y.A11Y_HIDDEN)()
    ]);
    return iconElement;
}
function createSearchInputElement({ root }) {
    const inputElement = root.createElement('input');
    (0, _element.setAttribute)(inputElement, [
        (0, _a11y.A11Y_LABEL)(SEARCH_INPUT_ARIA_LABEL),
        [
            'type',
            'text'
        ],
        [
            'size',
            3
        ],
        [
            'placeholder',
            SEARCH_INPUT_PLACEHOLDER
        ],
        [
            'id',
            SEARCH_INPUT_CLASS
        ]
    ]);
    (0, _element.addClass)(inputElement, SEARCH_INPUT_CLASS);
    return inputElement;
}
function createSeparatorElement({ root }) {
    const separatorElement = root.createElement('div');
    separatorElement.className = SEPARATOR_CLASS;
    return separatorElement;
}
function createListElement({ root }) {
    return root.createElement('ul');
}
function getDropdownWidth({ dropdownListElement }) {
    return dropdownListElement.offsetWidth;
}
function deselectAllItems({ dropdownListElement }) {
    dropdownListElement.querySelectorAll(`.${SELECTED_ITEM_CLASS}`).forEach((itemElement)=>deselectItem(itemElement));
}
function defocusItem({ dropdownListElement, index }) {
    const itemElement = dropdownListElement.children[index];
    if (itemElement) {
        const checkbox = (0, _utils.getCheckboxElement)(itemElement);
        if (checkbox) {
            checkbox.blur();
        }
    }
}
function focusItemAt({ dropdownListElement, index }) {
    const itemElement = dropdownListElement.children[index];
    if (itemElement) {
        const checkbox = (0, _utils.getCheckboxElement)(itemElement);
        if (checkbox) {
            checkbox.focus();
        }
    }
}
function disableUncheckedCheckboxes({ dropdownListElement }) {
    dropdownListElement.querySelectorAll('input[type="checkbox"]:not(:checked)').forEach((checkbox)=>{
        checkbox.dataset.disabled = true;
    });
}
function enableAllCheckboxes({ dropdownListElement }) {
    dropdownListElement.querySelectorAll('input[type="checkbox"]').forEach((checkbox)=>{
        checkbox.dataset.disabled = false;
    });
}
function createListItemElement({ rootDocument, instanceId, itemKey, itemValue, indexWithinList, checked = false, disabled = false }) {
    const itemElement = rootDocument.createElement('li');
    const innerContainer = rootDocument.createElement('div');
    const checkboxElement = rootDocument.createElement('input');
    const labelElement = rootDocument.createElement('label');
    checkboxElement.id = `${instanceId}-${CHECKBOX_ID_PREFIX}${indexWithinList}`;
    checkboxElement.type = 'checkbox';
    checkboxElement.dataset.value = itemValue;
    checkboxElement.dataset.index = indexWithinList;
    checkboxElement.dataset.disabled = checked ? false : disabled;
    if (itemKey) {
        checkboxElement.dataset.key = itemKey;
    }
    labelElement.htmlFor = checkboxElement.id;
    labelElement.textContent = itemValue;
    innerContainer.appendChild(checkboxElement);
    innerContainer.appendChild(labelElement);
    itemElement.appendChild(innerContainer);
    return itemElement;
}
