class Multiselect extends HTMLDivElement {
    constructor() {
        super();
        this.initialized = false;
        this.toSearch = '';
        this.highlighted = 0;
    }

    connectedCallback() {
        if (!this.isConnected) {
            return;
        }
        if (!this.initialized) {
            for (const child of this.children) {
                switch (child.nodeName) {
                    case 'SELECT':
                        this.select = child;
                        break;
                    case 'LABEL':
                        this.label = child;
                        break;
                }
            }
            if (this.label && this.select) {
                this.init();
            }
        }
        if (this.initialized) {
            this.onClickHandler = () => this.toggle();
            this.tags.addEventListener('click', this.onClickHandler);
            this.onSearchInputHandler = (e) => {
                this.open();
                this.filter(e.target.value);
            }
            this.onSearchKeydownHandler = (e) => {
                switch (e.code) {
                    case "Enter":
                        e.preventDefault();
                        this.selectHighlighted();
                        break;
                    case "ArrowDown":
                        if (e.altKey) {
                            this.open();
                        } else {
                            e.preventDefault();
                            this.highlightNext();
                        }
                        break;
                    case "ArrowUp":
                        if (e.altKey) {
                            this.close();
                        } else {
                            e.preventDefault();
                            this.highlightPrev();
                        }
                        break;
                    case "Backspace":
                        if (e.target.value === '') {
                            this.deselectLast();
                        }
                        break;
                    case "Escape":
                        this.close();
                        break;
                }
            };
            this.search.addEventListener('input', this.onSearchInputHandler);
            this.search.addEventListener('keydown', this.onSearchKeydownHandler);
            this.onFocusOutHandler = (e) => {
                if (this.contains(e.target)) return;
                if (!e.target.isConnected) return;
                this.close();
            }
            window.addEventListener('focusin', this.onFocusOutHandler);
            document.addEventListener('click', this.onFocusOutHandler);

            this.rebuild()
        }
    }

    disconnectedCallback() {
        if (this.initialized) {
            this.removeTags();
            this.options.innerHTML = '';
            document.removeEventListener('click', this.onFocusOutHandler);
            window.removeEventListener('focusin', this.onFocusOutHandler);
            this.onFocusOutHandler = null;
            this.search.removeEventListener('keydown', this.onSearchKeydownHandler);
            this.search.removeEventListener('input', this.onSearchInputHandler);
            this.onSearchInputHandler = null;
            this.onSearchKeydownHandler = null;
            this.tags.removeEventListener('click', this.onClickHandler);
            this.onClickHandler = null;
        }
    }

    init() {
        this.initialized = true;

        this.select.style.display = 'none';
        for (const option of this.select.options) {
            option.dataset.numerusSearch = Multiselect.normalize(option.textContent);
        }

        this.tags = document.createElement('div');
        this.append(this.tags);
        this.tags.classList.add('tags');

        this.search = document.createElement('input');
        this.tags.append(this.search);
        this.search.id = this.select.id;
        this.select.removeAttribute('id');
        this.select.setAttribute('aria-hidden', 'true');
        this.search.setAttribute('spellcheck', 'false');
        this.search.setAttribute('autocomplete', 'false');
        this.search.setAttribute('role', 'combobox');

        // Must come after the search input
        this.tags.append(this.label);

        this.options = document.createElement('ul');
        this.append(this.options);
        this.options.id = this.search.id + '-options-' + Array.from(crypto.getRandomValues(new Uint8Array(4))).map(n => n.toString(16)).join('');
        this.search.setAttribute('aria-controls', this.options.id);
        this.options.classList.add('options');
        this.options.setAttribute('role', 'listbox');
        this.close();
    }

