import {LitElement, html, css, unsafeCSS} from 'lit';
import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
import { breakpoints } from '../../breakpoints';

@customElement('iu-header-navbar')

export class SiteHeaderNavbar extends LitElement {
  static override styles = css`
    @media ${unsafeCSS(breakpoints.xxl)} {
      :host{
        display: block;
      }
    }
    :host a{
      color: var(--theme-color-black);
      text-decoration: none;
    }
    :host iu-container{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 3.125rem;
      background: var(--theme-color-white);
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-bottom: 0;
    }
    @media ${unsafeCSS(breakpoints.xl)} {
      :host iu-container{
        display: grid;
        height: 3.75rem;
      }
    }
    .logo{
      font-weight: 700;
      grid-column: span 1;
    }
    .nav{
      grid-column: 2 / 5;
      display: none;
      justify-content: space-between;
      align-items: center;
    }
    @media ${unsafeCSS(breakpoints.xl)} {
      .nav{
        display: flex;
      }
    }
    .nav ul{
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: flex;
    }
    :host nav ul ::slotted(*:not(:last-child)){
      margin-right: var(--iu-spacing-4);
    }
    .actions button{
      width: 50px;
      height: 50px;
      background: transparent;
      border: 0;
      padding: 0;
      cursor: pointer;
      display: none;
      margin-right: calc((50px - 16px) / 2 * -1)
    }
    .actions button svg{
      height: 16px;
      width: 16px;
    }
    .mobile-actions{
      display: flex;
      align-items: center;
      transform: translateX(var(--iu-grid-gutter));
      & a{
        margin-right: var(--iu-spacing-0);
      }
    }
    @media ${unsafeCSS(breakpoints.xl)} {
      .mobile-actions{
        display: none;
      }
    }
    .hamburger{
      background: transparent;
      border: 0;
      cursor: pointer;
      width: 50px;
      height: 50px;
      padding: 0;
      svg{
        width: 100%;
        height: 100%;
      }
    }
  `;

  @property({ type: Boolean }) mobileMenuOpen = false;
  @property({type: Boolean}) i18n = false;

  // Query all `iu-header-navbar-item` elements
  @queryAssignedElements({ slot: '' })
  navbarItems!: HTMLElement[];
  
  private isAnySubmenuOpen(): boolean {
    return !this.navbarItems.some((item: any) => item.isActive);
  }

  private updateActionsVisibility() {
    const actionsButton = this.shadowRoot?.querySelector('.actions button') as HTMLElement;
    if (actionsButton) {
      if (this.isAnySubmenuOpen()) {
        actionsButton.style.display = 'block'; // Show the button
      } else {
        actionsButton.style.display = 'none'; // Hide the button
      }
    }
  }
  
  private handleSubmenuToggle(event: CustomEvent) {

    const { source } = event.detail;

    this.navbarItems.forEach((item: any) => {
      // Close all other submenus
      if (item !== source) {
        item.isActive = false;
        item.submenuElements.forEach((submenu: HTMLElement) =>
          submenu.classList.remove('is-active')
        );
      }
      // Handle closing animation if same element toggled
      if (event.detail.closing && item === source) {
        item.submenuElements.forEach((submenu: HTMLElement) => {
          submenu.classList.add('is-closing')
          const container = submenu.container;
          const containerHeight = container.scrollHeight;
          container.animate(
            [
                { height: `${containerHeight}px` },
                { height: 0 }
            ],
            {
                duration: 250,
                delay: 250,
                easing: 'ease-out'
            }
          ).onfinish = () => {
            submenu.classList.remove('is-closing'),
            submenu.classList.remove('is-active')
          }
        });
      }
    });

    // Check if any submenu is open and toggle button visibility
    this.updateActionsVisibility();

  }

