/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */

import {
  LitElement,
  html,
  CSSResultArray,
  TemplateResult,
} from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-breadcrumb.css';
import NileElement from '../internal/nile-element';
import { foreach } from '../nile-icon/icons/svg';
/**
 * Nile BreadCrumb component.
 *
 * @tag nile-breadcrumb
 *
 */
@customElement('nile-breadcrumb')
export class NileBreadcrumb extends NileElement {
  /**
   * The styles for Breadcrumb
   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
   */
  public static get styles(): CSSResultArray {
    return [styles];
  }

  /* #endregion */

  /* #region Methods */

  /**
   * Render method
   * @slot This is a slot test
   */
  connectedCallback() {
    super.connectedCallback();
    this.updateComplete.then(() => {
      this.changeLastItem();
    });
  }

  private changeLastItem() {
    const items: any = [...this.querySelectorAll('nile-breadcrumb-item')];
    const itemslength = items.length;
    for (let i = 0; i < itemslength - 1; i++) {
      const element = items[i];
      element.isLast = false;
    }
    const lastItem = items[itemslength - 1];
    lastItem.isLast = true;
  }

  private handleRemoveClick(event: any) {
    this.emit('nile-click', { value: event.target.innerText });
  }

  public render(): TemplateResult {
    return html`
      <slot
        @slotchange=${this.changeLastItem}
        @nile-click-item=${this.handleRemoveClick}
        class="breadcrumb"
      ></slot>
    `;
  }

  /* #endregion */
}

export default NileBreadcrumb;

declare global {
  interface HTMLElementTagNameMap {
    'nile-breadcrumb': NileBreadcrumb;
  }
}