    rebuildOptions() {
        this.options.innerHTML = '';
        let highlight = true;
        for (const option of this.select.options) {
            if (!this.isOptionSelectable(option)) {
                continue;
            }
            const li = document.createElement('li');
            this.options.append(li);
            li.id = this.options.id + '-' + option.index;
            li.dataset.index = option.index;
            li.textContent = option.textContent;
            li.addEventListener('click', () => this.selectOption(option, true));
            if (highlight && (option.index >= this.highlighted)) {
                highlight = false;
                this.highlight(null, li);
            }
        }
        if (highlight) {
            this.highlight(null, this.options.querySelector('li:last-child'));
        }
    }

    highlightNext() {
        const current = this.currentHighlighted();
        if (!current) {
            return;
        }
        this.highlight(current, current.nextElementSibling);
    }

    highlightPrev() {
        const current = this.currentHighlighted();
        if (!current) {
            return;
        }
        this.highlight(current, current.previousElementSibling);
    }

    highlight(current, upcoming) {
        if (!upcoming) {
            return;
        }
        if (current) {
            current.classList.remove('highlight');
        }
        upcoming.classList.remove('highlight');
        this.search.setAttribute('aria-activedescendant', upcoming.id);
        this.highlighted = upcoming.dataset.index;
        upcoming.classList.add('highlight');
    }

    currentHighlighted() {
        return document.getElementById(this.search.getAttribute('aria-activedescendant'));
    }

    isOptionSelectable(option) {
        if (!option) {
            return false;
        }
        if (option.selected) {
            return false;
        }
        return this.toSearch === '' || option.dataset.numerusSearch.includes(this.toSearch);
    }

    selectOption(option, selected) {
        if (!option) {
            return;
        }
        if (option.selected !== selected) {
            option.selected = selected;
            this.select.dispatchEvent(new Event('change', {bubbles: true}));
            this.toSearch = this.search.value = '';
            this.rebuild();
        }
    }

    selectHighlighted() {
        if (!this.isOpen()) {
            return;
        }
        const option = this.select.options[this.highlighted];
        if (this.isOptionSelectable(option)) {
            this.selectOption(option, true);
        }
    }

    deselectLast() {
        const options = this.select.options;
        for (let i = options.length - 1; i >= 0; i--) {
            const option = options[i];
            if (option.selected) {
                this.selectOption(option, false);
                break;
            }
        }
    }

    rebuild() {
        this.rebuildTags();
        this.rebuildOptions();
    }

    removeTags() {
        this.tags.querySelectorAll('.tag').forEach((tag) => tag.remove());
    }

    rebuildTags() {
        this.removeTags();
        let empty = true;
        for (const option of this.select.options) {
            if (!option.selected) {
                continue;
            }
            empty = false;
            const tag = document.createElement('div');
            this.tags.insertBefore(tag, this.search);
            tag.classList.add('tag');
            tag.dataset.numerusSearch = option.dataset.numerusSearch;

            const span = document.createElement('span');
            tag.append(span);
            span.textContent = option.textContent;

            const button = document.createElement('button');
            tag.append(button);
            button.type = 'button';
            button.textContent = '×';
            button.addEventListener('click', (e) => {
                e.stopPropagation();
                this.selectOption(option, false)
            });
        }
        if (empty) {
            this.search.setAttribute('placeholder', this.label.textContent);
        } else {
            this.search.removeAttribute('placeholder');
        }
    }

    close() {
        this.options.style.display = 'none';
        this.search.setAttribute('aria-expanded', 'false');
    }

    open() {
        this.options.removeAttribute('style');
        this.search.setAttribute('aria-expanded', 'true');
    }

    toggle() {
        if (this.isOpen()) {
            this.close();
        } else {
            this.open();
        }
    }

    isOpen() {
        return !this.options.hasAttribute('style');
    }

    filter(search) {
        this.toSearch = Multiselect.normalize(search);
        this.rebuildOptions()
    }

    static normalize(s) {
        return s.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase().trim();
    }
}

class Tags extends HTMLDivElement {
    constructor() {
        super();
        this.initialized = false;
        this.tags = [];
    }

