import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import NileElement from '../internal/nile-element';
import { styles } from './nile-filter-chip.css';

/**
 * Nile filter-chip component.
 *
 * @tag nile-filter-chip
 */
@customElement('nile-filter-chip')
export class NileFilterChip extends NileElement {
  @property({ type: String }) label = '';
  @property({ type: String }) value = '';
  @property({ type: Number }) viewMoreCount: number = 0;
  @property({ type: Boolean }) editable = false;
  @property({ type: Boolean }) closable = false;
  @property({ type: String }) icon = '';
  @property({ type: String }) removeIcon = '';
  @property({ type: Boolean, reflect: true }) active = false;
  @property({type:Boolean, reflect:true}) disabled = false;


  private static activeChips: NileFilterChip[] = [];

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

  connectedCallback() {
    super.connectedCallback();
    this.registerChip();
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.unregisterChip();
  }

  private registerChip() {
    NileFilterChip.activeChips.push(this);
  }

  private unregisterChip() {
    NileFilterChip.activeChips = NileFilterChip.activeChips.filter(
      (chip) => chip !== this
    );
  }

  private handleClose(event: Event) {
    event.stopPropagation();
    this.dispatchEvent(
      new CustomEvent('nile-close', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })
    );
    this.remove();
  }

  private handleClick() {
    if (this.disabled) return;
    this.dispatchEvent(
      new CustomEvent('nile-click', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })
    );
  }

  private getLabelSlot(): TemplateResult {
    return html`
    <span class="label-wrapper">
      <slot name="label">
        <span class="label" part="label">${this.label}:</span>
      </slot>
    </span>

    `;
  }

  private getValueSlot(): TemplateResult {
    return html`
    <span class="value-wrapper">
      <slot name="value">
        <span class="value" part="value">${this.value}</span>
      </slot>
    </span>

    `;
  }

  private getviewMoreCountSlot(): TemplateResult {
    return html`
      <slot name="suffix">
        ${this.viewMoreCount
          ? html`
          <span class="badge-wrapper">
              <nile-badge class="badge" part="badge" variant="primary" pilltype="pill-color" exportparts="content, base">
                +${this.viewMoreCount}
              </nile-badge>
          </span>

            `
          : html``}
      </slot>
    `;
  }

  private getCloseIconSlot(): TemplateResult {
    return html`
      ${this.closable
        ? html`
            <span class="close-icon" @click="${this.handleClose}">
              <nile-icon name="${this.removeIcon || 'var(--nile-icon-close, var(--ng-icon-x-close))'}" size="12" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
            </span>
          `
        : html``}
    `;
  }

  public render(): TemplateResult {
    return html`
      <div class="chip" @click="${this.handleClick}">
        <slot name="icon">
          ${this.icon ? html`<span class="icon">${this.icon}</span>` : html``}
        </slot>
        ${this.getLabelSlot()}
        <slot name="content"></slot>
        ${this.getValueSlot()}
        ${this.getviewMoreCountSlot()}
        ${this.getCloseIconSlot()}
      </div>
    `;
  }
}

export default NileFilterChip;

declare global {
  interface HTMLElementTagNameMap {
    'nile-filter-chip': NileFilterChip;
  }
}