Untitled

import { assignEventAction } from '../utils/analytics';
import { getSelectedStateFromLocalStorage } from '../utils/local-storage';

/**
 * Tabs
 */
export default class BlackstonePerformanceData {
    /**
     * Component Constructor.
     */
    constructor() {
        this.blocks = Array.from(document.querySelectorAll('.performance-data'));
        this.selectedState = getSelectedStateFromLocalStorage();
        
        // Bail if tabs block is not on page
        if (!this.blocks.length) {
            return;
        }

        this.blocks.forEach(block => this.initBlock(block));
    }

    /**
     * Initialize the block.
     */
    initBlock(block) {
        const select = block.querySelector('.performance-data__select');
        const options = Array.from(select.querySelectorAll('option'));
        const windowhashdata = window.location.hash ? window.location.hash : '';

        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);
        }
    }

    /**
     * Update the tabs (for state change);
     */
    updateTabs(select, options, windowhashdata) {
        let defaultOption = null;

        if (this.selectedState) {
            const defaultOptions = options.filter(option => {
                const defaultInStates = option.dataset.defaultInStates?.split(' ');
                return defaultInStates.includes(this.selectedState);
            });
            
            if (defaultOptions.length && !windowhashdata) {
                [defaultOption] = defaultOptions;

                select.value = defaultOption.value;
                const changeEvent = new Event('change');
                select.dispatchEvent(changeEvent);
            }
        }
    }

    /**
     * Select Tab Logic.
     */
    selectTab(e, block) {
        const selected = e.target.options[e.target.selectedIndex].value;
        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);

            // Update content in the div block based on the selected option
            const divBlock = document.querySelector(`.div-block-${selected}`);
            if (divBlock) {
                this.updateDivBlockContent(divBlock, selected);
            }

            // Remove focus to prevent iPad issue with chart selection.
            e.target.blur();
        }

        if (e.isTrusted) {
            const firstChartTab = target.querySelector('.tab-item a[role=tab]');
            if (firstChartTab) {
                firstChartTab.click();
            }
        }

        // Send GTM data
        assignEventAction(e);
    }

    /**
     * Update content in the div block.
     */
    updateDivBlockContent(divBlock, selected) {
        // Logic to update the content inside the div block based on the selected value
        divBlock.innerHTML = `Content for the selected value: ${selected}`;
    }

    /**
     * Scroll to selected class when hash is present.
     */
    selectTabOnload(block, windowhashdata) {
        if (windowhashdata) {
            if (window.history.scrollRestoration) {
                window.history.scrollRestoration = 'manual';
            }
            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');
            
            const isAnchorAvailable = [...document.querySelector('.performance-data__select').options]
                .filter(x => x.value === selecteddata)[0];
            if (isAnchorAvailable) {
                isAnchorAvailable.setAttribute('selected', true);
                // Unselect selected itemsdata.
                itemsdata.forEach(item => item.setAttribute('aria-selected', false));

                // Select target one.
                if (targetdata) {
                    targetdata.setAttribute('aria-selected', true);
                }
                if (elem) {
                    const yOffset = -100;
                    const y = elem.getBoundingClientRect().top + window.scrollY + yOffset;
                    window.scrollTo({top: y, behavior: 'smooth'});
                }
            }
        }
    }

    /**
     * Just triggers a null change event on select dropdown when the page is scrolled without any change in class selector.
     *
     * @return void
     */
    positionSelectDropdown(block) {
        const selectElement = block.querySelector('.performance-data__select');

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