    connectedCallback() {
        if (!this.isConnected) {
            return;
        }
        if (!this.initialized) {
            for (const child of this.children) {
                switch (child.nodeName) {
                    case 'INPUT':
                        this.input = child;
                        break;
                    case 'LABEL':
                        this.label = child;
                        break;
                }
            }
            if (this.label && this.input) {
                this.init();
            }
        }
        if (this.initialized) {
            this.onSearchKeydownHandler = (e) => {
                switch (e.code) {
                    case "Space":
                        e.preventDefault();
                    // fallthrough
                    case "Enter":
                        if (e.target.value.trim() !== '') {
                            e.preventDefault();
                            this.createTag();
                        }
                        break;
                    case "Backspace":
                        if (e.target.value === '') {
                            this.removeLastTag();
                        }
                        break;
                }
            }
            this.search.addEventListener('keydown', this.onSearchKeydownHandler);
            this.onFocusOutHandler = (e) => {
                if (this.contains(e.target)) return;
                if (!e.target.isConnected) return;
                if (this.search.value && this.search.value.trim() !== '') {
                    this.createTag();
                }
                this.dispatchEvent(new CustomEvent("numerus-tags-out", {bubbles: true}))
            };
            window.addEventListener('focusin', this.onFocusOutHandler);
            document.addEventListener('click', this.onFocusOutHandler);

            this.rebuild();
        }
    }

    disconnectedCallback() {
        if (this.initialized) {
            this.removeTags();
            document.removeEventListener('click', this.onFocusOutHandler);
            window.removeEventListener('focusin', this.onFocusOutHandler);
            this.onFocusOutHandler = null;
            this.search.removeEventListener('keydown', this.onSearchKeydownHandler);
            this.onSearchKeydownHandler = null;
        }
    }

    init() {
        this.initialized = true;

        this.tagList = document.createElement('div');
        this.append(this.tagList);
        this.tagList.classList.add('tags');

        this.input.type = 'hidden';
        const tagsText = this.input.value.split(',');
        for (const tagText of tagsText) {
            const tagNormalized = Tags.normalize(tagText);
            if (tagNormalized !== '' && this.tags.indexOf(tagNormalized) === -1) {
                this.tags.push(tagNormalized);
            }
        }

        this.search = document.createElement('input');
        this.tagList.append(this.search);
        this.search.id = this.input.id;
        this.input.removeAttribute('id');
        this.search.setAttribute('type', 'search');
        this.input.setAttribute('aria-hidden', 'true');
        this.search.setAttribute('spellcheck', 'false');
        this.search.setAttribute('autocomplete', 'false');

        // Must come after the search input
        this.tagList.append(this.label);

        const conditionsId = this.input.dataset.conditions;
        if (conditionsId !== "") {
            const conditions = document.getElementById(conditionsId);
            if (conditions) {
                const details = document.createElement('details');
                details.classList.add('menu');
                this.tagList.append(details);

                const summary = document.createElement('summary');
                details.append(summary);

                const ul = document.createElement('ul');
                ul.setAttribute('role', 'menu');
                details.append(ul);

                const options = conditions.querySelectorAll('label');
                if (options && options.length > 0) {
                    summary.textContent = options[0].textContent.trim();
                }
                for (const option of options) {
                    const li = document.createElement('li');
                    li.setAttribute('role', 'presentation');
                    li.append(option);
                    ul.append(li);

                    const checkbox = option.querySelector('input');
                    if (checkbox && checkbox.checked) {
                        summary.textContent = option.textContent.trim();
                    }
                }
                conditions.remove();

                details.addEventListener('toggle', function (e) {
                    const menu = e.target.querySelector('[role="menu"]');
                    if (e.target.open) {
                        const rect = menu.getBoundingClientRect();
                        if (rect.right > document.body.clientWidth) {
                            menu.style.left = Math.ceil(document.body.clientWidth - rect.right) + 'px';
                        }
                        console.log(rect, document.body.clientWidth);
                    } else {
                        menu.style.left = 0;
                    }
                });
            }
        }
    }