  private closeAllSubmenu(){

    const actionsButton = this.shadowRoot?.querySelector('.actions button') as HTMLElement;
    if (actionsButton) {
      actionsButton.style.display = 'none'; // Hide the button
    }

    this.navbarItems.forEach((item: any) => {
      // Close all submenus
      item.isActive = false;
      item.submenuElements.forEach((submenu: HTMLElement) => {
        // Animate open submenu 
        if (submenu.classList.contains('is-active')){
          const overlay = document.querySelector('iu-overlay') as Overlay;
          overlay.visible = false;
          submenu.classList.add('is-closing');
          const container = submenu.container;
          const containerHeight = container.scrollHeight;
          container.animate(
            [
                { height: `${containerHeight}px` },
                { height: 0 }
            ],
            {
                duration: 250,
                delay: 250,
                easing: 'ease-out'
            }
          ).onfinish = () => {
            submenu.classList.remove('is-closing'),
            submenu.classList.remove('is-active')
          }
        } else {
          submenu.classList.remove('is-active')
        }
      }
      );
    });

  }

  // Mobile menu

  private toggleMobileMenu(){

    // Show overlay
    const overlay = document.querySelector('iu-overlay') as Overlay;
    overlay.visible = !overlay.visible;

    // Change internal var
    this.mobileMenuOpen = !this.mobileMenuOpen;

    if (this.mobileMenuOpen) {
      // Get scrolled height
      document.body.dataset.scrollY = window.scrollY.toString();
      // Lock body
      document.body.style.top = `-${window.scrollY}px`;
      document.body.style.position = 'fixed';
    } else {
      // Remove and restore previous scroll position
      document.body.style.top = '';
      document.body.style.position = '';
      
      // Restore scroll position
      window.scrollTo(0, Number(document.body.dataset.scrollY || '0'));
    }

    // Dispatch event
    this.dispatchEvent(new CustomEvent('toggle-mobile-menu', { bubbles: true, composed: true }));
    
  }

  // Toggle mobile menu off is xl breakpoint
  private handleResize = () => {
    if (window.innerWidth < 1280) {

      this.closeAllSubmenu();
      this.requestUpdate();

    }
    if (window.innerWidth > 1280 && this.mobileMenuOpen) {

      this.mobileMenuOpen = false;
      this.dispatchEvent(new CustomEvent('toggle-mobile-menu', { detail: false, bubbles: true, composed: true }));

      // Reset body
      document.body.style.top = '';
      document.body.style.position = '';
  
      // Ensure the overlay is also hidden
      const overlay = document.querySelector('iu-overlay') as Overlay;
      if (overlay) overlay.visible = false;
  
      this.requestUpdate();

    }
  }

  override connectedCallback() {
    super.connectedCallback();

    this.addEventListener('iu-header-toggle-submenu', this.handleSubmenuToggle as EventListener);

    // Update the button visibility on initial load
    this.updateActionsVisibility();

    this.addEventListener('close-mobile-menu', () => {
      this.mobileMenuOpen = false;
      this.requestUpdate();
    });

    // Manage resizing window
    window.addEventListener('resize', this.handleResize);

  }

  override disconnectedCallback() {
    
    this.removeEventListener('iu-header-toggle-submenu', this.handleSubmenuToggle as EventListener);

    // Remove event listener when component is disconnected
    window.removeEventListener('resize', this.handleResize);
    
    super.disconnectedCallback();
  }

  override render() {
    return html`
      <iu-container>

        <div class="logo">
          <a href="#" class="logo">Università Iuav di Venezia</a>
        </div>

        <div class="nav">
          <nav role="navigation">
            <ul>
              <slot></slot>
            </ul>
          </nav>
          <div class="actions">
            <button @click="${this.closeAllSubmenu}" role="button"><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18.838 1.161 1.16 18.84M18.838 18.839 1.16 1.16" stroke="#000" stroke-width="2"/></svg></button>
          </div>
        </div>

        <!-- Toggle mobile menu -->
        <div class="mobile-actions">
          ${this.i18n ? html`
            <a href="">EN</a>
          ` : ``}
          <button class="hamburger" @click="${this.toggleMobileMenu}">
            ${this.mobileMenuOpen ? html`
              <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.132 24.546 15 16.414 16.414 15l8.132 8.132L32.678 15l1.414 1.414-8.132 8.132 8.132 8.132-1.414 1.414-8.132-8.132-8.132 8.132L15 32.678l8.132-8.132Z" fill="currentColor"/></svg>
            ` : html`
              <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 24h25v2H13v-2Zm0-7h25v2H13v-2Zm0 14h25v2H13v-2Z" fill="currentColor"/></svg>
            `}
          </button>
        </div>

      </iu-container>

    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-header-navbar': SiteHeaderNavbar;
  }
}