
export var InputText = {
    _updateAutocomplete: (wrapper) => {
        var form_data = new FormData(wrapper.closest('form'));
        const mainInput = wrapper.querySelector('[data-main-input]');
        form_data.append('_source', mainInput.name);
        form_data.append('_search', mainInput.value);

        // Case : autocomplete js
        const callback = wrapper.getAttribute('data-input-autocomplete-js');
        if (callback) {
            window[ callback ](
                wrapper,
                mainInput.name,
                mainInput.value
            ).then((data) => {
                wrapper
                .querySelector('[data-autocomp-wrapper]')
                .innerHTML = InputText._renderAutocompChoice(data);
            });
            return;
        }

        // TODO : make an ajax promise and deprecate this code
        ajaxSimple(
            wrapper.getAttribute('data-input-autocomplete'),
            form_data,
            (data) => {
                if (typeof data === 'string') {
                    data = JSON.parse(data);
                }
                
                const autocomp = wrapper.querySelector('[data-autocomp-wrapper]');
                autocomp.innerHTML = InputText._renderAutocompChoice(data);

                if (data.length == 0) {
                    InputText.autocompDisplay(autocomp, false);
                }
            }
        );
    },
    _renderAutocompChoice: (data) => {
        return '<ul>' + data.map((item) => {
            if (item.type == 'info-muted') {
                return '<li class="text-muted">' + htmlEncode(item.label);
            }
            return '<li data-autocomp-item="'+htmlEncode(item.value)+'" '
                +' data-autocomp-data="'+htmlEncode(JSON.stringify(item))+'">' 
                + htmlEncode(item.label);
        }).join('') + '</ul>';
    },
    autocompInsert: (event) => {
        const item = event.target;
        if (! item.hasAttribute('data-autocomp-item')) return;

        const wrapper = item.closest('[data-input-wrapper]');
        const input = wrapper.querySelector('[data-main-input]');
        input.value = item.getAttribute('data-autocomp-item');
        input.focus();
        // Events
        triggerChangeEvent(input);
        input.dispatchEvent(new CustomEvent('autocompleted', {
            bubbles: true,
            detail: {
                item_data: JSON.parse(item.getAttribute('data-autocomp-data')),
                item: item,
            },
        }));
    },
    autocompDisplay: (el, show) => {
        const wrapper = el.closest('[data-input-wrapper]');
        const autocomp = wrapper.querySelector('[data-autocomp-wrapper]');
        autocomp.style.display = show ? '' : 'none';
    },
    autocompShowAndUpdate: (el) => {
        const wrapper = el.closest('[data-input-wrapper]');
        InputText.autocompDisplay(el, true);
        InputText._updateAutocomplete(wrapper);
    },
    handleKeyup: (event) => {
        const wrapper = event.target.closest('[data-input-wrapper]');
        InputText._updateAutocomplete(wrapper);
    },
}

export function pressCleIban(inputIBANCLE, inputIBANCPT){
    if(inputIBANCLE.val().length==2){
        inputIBANCPT.focus();
    }
}