    removeTags() {
        this.tagList.querySelectorAll('.tag').forEach((tag) => tag.remove());
    }

    rebuild() {
        const newValue = this.tags.join(',');
        if (newValue !== this.input.value) {
            this.input.value = newValue;
            this.input.dispatchEvent(new Event('change', {bubbles: true}));
        }
        this.removeTags();
        if (this.tags.length === 0) {
            this.search.setAttribute('placeholder', this.label.textContent);
        } else {
            this.search.removeAttribute('placeholder');
            for (const tagText of this.tags) {
                const tag = document.createElement('div');
                this.tagList.insertBefore(tag, this.search);
                tag.classList.add('tag');

                const span = document.createElement('span');
                tag.append(span);
                span.textContent = tagText;

                const button = document.createElement('button');
                tag.append(button);
                button.type = 'button';
                button.textContent = '×';
                button.addEventListener('click', (e) => {
                    e.stopPropagation();
                    this.removeTag(tagText);
                    this.search.focus();
                });
            }
        }
    }

    createTag() {
        const tagText = Tags.normalize(this.search.value);
        this.search.value = '';
        if (this.tags.indexOf(tagText) === -1) {
            this.tags.push(tagText);
            this.rebuild();
        }
    }

    static normalize(s) {
        return s.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase().trim();
    }

    removeLastTag() {
        this.tags.pop();
        this.rebuild();
    }

    removeTag(tagText) {
        this.tags.splice(this.tags.indexOf(tagText), 1);
        this.rebuild();
    }
}

class ProductSearch extends HTMLDivElement {
    constructor() {
        super();
        this.initialized = false;
        this.tags = [];
    }

    connectedCallback() {
        if (!this.isConnected) {
            return;
        }
        if (!this.initialized) {
            for (const child of this.children) {
                switch (child.nodeName) {
                    case 'INPUT':
                        this.input = child;
                        break;
                    case 'LABEL':
                        this.label = child;
                        break;
                }
            }
            if (this.label && this.input) {
                this.init();
            }
        }
        if (this.initialized) {
            this.onSearchKeydownHandler = (e) => {
                switch (e.code) {
                    case "Enter":
                        e.preventDefault();
                        this.selectHighlighted();
                        break;
                    case "ArrowDown":
                        if (e.altKey) {
                            this.open();
                        } else {
                            e.preventDefault();
                            this.highlightNext();
                        }
                        break;
                    case "ArrowUp":
                        if (e.altKey) {
                            this.close();
                        } else {
                            e.preventDefault();
                            this.highlightPrev();
                        }
                        break;
                    case "Escape":
                        this.close();
                        break;
                }
            };
            this.input.addEventListener('keydown', this.onSearchKeydownHandler);
            this.onFocusOutHandler = (e) => {
                if (this.contains(e.target)) return;
                if (!e.target.isConnected) return;
                this.close();
            }
            window.addEventListener('focusin', this.onFocusOutHandler);
            document.addEventListener('click', this.onFocusOutHandler);
        }
    }

    disconnectedCallback() {
        if (this.initialized) {
            document.removeEventListener('click', this.onFocusOutHandler);
            window.removeEventListener('focusin', this.onFocusOutHandler);
            this.onFocusOutHandler = null;
            this.input.removeEventListener('keydown', this.onSearchKeydownHandler);
            this.onSearchKeydownHandler = null;
        }
    }

    init() {
        this.initialized = true;

        this.input.setAttribute('spellcheck', 'false');
        this.input.setAttribute('autocomplete', 'false');
        this.input.setAttribute('role', 'combobox');

        this.options = document.createElement('ul');
        this.append(this.options);
        this.options.classList.add('options')
        this.options.setAttribute('role', 'listbox')
        this.options.dataset.hxOn = "htmx:afterSettle: this.parentNode.settled()";

        const indicator = document.createElement('img');
        this.append(indicator);
        indicator.classList.add('htmx-indicator');
        indicator.src = '/static/bars.svg';

        this.close();
    }

