export interface DesktopLinks {
  label: string;
  url: string;
  menuLinkId: string;
}

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

@Component({
  tag: 'hy-desktop-menu-links',
  styleUrl: 'hy-desktop-menu-links.scss',
  shadow: true,
})
export class HyDesktopMenuLinks {
  @Element() el: HTMLElement;
  /*
  First level menu links to be displayed on Desktop screens.
  * */
  @Prop() dataDesktopLinks: DesktopLinks[] | string;
  private _dataDesktopLinks: DesktopLinks[];
  @State() firstLevelLinksList: Array<object> = [];

  @Watch('dataDesktopLinks') dataDesktopLinksWatcher(data: DesktopLinks[] | string) {
    this._dataDesktopLinks = typeof data === 'string' ? JSON.parse(data) : data;
  }

  componentWillLoad() {
    this.dataDesktopLinksWatcher(this.dataDesktopLinks);
  }

  handleMenuDesktopHover(id) {
    console.log(id);

    let panel = (this.el.parentElement as HTMLElement).nextElementSibling;
    if (panel) {
      //@todo hide/show panel here

      //@todo show proper subtree on panel based on given menu-link-id
      console.log(document.querySelectorAll('[trigger-item="' + id + '"]')[0]);
      /*
      <hy-menu-item menu-link-id="538c248e4fd3cde8e72463b2387b571f" url="/en/lets-research" label="Research" data-drupal-link-system-path="node/90" class="hy-menu-item hy-menu-item--desktop hydrated" depth="1" menu-type="desktop" menu-button-submenu-expand="Expand submenu for">
      * */
      /*
      <hy-menu-level-container menu-level="2" aria-expanded="false" class="hy-menu-level-container hy-menu-level-container--level-2 hy-menu-level-container--mobile hydrated" tabindex="-1" depth="2" trigger-item="68f5a4fa9dae69bb944a173f3f8af88f"><!----><hy-menu-item menu-type="mobile" class="hy-menu-item hy-menu-item--mobile hydrated" depth="2">
      * */
    }
  }

  componentDidLoad() {
    const links = this._dataDesktopLinks as Array<DesktopLinks>;
    let firstLevelLinksList = [];

    for (let i = 0; i < links.length; i++) {
      let className = 'desktop-menu-link-' + links[i].menuLinkId;
      firstLevelLinksList.push(
        <a class={className} href={links[i].url} onMouseOver={() => this.handleMenuDesktopHover(links[i].menuLinkId)}>
          {links[i].label}
        </a>
      );
    }
    this.firstLevelLinksList = firstLevelLinksList;
  }

  render() {
    return <div class={'hy-site-header__menu-desktop'}>{this.firstLevelLinksList}</div>;
  }
}