export default (function (){

    const defaults = {
        selectors: {
            trigger: "[data-content-loader-trigger]",
            item: "[data-content-loader-item]",
            submit: '[onchange*="this.form.submit"], [data-content-loader-submit]',
        },
        classes: {
            wrapper: "contentLoader-wrapper",
        },
        actions: [
            "append",
            "replace",
        ],
        transitionDuration: 200,
    };

    function init(options) {

        let container = document;

        if (typeof options === "object" && typeof options.target) {
            container = options.target;
        }

        const triggers = container.querySelectorAll(defaults.selectors.trigger);

        for (let i = 0; i < triggers.length; i++) {
            new ContentLoader(triggers[i], options);
        }

    }

    const ContentLoader = function(trigger, options) {

        this.settings = Object.assign({}, defaults, options);

        this.trigger = trigger;

        if (! this.trigger.dataset.contentLoaderTarget) {
            console.warn("contentLoader: No target defined!");
            return false;
        }

        this.selector = this.trigger.dataset.contentLoaderTarget;

        this.targets = document.querySelectorAll(this.selector);

        if (this.targets.length === 0) {
            console.warn(`contentLoader: No targets match selector "${this.selector}"`);
            return false;
        }

        // Enable nested content loaders by watching changes in targets

        this.targets.forEach((target) => {

            const observer = new MutationObserver((mutationsList, observer) => {

                for (const mutation of mutationsList) {

                    if (mutation.type === 'childList') {
                        init({
                            target: target,
                        });
                    }

                }

            });

            observer.observe(target, { childList: true, subtree: true });

        });

        // Get urls

        this.urls = [];

        const form = document.querySelector(`form[data-content-loader-target="${this.selector}"][data-content-loader-url]`);

        if (form) {

            const loadData = () => {

                if (typeof form.dataset.contentLoaderUrl !== "string" || form.dataset.contentLoaderUrl === "") {
                    console.warn(`contentLoader: No URL in form element defined!`);
                    return;
                }

                const formData = new FormData(form),
                      search = new URLSearchParams(formData),
                      query = search.toString();

                const url = trigger.dataset.contentLoaderUrl + "?" + query;

                this.load({
                    trigger: form,
                    url: url,
                });

            };

            // Select triggers and bind loading content

            const formTriggers = form.querySelectorAll(this.settings.selectors.submit);

            formTriggers.forEach((formTrigger) => {

                // Remove onChange events to prevent form from being send
                formTrigger.removeAttribute("onchange");

                formTrigger.addEventListener(
                    "change",
                    (e) => {
                        e.preventDefault();
                        loadData();
                    }
                );

            });

            // Handle custom event send by combobox

            const comboboxes = this.trigger.querySelectorAll(".combobox");

            comboboxes.forEach((combobox) => {

                combobox.addEventListener('combobox:send', (event) => {
                    loadData();
                }, false);

            });

        } else {

            const links = document.querySelectorAll(`*[data-content-loader-target="${this.selector}"][data-content-loader-url]`);

            if (links.length === 0) {
                console.warn(`contentLoader: No links referring "${this.selector}" are found!`);
                return false;
            }

            links.forEach((link) => {
                this.urls.push(link.dataset.contentLoaderUrl);
                link.removeAttribute("data-content-loader-url");
            });

            this.trigger.addEventListener(
                "click",
                (e) => {
                    e.preventDefault();

                    this.load({
                        trigger: e.target,
                    });
                }
            );

        }

    }

    ContentLoader.prototype.load = function(options) {

        if (typeof options !== "object" || typeof options.trigger !== "object") {
            return;
        }

        if (typeof options.url !== "string") {
            options.url = "";
        }

        let customUrl = (options.url !== "");

        if (! customUrl) {

            // If trigger itself defines URL, use it, otherwise get next URL

            customUrl = (typeof options.trigger.dataset.contentLoaderUrl === "string");

            if (customUrl) {

                options.url = options.trigger.dataset.contentLoaderUrl;

            } else {

                if (this.urls.length === 0) {
                    return;
                }

                options.url = this.urls.shift();

            }

        }

        if (options.url.match(/^\//)) {
            options.url = location.origin + options.url;
        }

        // Get action

        if (typeof options.action !== "string") {

            options.action = this.settings.actions[0];

            if (customUrl) {
                options.action = "replace";
            }

        }


        if (options.trigger.dataset.contentLoaderAction) {

            const customAction = options.trigger.dataset.contentLoaderAction;

            if (this.settings.actions.includes(customAction)) {
                options.action = customAction;
            } else {
                console.warn(`contentLoader: Action "${customAction}" is not defined.`);
            }

        }

        // Load data

        fetch(options.url)
            .then(response => response.text())
            .then(html => {
                this.append(html, options.action);
            })
            .catch(error => {
                console.error(`contentLoader: ${error}`);
            })
            .finally(() => {
            });

    }

    ContentLoader.prototype.append = function(data, action) {

        if (typeof action !== "string") {
            action = this.settings.actions[0];
        }

        this.targets.forEach((target) => {

            if (action === "replace") {

                const isAnimated = (typeof target.dataset.contentLoaderAnimated === "string" && target.dataset.contentLoaderAnimated === "true");

                if (isAnimated) {
                    this.animate(target, data);
                } else {
                    target.innerHTML = data;
                }

            } else {

                const container = document.createElement("div");

                container.innerHTML = data;

                const children = Array.from(container.children);

                children.forEach((child) => {
                    target.appendChild(child);
                });

            }

        });

        if (this.urls.length === 0) {
            this.disable();
        }

    }

    ContentLoader.prototype.animate = function(target, data) {

        if (typeof this.timeout !== "undefined") {
            clearTimeout(this.timeout);
        }

        // Add structure for animation

        let structureCreated = false,
            item = target.querySelector(`:scope > ${this.settings.selectors.item}`);

        if (! item) {

            const attributeName = this.settings.selectors.item.replace(/[\[\]]/g, "");

            item = document.createElement("div");
            item.setAttribute(attributeName, "");

            item.innerHTML = target.innerHTML;
            target.innerHTML = "";

            target.appendChild(item);

            structureCreated = true;

        }

        let wrapper = item.querySelector(`:scope > .${this.settings.classes.wrapper}`);

        if (! wrapper) {

            wrapper = document.createElement("div");
            wrapper.classList.add(this.settings.classes.wrapper);

            wrapper.innerHTML = item.innerHTML;

            item.innerHTML = "";
            item.appendChild(wrapper);

            structureCreated = true;

        }

        // Predict height

        function getContentBoxHeight(element) {

            const style = window.getComputedStyle(element),
                  paddingTop = parseFloat(style.paddingTop),
                  paddingBottom = parseFloat(style.paddingBottom),
                  itemBoxHeight = element.clientHeight - (paddingTop + paddingBottom);

            return Math.round(itemBoxHeight);

        }

        const height = target.offsetHeight,
              padding = height - getContentBoxHeight(target);

        target.style.height = `${height}px`;

        let delay = 0;

        if (structureCreated) {
            delay = 50;
        }

        setTimeout(
            () => {
                item.setAttribute("aria-hidden", true);
            },
            delay
        );

        this.timeout = setTimeout(
            () => {
                wrapper.innerHTML = data;

                this.predictInnerHeight(item).then((innerHeight) => {

                    const offsetHeight = innerHeight + padding;

                    target.style.height = `${offsetHeight}px`;

                    item.setAttribute("aria-hidden", false);

                    this.timeout = setTimeout(
                        () => {
                            target.style.height = null;
                        },
                        this.duration
                    );

                });
            },
            this.settings.transitionDuration + delay
        );

    }

    ContentLoader.prototype.predictInnerHeight = function(element) {

        return new Promise((resolve, reject) => {

            // Item height

            element.style.visibility = "hidden";
            element.style.transitionDuration = "0s";

            element.setAttribute("aria-hidden", false);

            const height = element.offsetHeight;

            setTimeout(() => {
                element.setAttribute("aria-hidden", true);

                setTimeout(() => {
                    element.style.visibility = null;
                    element.style.transitionDuration = null;

                    resolve(height);

                }, 10);

            }, 10);

        });

    }

    ContentLoader.prototype.disable = function(data) {

        const triggers = document.querySelectorAll(defaults.selectors.trigger + `[data-content-loader-target="${this.selector}"]`);

        for (let i = 0; i < triggers.length; i++) {
            triggers[i].disabled = "disabled";
        }

    }

    return {
        init: init
    }

})();