import { html, CSSResultArray, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-side-bar-footer-item.css';
import NileElement from '../internal/nile-element';

/**
 * Nile side-bar-footer-item component.
 *
 * @tag nile-side-bar-footer-item
 *
 * @slot icon - Slot for footer item icon
 * @slot text - Slot for footer item text
 * @slot action - Slot for footer item action
 *
 * @csspart base - Wrapper for the footer item
 * @csspart icon - Wrapper for the icon slot
 * @csspart text - Wrapper for the text slot
 * @csspart action - Wrapper for the action slot
 */
@customElement('nile-side-bar-footer-item')
export class NileSideBarFooterItem extends NileElement {
  @property({ type: String, reflect: true }) type: string | null = null;

  public static get styles(): CSSResultArray {
    return [styles];
  }

  private handleClick(): void {
    this.dispatchEvent(new CustomEvent('nile-click', {
      detail: { type: this.type },
      bubbles: true,
      composed: true
    }));
  }

  public render(): TemplateResult {
    return html`
      <div part="base" class="footer-item" @click=${this.handleClick}>
        <slot name="icon" part="icon"></slot>
        <slot name="text" part="text"></slot>
        <slot name="action" part="action"></slot>
      </div>
    `;
  }
}

export default NileSideBarFooterItem;

declare global {
  interface HTMLElementTagNameMap {
    'nile-side-bar-footer-item': NileSideBarFooterItem;
  }
}