Untitled

initBlock( block ) {
    // Existing select-based logic
    const select = block.querySelector( '.performance-data__select' );
    const options = Array.from( select.querySelectorAll( 'option' ) );
    const windowhashdata = window.location.hash ? window.location.hash : ''; // phpcs:ignore

    select.addEventListener( 'change', ( e ) => this.selectTab( e, block ) );

    document.addEventListener( 'setGatingState', () => {
        this.selectedState = getSelectedStateFromLocalStorage();
        this.updateTabs( select, options, windowhashdata );
    });

    this.updateTabs( select, options );
    this.selectTabOnload( block, windowhashdata );

    block.dataset.initiallyHidden = false;

    if ( block.querySelector( '.is-sticky' ) ) {
        this.positionSelectDropdown( block );
    }

    // New dropdown-based logic
    const dropdownContainer = block.querySelector('.dropdown-container');
    if (dropdownContainer) {
        const dropdownOptions = Array.from(dropdownContainer.querySelectorAll('.dropdown-option'));
        const dropdownButton = dropdownContainer.querySelector('.dropdown-button');

        dropdownButton.addEventListener('click', () => {
            this.toggleDropdown(dropdownContainer);
        });

        dropdownOptions.forEach(option => {
            option.addEventListener('click', (e) => {
                this.selectDropdownOption(e, block);
            });
        });

        document.addEventListener('click', (event) => {
            if (!event.target.closest('.dropdown-container')) {
                this.closeDropdown(dropdownContainer);
            }
        });

        this.updateDropdown(dropdownOptions, windowhashdata);
        this.selectTabOnloadDropdown(block, windowhashdata);
    }
}




selectTab(e, block) {
    const selected = e.target.value || e.target.innerText;
    const target = block.querySelector(`.performance-data-${selected}`);
    const items = Array.from(block.querySelectorAll('.performance-data__item'));

    // Unselect selected items.
    items.forEach(item => item.setAttribute('aria-selected', false));

    // Select target one.
    if (target) {
        target.setAttribute('aria-selected', true);

        // Remove focus to prevent iPad issue with chart selection.
        if (e.target.tagName !== 'OPTION') {
            e.target.blur();
        }

        // Send GTM data
        assignEventAction(e);
    }

    // Handle dropdown case
    if (e.target.classList.contains('dropdown-option')) {
        const dropdownOptions = Array.from(block.querySelectorAll('.dropdown-option'));
        dropdownOptions.forEach(option => option.setAttribute('aria-selected', 'false'));

        e.target.setAttribute('aria-selected', 'true');
    }

    // Reset the first performance item chart tab to first
    if (e.isTrusted) {
        const firstChartTab = target.querySelector('.tab-item a[role=tab]');
        if (firstChartTab) {
            firstChartTab.click();
        }
    }
}





selectTabOnload(block, windowhashdata) {
    if (windowhashdata) {
        const selecteddata = windowhashdata.replace('#', '').toLowerCase();
        const targetdata = block.querySelector(`.performance-data-${selecteddata}`);
        const itemsdata = Array.from(block.querySelectorAll('.performance-data__item'));
        const elem = document.querySelector('.performance-data');

        if (targetdata) {
            itemsdata.forEach(item => item.setAttribute('aria-selected', false));
            targetdata.setAttribute('aria-selected', true);
            
            if (elem) {
                const yOffset = -100;
                const y = elem.getBoundingClientRect().top + window.pageYOffset + yOffset;
                window.scrollTo({ top: y, behavior: 'smooth' });
            }
        }
    }
}

selectTabOnloadDropdown(block, windowhashdata) {
    if (windowhashdata) {
        const selecteddata = windowhashdata.replace('#', '').toLowerCase();
        const dropdownOptions = Array.from(block.querySelectorAll('.dropdown-option'));
        const dropdownButton = block.querySelector('.dropdown-button');
        const targetdata = block.querySelector(`.performance-data-${selecteddata}`);

        if (targetdata) {
            dropdownOptions.forEach(option => {
                if (option.getAttribute('value') === selecteddata) {
                    dropdownButton.innerText = option.innerText;
                    option.setAttribute('aria-selected', 'true');
                    targetdata.setAttribute('aria-selected', true);
                } else {
                    option.setAttribute('aria-selected', 'false');
                }
            });
        }
    }
}




positionSelectDropdown(block) {
    const selectElement = block.querySelector('.performance-data__select');
    const dropdownContainer = block.querySelector('.dropdown-container');

    document.addEventListener('scroll', () => {
        const isFocusedSelect = document.activeElement === selectElement;
        if (isFocusedSelect) {
            selectElement.dispatchEvent(new Event('change'));
        }

        if (dropdownContainer) {
            const dropdownOptions = dropdownContainer.querySelector('.dropdown-options');
            if (dropdownOptions.classList.contains('show')) {
                this.toggleDropdown(dropdownContainer); // Close dropdown on scroll
            }
        }
    });
}




toggleDropdown(dropdownContainer) {
    const dropdownOptions = dropdownContainer.querySelector('.dropdown-options');
    dropdownOptions.classList.toggle('show');
    dropdownContainer.classList.toggle('selected');
}

selectDropdownOption(e, block) {
    const value = e.target.innerText;
    const dropdownButton = e.target.closest('.dropdown-container').querySelector('.dropdown-button');
    dropdownButton.innerText = value;
    this.closeDropdown(e.target.closest('.dropdown-container'));

    // Simulate a change event for selectTab logic
    const fakeEvent = { target: { value }, isTrusted: true };
    this.selectTab(fakeEvent, block);
}

closeDropdown(dropdownContainer) {
    const dropdownOptions = dropdownContainer.querySelector('.dropdown-options');
    dropdownOptions.classList.remove('show');
    dropdownContainer.classList.remove('selected');
}

updateDropdown(dropdownOptions, windowhashdata) {
    if (this.selectedState) {
        const defaultOptions = dropdownOptions.filter(option => {
            const defaultInStates = option.dataset.defaultInStates?.split(' ');
            return defaultInStates.includes(this.selectedState);
        });

        if (defaultOptions.length && !windowhashdata) {
            const defaultOption = defaultOptions[0];
            this.selectDropdownOption({ target: defaultOption }, defaultOption.closest('.performance-data'));
        }
    }
}