/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */

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

/**
 * An example element.
 */

@customElement('iu-header-navbar-submenu-section')

export class SiteHeaderNavbarSubmenuSection extends LitElement {
  static override styles = css`
    :host{
      display: block;
      line-height: 1;
    }
    :host > li{
      break-inside: avoid;
      user-select: none;
      display: block;
    }
    li{
      margin: 0;
      padding: 0;
    }
    .section{
      padding-left: 0.125rem;
      font-weight: 700;
      border-bottom: 1px solid var(--iu-color-grey-200);
    }
    .section.no-submenu{
    }
    a{
      display: inline-block;
      width: 100%;
      box-sizing: border-box;
      text-decoration: none;
      color: var(--iu-color-black);
      padding-top: .5rem;
      padding-bottom: .5rem;
      font: var(--iu-f-0);
    }
    a:hover{
      background: var(--iu-color-black);
      color: var(--iu-color-white);
      border-color: var(--iu-color-black);
    }
    :host > li{
      margin-top: -1px;
    }
    :host > li > a {
      border-top: 1px solid var(--iu-color-black);
    }
    ul{
      margin: 0;
      padding: 0;
      list-style-type: none;
      width: 100%;
    }
    ul li {
      display: inline-block;
      width: 100%;
    }
    ul li:not(:last-child){
    }
    ul li a{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-bottom: 1px solid var(--iu-color-grey-200);
    }
    ul li a span{
      grid-column: 2/5;
    }
  `;

  @property() href : string = '';
  @property() text : string = '';
  @property({ type: Array }) items: Array<{ text: string; href: string }> = [];

  override render() {
    return html`
      <li>
        <a class="section ${this.items.length == 0 ? `no-submenu` : ''}" href="${this.href}">${this.text}</a>
        ${this.items.length > 0 ? 
          html`
            <ul>
              ${this.items.map(
                (item) => html`
                  <li>
                    <a href="${item.href}"><span>${item.text}</span></a>
                  </li>
                `
              )} 
            </ul>
          ` : ''
        }
      </li>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-header-navbar-submenu-section': SiteHeaderNavbarSubmenuSection;
  }
}