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

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

/**
 * An example element.
 */

@customElement('iu-header-topbar')

export class SiteHeaderTopbar extends LitElement {
  static override styles = css`
    :host{
      background: var(--iu-color-black);
      height: 40px;
      display: none;
      align-items: center;
      font-size: 0.8125rem;
    }
    @media ${unsafeCSS(breakpoints.xl)} {
      :host{
        display: flex;
      }
    }
    :host nav ul{
      margin: 0;
      padding: 0;
      display: flex;
      list-style-type: none;
    }
    :host nav ul ::slotted(li:not(:last-child)){
      margin-right: 20px;
    }
    :host a{
      color: #fff;
      text-decoration: none;
    }
    :host iu-container{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0;
    }
    :host div{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    :host nav ul ::slotted(*){
      margin-right: 20px;
    }
    :host nav ul ::slotted(.last){
      margin-right: 0;
    }
    :host div svg{
      width: 1.375rem;
      height: 2.25rem;
      display: block;
    }
    :host div a{
      margin-left: 0.9375rem;
    }
  `;

  @property({type: Boolean}) i18n = false;
  @property({type: Boolean}) searchable = false;

  @queryAssignedNodes() private slottedElements?: NodeList;

  private getLastElement(){
    if (!this.slottedElements) return; //prevents accessing undefined
    const slotted = Array.from(this.slottedElements).filter(el => el instanceof HTMLElement) as HTMLElement[];
    if (slotted.length > 0) {
      slotted[slotted.length - 1].classList.add('last');
    }
  }

  protected override firstUpdated() {
    this.getLastElement();
  }

  override render() {
    return html`
      <iu-container>
        <nav role="navigation">
          <ul>
            <slot></slot>
          </ul>
        </nav>
        <div>
          ${this.i18n && html`<a href="#">EN</a>`}
          ${this.searchable ? html`<a href="#"><svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 37"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 24a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Zm0 1a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="m14.854 22.146 6.5 6.5-.707.708-6.5-6.5.707-.707Z" fill="currentColor"/></svg></a>` : ''}
        </div>
      </iu-container>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-header-topbar': SiteHeaderTopbar;
  }
}