class singlePage {
    constructor() {
        this.attachEvents();
        this.searchListener();
    }

    attachEvents() {
        let interval = null;
        let lastActiveId = null;

        $('main').scroll(() => {
            if (interval) {
                clearTimeout(interval);
            }

            interval = setTimeout(() => {
                let currentActiveId = $('aside .uk-nav .uk-active a').attr('href');

                if (currentActiveId === lastActiveId) return;

                $('aside .uk-nav li')
                    .parents('.uk-parent')
                    .removeClass('uk-open')
                    .removeClass('uk-active')
                    .find('ul')
                    .attr('hidden', true);

                $('aside .uk-nav .uk-active')
                    .parents('.uk-parent')
                    .addClass('uk-open')
                    .find('ul')
                    .attr('hidden', false);

                lastActiveId = currentActiveId;
            }, 40)
        });

        $('.path .path-tabs li a').click(function() {
            const tab = $(this).attr('data-tab');
            $(this).parents('.path').find('.path-tab').hide();
            $(this).parents('.path').find(`.path-tab-${tab}`).show();
        });

        $('.path .code-tabs li a').click(function() {
            const tab = $(this).attr('data-tab');
            $(this).parents('.path-tab-coding').find('.tab-code').hide();
            $(this).parents('.path-tab-coding').find(`.tab-code-${tab}`).show();
        });

        $('.btn-model-example').click(function() {
            $(this).parents('.blocks-block').find('.model-example').show();
            $(this).parents('.blocks-block').find('.model-definition').hide();
        });
    
        $('.btn-model-definition').click(function() {
            $(this).parents('.blocks-block').find('.model-example').hide()
            $(this).parents('.blocks-block').find('.model-definition').show()
        });

        $('.api-path-try-btn').click(function() {
            const pathId = $(this).attr('data-id');
            window.zamaPopup.createRequest(pathId);
        });

        window.copyToClipboard = str => {
            const el = document.createElement('textarea');
            el.value = str;
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
        };

        window.attachClipboard = () => {
            $('*[data-copy]').off('click');
            $('*[data-copy]').click(function() {
                const value = $(this).attr('data-copy');
                window.copyToClipboard(value);
                $('.uk-tooltip.uk-active').text('Copied!');
            });

            $('.path pre code').after('<span class="copy" uk-tooltip="Click to copy">Copy</span>');
            $('.path pre .copy').off('click');
            $('.path pre .copy').click(function() {
                const ele = $(this);
                const value = $(ele).parents('pre').find('code').text();
                window.copyToClipboard(value);
                $('.uk-tooltip.uk-active').text('Copied!');
            });
        }

        setTimeout(() => {
            $('.main-loader').hide();
            window.attachClipboard();
        }, 500);
    }

    searchListener() {
        const lc = (str) => (str || '').toLowerCase();

        $('.search input.uk-search-input').on('input', async function() {
            const value = lc($(this).val());
        
            if (!value || value.length < 3) return $('.search-result').hide();
            const {paths = []} = pathsObject;
        
            const filteredData = paths.filter(({summary = '', pathName = '', tags = []}) => lc(summary).includes(value) || lc(pathName).includes(value) || lc(tags.join(' ')).includes(value));

            if (filteredData.length) {
                const searchItemsHtml = filteredData.map(({ id, summary, methodName,tags, pathName }) => (`
                    <a href="#${id}" onclick="$('.search-result').hide()">
                        <strong>${summary || `${(tags || []).join(',')}`}</strong><br />
                        <span><span class="api-method api-method-${lc(methodName)} uk-label">${methodName}</span> ${pathName}</span>
                    </a>
                `
                )).join('');
                $('.search-result div').html(searchItemsHtml)
                $('.search-result').show();
            } else {
                $('.search-result').hide();
            }
        });
    }
}

$(() => {
    new singlePage();
});
