(() => {
    const defaultSettings = {
        cookieTypes: [
            {
                type: 'Technické',
                value: 'essential',
                description: '<strong>Aby stránky mohly fungovat!</strong> Tyto cookies jsou nezbytné kvůli správnému fungování, bezpečnosti, řádnému zobrazování na počítači nebo na mobilu. Technické cookies není možné vypnout.',
            },
            {
                type: 'Preferenční',
                value: 'preferences',
                description: '<strong>Abyste rychleji našli co hledáte!</strong> Díky těmto cookies vám naše stránky přizpůsobíme taky, aby jste našli přesně to, co hledáte.',
            },
            {
                type: 'Statistické',
                value: 'analytics',
                description: '<strong>Abychom věděli, co zlepšit!</strong> Čím víc lidí má statistické cookies zapnuté, tím lépe můžeme naše stránky vyladit a upravovat nabídky podle požadavků návštěvníků.',
            },
            {
                type: 'Marketingové',
                value: 'marketing',
                description: '<strong>Aby se vám zobrazovaly relevantní reklamy!</strong> Můžeme Vám zobrazovat nabídky nebo produkty, které jste si prohlíželi na našich stránkách, i jinde na internetu: na Facebooku, na Googlu či na Seznamu. Když tyto cookies zakážete, reklam bude pořád stejně. Ovšem na věci, které vás nezajímají.',
            }
        ],
        cookiesKey: 'cookiesControl',
        title: 'Nastavení cookies',
        subtitle: 'Předvolby poskytování souhlasu',
        message: 'Podle cookies vás na našich stránkách poznáme a zobrazíme vám je tak, aby všechno fungovalo správně a dle vašich preferencí. Aby se vám zobrazovaly reklamy na věci, které vás zajímají. Proto od Vás potřebujeme souhlas se zpracováním souborů cookies.',
        expires: 30,
        acceptMyBtnLabel: 'Uložit mé nastavení',
        acceptAllBtnLabel: 'Povolit vše',
        advancedBtnLabel: 'Nastavení cookies',
        descriptionOpenLabel: '▼',
        descriptionCloseLabel: '▲',
        backBtnLabel: '&laquo; Skrýt',
    };

    const template = document.createElement('template');
    const buildTemplate = templateHTML => {
        template.innerHTML = templateHTML;
        const element = template.content.firstElementChild;

        template.innerHTML = '';
        return element;
    };

    const getCookiesType = (config = defaultSettings, item = {}, types = []) => {
        const isEssential = item.value === 'essential';
        const isChecked = types.length ? types.includes(item.value) : true;

        return `
            <li class="cookies-type">
                <label
                    class="cookies-type-label ${isChecked ? 'is-active' : ''}"
                    title="${item.description}"
                >
                    <input
                        type="checkbox"
                        name="gdpr[]"
                        class="cookies-type-input apple-switch"
                        value="${item.value}"
                        ${isChecked ? 'checked' : ''}
                        ${isEssential ? 'disabled' : ''}
                    >
                    <span class="cookies-type-text">${item.type}</span>
                </label>
                <button class="cookies-type-toggle">${config.descriptionOpenLabel}</button>
                <div class="cookies-type-description" style="height: 0px;">
                    <p>${item.description}</p>
                </div>
            </li>
        `;
    };

    const getCookiesBox = (config = defaultSettings) => {
        const types = getTypes(config);
        return buildTemplate(`
            <div class="cookies ${types.length ? '' : 'is-open'}">
                <div class="cookies-intro">
                    <div class="main_header">${config.title}</div>
                    <p>${config.message}</p>
                </div>
                <div class="cookies-types-wrap" style="height: 0px;">
                    <div class="sub_header">${config.subtitle}</div>
                    <ul class="cookies-types">
                        ${config.cookieTypes.map(item => getCookiesType(config, item, types)).join('')}
                    </ul>
                </div>
                <div class="cookies-buttons">
                    <button type="button" class="no-border">${config.advancedBtnLabel}</button>
                    <button type="button" class="accept">${config.acceptAllBtnLabel}</button>
                </div>
          </div>
        `);
    };

    const setTypes = (config = defaultSettings, types = []) => {
        const date = new Date();
        date.setTime(date.getTime() + (config.expires * 24 * 60 * 60 * 1000));

        const expires = `expires=${date.toUTCString()}`;
        document.cookie = `${config.cookiesKey}=${types.join(',')};${expires};path=/;`;
    };

    const getTypes = (config = defaultSettings) => {
        const decodedCookies = getDecodedCookies();
        const searchString = `${config.cookiesKey}=`;
        const control = decodedCookies.find(x => x.startsWith(searchString)) || '';
        return control.slice(searchString.length).split(',').filter(Boolean);
    };

    const getDecodedCookies = () => {
        return decodeURIComponent(document.cookie).split(';').map(x => x.trim());
    };

    const initScripts = (config = defaultSettings, types = getTypes(config)) => {
        if (!types.length) return;

        const selector = types.map(type => `script[data-cookie="${type}"][type="text/plain"]`);
        const scripts = Array.from(document.querySelectorAll(selector.join(',')));

        scripts.forEach(oldScript => {
            const newScript = document.createElement('script');

            Array.from(oldScript.attributes).forEach(({name, value}) => {
                if (name === 'type') value = 'text/javascript';
                newScript.setAttribute(name, value);
            });

            oldScript.replaceWith(newScript);
        });
    }

    const elements = {
        root: undefined,
        typesWrap: undefined,
        buttons: [],
        checkboxes: [],
    };

    const actions = {
        accept(config) {
            const {typesWrap, checkboxes} = elements;

            let activeCheckboxes = checkboxes;
            const isOpen = typesWrap.classList.contains('is-open');
            if (isOpen) {
                activeCheckboxes = checkboxes.filter(checkbox => checkbox.checked);
            }

            const types = [];
            activeCheckboxes.forEach(checkbox => {
                actions.toggleSelect(config, checkbox, true);
                types.push(checkbox.value);
            })

            setTypes(config, types);
            initScripts(config, types);

            actions.close(config);
        },
        toggleBox(config) {
            elements.root.classList.toggle('is-open');
        },
        toggleAdvanced(config) {
            const {typesWrap, buttons} = elements;

            typesWrap.addEventListener(
                'transitionend',
                () => typesWrap.style.height = '',
                {once: true}
            );

            const isOpen = typesWrap.classList.contains('is-open');
            typesWrap.style.height = isOpen ? `${typesWrap.scrollHeight}px` : '0px';

            setTimeout(() => {
                if (isOpen) {
                    typesWrap.classList.remove('is-open');
                    typesWrap.style.height = '0px';
                    buttons[0].innerHTML = config.advancedBtnLabel;
                    buttons[1].innerHTML = config.acceptAllBtnLabel;
                } else {
                    typesWrap.classList.add('is-open');
                    typesWrap.style.height = `${typesWrap.scrollHeight}px`;
                    buttons[0].innerHTML = config.backBtnLabel;
                    buttons[1].innerHTML = config.acceptMyBtnLabel;
                }
            });
        },
        toggleSelect(config, checkbox, force = false) {
            const checked = force || checkbox.checked;

            checkbox.checked = checked;
            checkbox.parentElement.classList.toggle('is-active', checked);
        },
        toggleDescription(config, e) {
            const {target: btn} = e;
            const parent = btn.parentElement;
            const text = btn.nextElementSibling;

            text.addEventListener(
                'transitionend',
                () => text.style.height = '',
                {once: true}
            );

            const isOpen = parent.classList.contains('is-open');
            if (isOpen) {
                text.style.height = `${text.scrollHeight}px`;
            } else {
                text.style.height = '0px';
            }

            setTimeout(() => {
                if (isOpen) {
                    parent.classList.remove('is-open');
                    text.style.height = '0px';
                    btn.innerHTML = config.descriptionOpenLabel;
                } else {
                    parent.classList.add('is-open');
                    text.style.height = `${text.scrollHeight}px`;
                    btn.innerHTML = config.descriptionCloseLabel;
                }
            });
        },
        close(config) {
            const {root, buttons} = elements;

            buttons[0].innerHTML = config.advancedBtnLabel;
            buttons[1].innerHTML = config.acceptAllBtnLabel;

            [root, ...Array.from(root.querySelectorAll('.is-open, [style]'))]
                .forEach(el => {
                    el.classList.remove('is-open');
                    el.removeAttribute('style');
                });
        },
    };

    window.cookiesSetup = (config = defaultSettings) => {
        config = Object.assign(defaultSettings, config);

        const cookiesBox = getCookiesBox(config);

        const typesWrap = cookiesBox.querySelector('.cookies-types-wrap');
        const buttons = Array.from(cookiesBox.querySelector('.cookies-buttons').children);

        buttons[0].onclick = () => actions.toggleAdvanced(config);
        buttons[1].onclick = () => actions.accept(config);

        const checkboxes = Array.from(cookiesBox.querySelectorAll('.cookies-type-input'));
        checkboxes.forEach(checkbox => {
            checkbox.onchange = e => actions.toggleSelect(config, e.target);
        });

        const toggles = Array.from(cookiesBox.querySelectorAll('.cookies-type-toggle'));
        toggles.forEach(button => {
            button.onclick = e => actions.toggleDescription(config, e);
        });

        elements.root = cookiesBox;
        elements.typesWrap = typesWrap;
        elements.buttons = buttons;
        elements.checkboxes = checkboxes;

        document.body.append(cookiesBox);

        initScripts(config, getTypes(config));

        return () => {
            actions.toggleBox(config);
        };
    };
})();