menu-language.tsx

import {ComponentLabels} from '../../site-header/site-header';

export interface MenuLanguage {
  langCode: string;
  url: string;
  abbr: string;
  label: string;
  isActive?: boolean;
}

import {Component, h, Prop, Host, Watch, Element, Listen, State} from '@stencil/core';

@Component({
  tag: 'hy-menu-language',
  styleUrl: 'menu-language.scss',
  shadow: true,
})
export class MenuLanguage {
  @Element() el: HTMLElement;
  @Prop() dataMenuLanguage: MenuLanguage[] | string;
  @Prop() isMobile: boolean = false;
  @Prop() labels?: ComponentLabels[] | string;
  @State() isMenuOpen: boolean = false;
  private _dataMenuLanguage: MenuLanguage[];
  private _labels: ComponentLabels[];

  @Watch('dataMenuLanguage') dataMenuLanguageWatcher(data: MenuLanguage[] | string) {
    this._dataMenuLanguage = typeof data === 'string' ? JSON.parse(data) : data;
  }

  @Watch('labels') labelsWatcher(data: ComponentLabels[] | string) {
    this._labels = typeof data === 'string' ? JSON.parse(data) : data;
  }

  @Listen('languageMenuLeave') languageMenuLeave() {
    console.log('leave');
    this.isMenuOpen = false;
    console.log(this.isMenuOpen);
  }

  @Listen('languageMenuToggle') languageMenuToggle() {
    console.log('Toggle');
    this.isMenuOpen = !this.isMenuOpen;
    console.log(this.isMenuOpen);

    /*
    let hyHeader = this.el.closest('.hy-site-header');
    let hyBackdropDiv = (hyHeader as HTMLElement).children[0];

    if (hyBackdropDiv) {
      if (this.isMenuOpen) {
        (hyBackdropDiv as HTMLElement).classList.add('is-active');
        (hyBackdropDiv as HTMLElement).style.top = '90px';
      } else {
        (hyBackdropDiv as HTMLElement).classList.remove('is-active');
        (hyBackdropDiv as HTMLElement).style.top = '0';
      }
    }
    */
  }

  @Listen('click')
  handleComponentClick(event) {
    console.log('Click');
    this.isMenuOpen = !this.isMenuOpen;
    console.log(this.isMenuOpen);
    const languageMenuSelector = event.target as HTMLElement;
    //alert(languageMenuSelector.tagName);
    if (this.isMenuOpen) {
      let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
      const headerHeight = `${
        languageMenuSelector.offsetHeight +
        hyHeader.offsetTop +
        hyHeader.offsetHeight +
        8 -
        languageMenuSelector.offsetTop -
        languageMenuSelector.offsetHeight
      }px`;
      const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(
        `.menu--language__dropdown`
      )[0] as HTMLElement;
      languagePanel.style.top = headerHeight;
    }
    event.stopPropagation();
  }

  @Listen('click', {target: 'window'})
  handleClick(event) {
    /*
    alert('window');
    alert((event.target as HTMLTextAreaElement).tagName.toLowerCase());
    if (this.isMenuOpen) {
      const target = event.target as HTMLTextAreaElement;
      const targetElement = target.tagName.toLowerCase();
      console.log(targetElement);

     */

    /*
      if (targetElement !== 'hy-menu-language') {
        const hyHeader = this.el.closest('.hy-site-header');
        const hyBackdropDiv = (hyHeader as HTMLElement).children[0];

        if (hyBackdropDiv && hyBackdropDiv.classList.contains('is-active')) {
          (hyBackdropDiv as HTMLElement).classList.remove('is-active');
          (hyBackdropDiv as HTMLElement).style.top = '0';
          this.isMenuOpen = !this.isMenuOpen;
        }
      }
      */
    //}
    event.stopPropagation();
  }

  componentWillRender() {
    this.dataMenuLanguageWatcher(this.dataMenuLanguage);
    this.labelsWatcher(this.labels);
  }

  render() {
    const black = 'var(--brand-main-nearly-black)';

    return this.isMobile ? (
      <Host class={'menu--language'}>
        {this._dataMenuLanguage.map((item) => {
          return (
            <hy-menu-language-item
              lang-code={item.langCode}
              url={item.url}
              label={item.label}
              abbr={item.abbr}
              is-active={item.isActive}
              is-mobile={this.isMobile}
            />
          );
        })}
      </Host>
    ) : (
      <Host
        //onMouseLeave={() => this.languageMenuLeave()}
        class={{
          'menu--language': true,
          'menu--language__is-open': this.isMenuOpen,
        }}
      >
        <button
          //onClick={() => this.languageMenuToggle()}
          //onMouseOver={() => this.languageMenuToggle()}
          //onFocus={() => this.languageMenuToggle()}
          class={{
            'menu--language__toggle': true,
            'is-open': this.isMenuOpen,
          }}
          aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}
        >
          <hy-icon class={'menu--language__globe-icon'} icon={'hy-icon-globe'} size={14} fill={black} />
          <span>
            {this._dataMenuLanguage.map((item) => {
              if (item.isActive) {
                return item.langCode;
              }
            })}
          </span>
          <hy-icon class={'menu--language__toggle__caret'} icon={'hy-icon-caret-down'} size={8} fill={black} />
        </button>
        <div
          class={{
            'menu--language__dropdown': true,
            'is-open': this.isMenuOpen,
          }}
        >
          {this._dataMenuLanguage.map((item) => {
            return (
              <hy-menu-language-item
                lang-code={item.langCode}
                url={item.url}
                label={item.label}
                abbr={item.abbr}
                is-active={item.isActive}
                is-mobile={this.isMobile}
              />
            );
          })}
        </div>
      </Host>
    );
  }
}