{% liquid
    assign section_name = 'Page Navigation'
    assign el_id = section_name | handle | append: '-' | append: section.id
%}

{% if section.blocks.size > 0 %}
{%- assign label_select = 'Select Guide' -%}
<style>
#{{ el_id }} .nav-item {
    opacity: .5;
}
#{{ el_id }} .nav-item.active {
    opacity: 1;
}
#{{ el_id }} .global-select-div {
    padding: 20px 15px;
}
</style>
<div id="{{ el_id }}" class="relative">
    <div class="relative pt-20 pb-20 {% if section.settings.bg_overlay %}bg-overlay{% endif %} bb-0 d-bb-1 b-light-grey hide-m show-d">
        <div class="container">
            <ul class="nav-wrp m-0 p-0 flex jc-center ai-center flex-wrap colgap-35 rowgap-10">
            {%- assign nav_elements = '' -%}
            {%- assign opts = '' -%}
            {%- assign opts_values = '' -%}
            {%- assign data_navs = '' -%}
            {%- assign val_nav = '' -%}
            {%- for block in section.blocks -%}
                <li class="m-0 p-0 p3 pointer nav-item" data-type="{{ block.settings.type }}" data-link="{{ block.settings.link }}" data-scroll="{{ block.settings.scroll }}" data-title="{{ block.settings.title }}" @click="goToLink">
                    {{ block.settings.title }}
                </li>

                {% # for scroll intersection %}
                {%- if block.settings.type == 'scroll' and block.settings.scroll != blank -%}
                    {%- assign nav_elements = nav_elements | append: ',"' | append: block.settings.scroll | append: '"' | remove: '#' -%}
                {%- endif -%}
                {% # END for scroll intersection %}

                {% # for dropdown select %}
                {%- assign opts = opts |  append: ',' | append: block.settings.title -%}
                {%- if block.settings.type == 'link' -%}
                    {%- assign opts_values = opts_values | append: ',' | append: block.settings.link -%}
                    {%- assign val_nav = block.settings.link -%}
                {%- else -%}
                    {%- assign opts_values = opts_values | append: ',' | append: block.settings.scroll -%}
                    {%- assign val_nav = block.settings.scroll -%}
                {%- endif -%}
                {%- capture data_item -%}
                {
                    idx: {{ forloop.index0 }},
                    type: '{{ block.settings.type }}',
                    value: '{{ val_nav }}',
                    title: '{{ block.settings.title }}'
                }
                {%- endcapture -%}
                {%- assign data_navs = data_navs | append: ',' | append: data_item -%}
                {% # END for dropdown select %}
            {%- endfor -%}
            {%- assign nav_elements = nav_elements |  remove_first: ',' -%}
            {%- assign opts = opts | remove_first: ',' | split: ',' -%}
            {%- assign opts_values = opts_values | remove_first: ',' | split: ',' -%}
            {%- assign data_navs = data_navs | remove_first: ',' -%}
            </ul>
        </div>
    </div>
    <div class="relative show-m hide-d">
        {% render 'global-select',
            id: 'page-navigation',
            label: label_select,
            label_class: 'p3',
            global_select_class: 'nav-mobile',
            values: opts,
            option_values: opts_values,
            field_name: '',
            selected_text_class: 'p3',
            list_option_class: 'p3',
            vue_class: '',
            vue_model: 'selected',
            vue_onchange: 'goToLinkMobile'
        %}
    </div>
</div>
<script>
Vue.createApp({
    delimiters: ['${', '}'],
    data() {
        return {
            navigations: [{{ nav_elements }}],
            screen: {
                hhd: window.innerWidth > 1919,
                hd: window.innerWidth > 1365 && window.innerWidth < 1920,
                d: window.innerWidth > 1023 && window.innerWidth < 1366,
                t: window.innerWidth > 599 && window.innerWidth < 1024,
                m: window.innerWidth < 600
            },
            selected: '',
            dataNavs: [{{ data_navs }}]
        }
    },
    mounted() {
        addEventListener('resize', () => {
            this.screen.hhd = window.innerWidth > 1919;
            this.screen.hd = window.innerWidth > 1365 && window.innerWidth < 1920;
            this.screen.d = window.innerWidth > 1023 && window.innerWidth < 1366;
            this.screen.t = window.innerWidth > 599 && window.innerWidth < 1024;
            this.screen.m = window.innerWidth < 600;
        });
        const myEl = document.getElementById('{{ el_id }}');
        const oPos = myEl.offsetTop;
        addEventListener('scroll', () => {
            this.listenScroll();

            /*add background*/
            const sPos = window.scrollY;
            const eTop = myEl.getBoundingClientRect().top;
            // console.log('oPos', oPos, 'sPos', sPos, 'eTop', eTop);
            if (sPos >= oPos) {
                myEl.classList.add('bg-cream');
            } else {
                myEl.classList.remove('bg-cream');
            }
            /*END add background*/
        });
        this.addSticky();
    },
    methods: {
        goToLink(e) {
            let el = e.target;
            if(el.dataset.type == 'link') {
                location.href = `${el.dataset.link}`;
            } else {
                this.resetActiveAll();
                el.classList.add('active');
                $360.scrollTo(`${el.dataset.scroll}`, 90);
            }
        },
        goToLinkMobile() {
            let current = this.dataNavs.find(nav => nav.value == this.selected);
            if(current) {
                if(current.type == 'link') {
                    location.href = `${current.value}`;
                } else {
                    $360.scrollTo(`${current.value}`, 90);
                }
            }
        },
        addSticky() {
            const mainEl = document.querySelector('#{{ el_id }}');
            if(mainEl.parentElement) {
                // $360.getHeaderHeight();
                mainEl.parentElement.classList.add('sticky-below-header', 'zi-1');
            }
        },
        resetActiveAll() {
            let elAll = document.querySelectorAll('.nav-item');
            elAll.forEach(el => {
                if(el.classList.contains('active')) {
                    el.classList.remove('active');
                }
            });
        },
        listenScroll() {
            const observer = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    let navId = document.querySelector('#{{ el_id }} .nav-item[data-scroll="#'+entry.target.id+'"]');
                    let mSelect = document.querySelector('#{{ el_id }} .nav-mobile');
                    // console.log('entry.intersectionRatio', entry.intersectionRatio);
                    if(navId && entry.isIntersecting && entry.intersectionRatio >= 0 && entry.intersectionRatio <= 1) {
                        navId.classList.add('active');
                        this.selected = navId.dataset.scroll;
                        mSelect.querySelector('.label').style.display = 'none';
                        mSelect.querySelector('.text').textContent = navId.dataset.title;
                    } else {
                        navId.classList.remove('active');
                        this.selected = '';
                    }
                })
            });
            this.navigations.forEach(el => {
                observer.observe(document.getElementById(`${el}`));
            });
        }
    }
}).mount('#{{ el_id }}');
</script>
{% endif %}

{% schema %}
{
    "name": "Page Navigation",
    "settings": [
        {
            "type": "header",
            "content": "General Settings"
        },
        {
            "type": "checkbox",
            "id": "bg_overlay",
            "label": "Background Overlay",
            "default": false
        }
    ],
    "blocks": [
        {
            "name": "Navigation",
            "type": "navigation",
            "settings": [
                {
                    "type": "text",
                    "id": "title",
                    "label": "Title"
                },
                {
                    "type": "select",
                    "id": "type",
                    "label": "Type",
                    "options": [
                        {
                            "value": "link",
                            "label": "Link"
                        },
                        {
                            "value": "scroll",
                            "label": "Scroll"
                        }
                    ],
                    "default": "scroll"
                },
                {
                    "type": "url",
                    "id": "link",
                    "label": "Link",
                    "info": "Please fill when type is link!"
                },
                {
                    "type": "text",
                    "id": "scroll",
                    "label": "Scroll Anchor Link",
                    "info": "Please fill when type is scroll!"
                }
            ]
        }
    ],
    "presets": [{ "name": "Page Navigation" }]
}
{% endschema %}