    settled() {
        this.open();
    }

    open() {
        this.options.removeAttribute('style');
        this.input.setAttribute('aria-expanded', 'true');
        const products = this.options.querySelectorAll('li[id]');
        if (products.length > 0) {
            this.highlight(this.currentHighlighted(), products.item(0));
        }
    }

    close() {
        this.input.removeAttribute('aria-activedescendant');
        this.input.setAttribute('aria-expanded', 'false');
        this.options.style.display = 'none';
    }

    highlightNext() {
        const current = this.currentHighlighted();
        if (!current) {
            return;
        }
        this.highlight(current, current.nextElementSibling);
    }

    highlightPrev() {
        const current = this.currentHighlighted();
        if (!current) {
            return;
        }
        this.highlight(current, current.previousElementSibling);
    }

    highlight(current, upcoming) {
        if (!upcoming) {
            return;
        }
        if (current) {
            current.classList.remove('highlight');
        }
        this.input.setAttribute('aria-activedescendant', upcoming.id);
        this.highlighted = upcoming.dataset.index;
        upcoming.classList.add('highlight');
    }

    selectHighlighted() {
        const highlighted = this.currentHighlighted();
        if (highlighted) {
            highlighted.click();
        }
    }

    currentHighlighted() {
        return document.getElementById(this.input.getAttribute('aria-activedescendant'));
    }
}

customElements.define('numerus-multiselect', Multiselect, {extends: 'div'});
customElements.define('numerus-tags', Tags, {extends: 'div'});
customElements.define('numerus-product-search', ProductSearch, {extends: 'div'});

let savedTitle = '';

htmx.onLoad((target) => {
    if (target.tagName === 'DIALOG') {
        const details = document.querySelectorAll('details[open]');
        for (const detail of details) {
            detail.removeAttribute('open');
        }
        savedTitle = document.title;
        document.title = target.querySelector('h2').textContent + ' — ' + savedTitle.substring(savedTitle.indexOf("—") + 1);
        target.showModal();
        const button = target.querySelector('.close-dialog');
        if (button) {
            button.addEventListener('click', (e) => {
                htmx.trigger(e.target, 'closeModal');
            }, {once: true});
        }
    }
})

htmx.on('htmx:configRequest', function (e) {
    const element = e.detail.elt;
    if (element && element.nodeName === 'FORM') {
        let submitter = e.detail.triggeringEvent.submitter;
        if (submitter) {
            const action = submitter.attributes['formaction'];
            if (action && action.value) {
                e.detail.path = action.value;
            }
        }
    }
})

htmx.on('closeModal', () => {
    const openDialog = document.querySelector('dialog[open]');
    if (!openDialog) {
        return;
    }
    openDialog.close();
    openDialog.remove();
    document.title = savedTitle;
});

htmx.on(document, 'alpine:init', () => {
    document.body.classList.remove('show-filters');
   
    Alpine.data('snackbar', () => ({
        show: false, toast: "", toasts: [], timeoutId: null, init() {
            htmx.on('htmx:error', (error) => {
                this.showError(error.detail.errorInfo.error);
            });
        }, showError(message) {
            this.toasts.push(message);
            this.popUp();
        }, popUp() {
            if (this.toasts.length === 0) {
                return;
            }
            if (this.show) {
                this.dismiss();
                return;
            }
            if (this.toast !== "") {
                // It will show after remove calls popUp again.
                return;
            }
            this.toast = this.toasts[0];
            this.show = true;
            this.timeoutId = setTimeout(this.dismiss.bind(this), 4000);
        }, dismiss() {
            if (!this.show) {
                // already dismissed
                return;
            }
            this.show = false;
            clearTimeout(this.timeoutId);
            this.timeoutId = setTimeout(this.remove.bind(this), 350);
        }, remove() {
            clearTimeout(this.timeoutId);
            this.toasts.splice(0, 1);
            this.toast = "";
            this.popUp();
        },
    }));
});