Untitled

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

export default class BlackstonePerformanceData {
  constructor() {
    this.blocks = Array.from(document.querySelectorAll('.performance-data'));
    this.selectedState = getSelectedStateFromLocalStorage();

    if (!this.blocks.length) {
      return;
    }

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

  initBlock(block) {
    const select = block.querySelector('.performance-data__select');
    const dropdownHeader = block.querySelector('.dropdown-header');
    const dropdownButton = block.querySelector('.dropdown-button');
    const dropdownOptions = Array.from(block.querySelectorAll('.dropdown-option'));
    const windowhashdata = window.location.hash ? window.location.hash : '';

    if (select) {
      const options = Array.from(select.querySelectorAll('option'));
      select.addEventListener('change', (e) => this.selectTab(e, block));

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

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

      block.dataset.initiallyHidden = false;

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

    if (dropdownHeader) {
      dropdownHeader.addEventListener('click', (e) => this.toggleDropdown(e, block));
    }

    if (dropdownButton) {
      dropdownButton.addEventListener('click', (e) => this.toggleDropdown(e, block));
    }

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

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

    // Additional functionality for dropdown-container
    this.updateTabsForDropdown(block, windowhashdata);
    this.selectTabOnloadForDropdown(block, windowhashdata);
  }

  toggleDropdown(e, block) {
    e.stopPropagation();
    const dropdownOptions = block.querySelector('.dropdown-options');
    const dropdownContainer = block.querySelector('.dropdown-container');
    
    dropdownOptions.classList.toggle('show');
    dropdownContainer.classList.toggle('selected');

    // Ensure focus outline appears around the whole container
    if (dropdownContainer.classList.contains('selected')) {
      dropdownContainer.setAttribute('tabindex', '-1');
      dropdownContainer.focus();
    } else {
      dropdownContainer.removeAttribute('tabindex');
    }
  }

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

  selectDropdownOption(e, block) {
    e.stopPropagation();
    const selected = e.target.getAttribute('value');
    const dropdownHeaderText = block.querySelector('.dropdown-header .dropdown-header-text');
    const target = block.querySelector(`.performance-data-${selected}`);
    const items = Array.from(block.querySelectorAll('.performance-data__item'));

    if (dropdownHeaderText) {
      dropdownHeaderText.innerText = e.target.innerText;
    }

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

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

    this.closeDropdown(block);

    assignEventAction(e);
  }

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

  updateTabsForDropdown(block, windowhashdata) {
    if (this.selectedState) {
      const defaultOptions = Array.from(block.querySelectorAll('.dropdown-option')).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, stopPropagation: () => {} }, block);
      }
    }
  }

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

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

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

      e.target.blur();
    }

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

    assignEventAction(e);
  }

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

        itemsdata.forEach(item => item.setAttribute('aria-selected', false));

        if (targetdata) {
          targetdata.setAttribute('aria-selected', true);
        }
        if (elem) {
          const yOffset = -100;
          const y = elem.getBoundingClientRect().top + window.pageYOffset + yOffset;
          window.scrollTo({ top: y, behavior: 'smooth' });
        }
      } else {
        this.selectTabOnloadForDropdown(block, windowhashdata);
      }
    }
  }

  selectTabOnloadForDropdown(block, 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');

    const isDropdownAnchorAvailable = [...block.querySelectorAll('.dropdown-option')]
      .filter(x => x.getAttribute('value') === selecteddata)[0];
    if (isDropdownAnchorAvailable) {
      const dropdownHeaderText = block.querySelector('.dropdown-header .dropdown-header-text');
      if (dropdownHeaderText) {
        dropdownHeaderText.innerText = isDropdownAnchorAvailable.innerText;
      }

      itemsdata.forEach(item => item.setAttribute('aria-selected', false));

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

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

    document.addEventListener('scroll', () => {
      const isSelectFocused = (document.activeElement === selectElement);
      const isDropdownFocused = (document.activeElement === dropdownContainer);

      if (isSelectFocused) {
        selectElement.dispatchEvent(new Event('change'));
      }

      if (isDropdownFocused) {
        dropdownContainer.dispatchEvent(new Event('click'));
      }
    });
  }
}