/**
 * 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, state, property } from 'lit/decorators.js';
import { styles } from './nile-button-filter.css';
import NileElement from '../internal/nile-element';

/**
 * Nile icon component.
 *
 * @tag nile-button-filter
 *
 */
@customElement('nile-button-filter')
export class NileButtonFilter extends NileElement {
  /**
   * The styles for ButtonFilter
   * @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];
  }

  /** Disables the duplicate entries. */
  @property({ type: Array }) values: any = [];

  @state() private isOpen = false;
  /* #endregion */

  /* #region Methods */

  /**
   * Render method
   * @slot This is a slot test
   */

  private handleInnerText(values: any) {
    if (!values.length) {
      return '';
    }
    let inner__text__value = values[0].slice(0, 3);
    if (values[0].length > 3) {
      inner__text__value = inner__text__value + '.';
    }
    let final__value = html`
      <div class="inner__text">
        <span> ${inner__text__value}</span>
        ${values.length > 1
          ? html`
              <nile-badge variant="primary" rounded
                >+${values.length - 1}</nile-badge
              >
            `
          : ``}
      </div>
    `;
    return final__value;
  }

  public render(): TemplateResult {
    const inner__value = this.handleInnerText(this.values);
    return html`
      <nile-button variant="tertiary">
        <div class="inner__text">
          <slot></slot>
          ${inner__value}
        </div>

        ${!this.isOpen
          ? html` <nile-icon
              slot="suffix"
              name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))"
              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
              size="16"
              color="black"
            ></nile-icon>`
          : html` <nile-icon
              slot="suffix"
              name="var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))"
              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
              size="16"
              color="black"
            ></nile-icon>`}

        <nile-icon slot="suffix" name="var(--nile-icon-close, var(--ng-icon-x-close))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="16" color="black"></nile-icon>
      </nile-button>
    `;
  }

  /* #endregion */
}

export default NileButtonFilter;

declare global {
  interface HTMLElementTagNameMap {
    'nile-button-filter': NileButtonFilter;
  }
}