menu.tsx

import {Component, Prop, Listen, h, State, Event, EventEmitter, Element} from '@stencil/core';
import {DonateLink} from '../../site-header/site-header';
import {SiteLogoColor, SiteLogoSize} from '../../../utils/utils';

@Component({
  tag: 'hy-menu',
  styleUrl: 'menu.scss',
  shadow: true
})
export class Menu {
  @Element() el: HTMLElement;
  @Prop() open = true;
  @Prop() menuType: string = 'desktop';
  @Prop() logoUrl: string;
  @Prop() logoLabel: string;
  @Prop() dataMenuDonate: string;
  @Prop() dataMenuLanguage: string;
  @Prop() menuButtonSubmenuExpand: string;
  @Prop() isDemo: boolean = false;
  @State() breadcrumbs: any;
  @Event() menuContainerToggled: EventEmitter;
  private donateLink: DonateLink[];

  @Listen('removeBreadcrumb') removeBreadcrumb(data) {
    let breadcrumbs = JSON.parse(JSON.stringify(this.breadcrumbs));
    let currentBreadcrumb = breadcrumbs
      .map(function (e) {
        return e.bid;
      })
      .indexOf(data.detail.bid);
    breadcrumbs.length = currentBreadcrumb;

    for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) {
      this.menuContainerToggled.emit({triggerItem: this.breadcrumbs[i].bid, triggerType: 'remove'});
    }
    this.breadcrumbs = [];
    this.breadcrumbs = breadcrumbs;

    // Reset if home has been clicked.
    if (currentBreadcrumb === 0) {
      this.breadcrumbs = [];

      // Trigger menu-level-container toggle for every menu level.
      let elements = this.el.querySelectorAll('.hy-menu-level-container--mobile');
      elements.forEach((element) => {
        if (!element.classList.contains('hy-menu-level-container--level-1')) {
          this.menuContainerToggled.emit({triggerItem: element.getAttribute('trigger-item'), triggerType: 'remove'});
        }
      });
    }
  }

  @Listen('addBreadcrumb') addBreadcrumb(event) {
    this.breadcrumbs = [
      ...this.breadcrumbs,
      {
        label: event.detail.label,
        bid: event.detail.bid,
        url: event.detail.url
      }
    ];
  }

  componentWillLoad() {
    this.breadcrumbs = [];
  }

  componentWillUpdate() {
    this.el.children[0].setAttribute('menu-type', this.menuType);
    this.el.children[0].setAttribute('menu-button-submenu-expand', this.menuButtonSubmenuExpand);
  }

  componentWillRender() {
    const siteHeader = this.el.closest('hy-site-header');
    if (siteHeader) {
      this.donateLink = JSON.parse(siteHeader.getAttribute('data-menu-donate'));
    }

    // Set demo value to all children to provide better UI for DS users.
    if (this.isDemo) {
      const items = Array.from(this.el.children);
      items.forEach((item) => {
        item.setAttribute('is-demo', 'true');
      });
    }
  }

  render() {
    switch (this.menuType) {
      case 'desktop':
        return (
          <div class={'hy-wrapper'}>
            <nav
              role={'navigation'}
              class={{
                'hy-menu-wrapper--desktop': true,
                'is-open': this.open
              }}
            >
              <div class={'hy-menu hy-menu--desktop'}>
                <slot />
              </div>
            </nav>
          </div>
        );

      case 'mobile':
        return (
          <nav
            role={'navigation'}
            class={{
              'hy-menu-wrapper--mobile': true,
              'is-open': this.open
            }}
          >
            <div class={'hy-menu__logo-container'} id={'menu-logo'}>
              <hy-site-logo
                size={SiteLogoSize.small}
                color={SiteLogoColor.black}
                url={this.logoUrl}
                label={this.logoLabel}
              />
            </div>
            <div
              id={'menu-bc-container'}
              class={{'hy-menu__breadcrumbs': true, 'is-empty': this.breadcrumbs.length === 0}}
            >
              <hy-menu-language is-mobile={true} data-menu-language={this.dataMenuLanguage} />
              {this.breadcrumbs.length
                ? this.breadcrumbs.map((breadcrumb, index) => {
                    return (
                      <hy-menu-mobile-breadcrumb label={breadcrumb.label} bid={breadcrumb.bid} is-first={index === 0} />
                    );
                  })
                : ''}
            </div>
            <div
              aria-hidden={this.open ? 'false' : 'true'}
              class={{
                'hy-menu': true,
                'hy-menu--mobile': true,
                'is-open': this.open,
                'is-demo': this.isDemo
              }}
            >
              <slot />
            </div>
            <div class={'hy-link__donate'}>
              {this.donateLink
                ? this.donateLink.map((i) => {
                    return <a href={i.url}>{i.label}</a>;
                  })
                : ''}
            </div>
          </nav>
        );

      case 'sidebar':
        return (
          <nav
            role={'navigation'}
            class={{
              'hy-menu-wrapper--sidebar': true,
              'is-open': this.open,
              'is-demo': this.isDemo
            }}
          >
            <div
              aria-hidden={this.open ? 'false' : 'true'}
              class={{
                'hy-menu': true,
                'hy-menu--sidebar': true,
                'is-open': this.open,
                'is-demo': this.isDemo
              }}
            >
              <slot />
            </div>
          </nav>
        );
    }
  }
}