import {Component, h} from '@stencil/core';
import {ColorVariant} from '../../../utils/utils';

@Component({
  tag: 'hy-desktop-menu-panel',
  styleUrl: 'hy-desktop-menu-panel.scss',
  shadow: true,
})
export class HyDesktopMenuPanel {
  closeDesktopMenuPanel() {
    let hySiteHeader = document.querySelectorAll('hy-site-header')[0];

    // Remove is-active from desktop menu links.
    let hyDesktopMenuLinks = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-links');
    let desktopMenuItems = hyDesktopMenuLinks.shadowRoot.querySelectorAll('.desktop-menu-link');
    desktopMenuItems.forEach((item) => {
      (item as HTMLElement).classList.remove('desktop-menu-link--is-active');
    });

    // Close desktop menu panel.
    let hyDesktopPanel = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-panel');
    if (hyDesktopPanel) {
      //hide panel, remove class is-active
      (hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active');
    }
  }

  render() {
    const classAttributes = ['hy-desktop-menu-panel'].join(' ');

    return (
      <div class={classAttributes} onMouseLeave={() => this.closeDesktopMenuPanel()}>
        <div class="hy-desktop-menu-panel__desktop-menu">
          <slot></slot>
        </div>
        <button
          onClick={() => this.closeDesktopMenuPanel()}
          class={{
            'hy-desktop-menu-panel__panel-toggle': true,
          }}
          aria-label="close"
        >
          <span class="hy-desktop-menu-panel__panel-toggle__label">
            CLOSE
            <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
          </span>
        </button>
      </div>
    );
  }
}