window.Webflow ||= [];
window.Webflow.push(() => {
  const map = document.querySelector<HTMLElement>('[va-element="map"]');
  const list = document.querySelector('[va-element="list"]');
  const sideBar = document.querySelector('[va-element="side-bar"]');
  const sideBarCloseButton = document.querySelector('[va-element="side-bar-close-wrapper"]');

  // Check if elements exist
  if (!map || !list || !sideBar || !sideBarCloseButton) {
    // eslint-disable-next-line no-console
    console.log('Missing elements');
    return;
  }

  let lastButton: HTMLElement | null;

  map.addEventListener('click', function (event: Event) {
    if (!event.target) return;

    // Get the target as HTMLElement
    const target = (event.target as HTMLElement).closest<HTMLElement>('.state');
    if (!target) return;

    // Get attribute of the clicked element
    const button = target.closest<HTMLElement>('.map__state');
    const buttonAttribute = target
      .closest<HTMLElement>('.map__state')
      ?.getAttribute('state-number');
    if (!buttonAttribute) return;

    // Create an array from the list collection
    const listItems = Array.from(list.querySelectorAll('.w-dyn-item'));

    // Find itemp in list with clicked element
    const clickedItem = listItems.filter(
      (item) => item.querySelector('[va-element="state-number"')?.textContent === buttonAttribute
    );
    if (clickedItem.length !== 1) return;

    // Clone item and add it in the sideBar
    const clone = document.importNode(clickedItem[0], true);
    sideBar.innerHTML = '';
    sideBar.insertAdjacentElement('afterbegin', clone);

    // Add the close button
    const cloneButton = document.importNode(sideBarCloseButton, true);
    sideBar.insertAdjacentElement('afterbegin', cloneButton);
    cloneButton.classList.remove('hide');

    // Ui Logic
    const sideBarVisible = !sideBar.classList.contains('invisible');
    sideBar.classList.remove('invisible');
    if (lastButton) lastButton.querySelector<HTMLElement>('.state')?.classList.remove('active');
    target.classList.add('active');

    // Hide the side bar if clicked on the same button
    if (button === lastButton && sideBarVisible) {
      sideBar.classList.add('invisible');
      target.classList.remove('active');
      sideBar.innerHTML = '';
    }

    // Save clicked departement in lastButton
    lastButton = button;
  });

  sideBar.addEventListener('click', function (event: Event) {
    // Target only the clickable part of the button
    const clicked = (event.target as HTMLElement).closest<HTMLElement>(
      '[va-element="side-bar-close-button"]'
    );

    if (!clicked || !lastButton) return;
    const currentDepartement = lastButton.querySelector<HTMLElement>('.state');

    // Ui State
    if (!currentDepartement) return;
    sideBar.classList.add('invisible');
    currentDepartement.classList.remove('active');
    clicked.parentElement?.remove();
  });
});