/**
 * 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 { styles } from './nile-tag.css';
import '../nile-icon-button/nile-icon-button';
import { classMap } from 'lit/directives/class-map.js';
import { customElement, property } from 'lit/decorators.js';
import NileElement from '../internal/nile-element';
import type { CSSResultGroup } from 'lit';
/**
 * Nile icon component.
 *
 * @tag nile-tag
 *
 */

/**
 * @summary Tags are used as labels to organize things or to indicate a selection.
 * @status stable
 *
 * @dependency nile-icon-button
 *
 * @slot - The tag's content.
 *
 * @event nile-remove - Emitted when the remove button is activated.
 *
 * @csspart base - The component's base wrapper.
 * @csspart content - The tag's content.
 * @csspart remove-button - The tag's remove button, an `<nile-icon-button>`.
 * @csspart remove-button__base - The remove button's exported `base` part.
 */

@customElement('nile-tag')
export class NileTag extends NileElement {
  static styles: CSSResultGroup = styles;

  /** The tag's theme variant. */
  @property({ reflect: true }) variant:
    | 'primary'
    | 'success'
    | 'normal'
    | 'warning'
    | 'error'
    | 'info' = 'normal';

  /** The tag's size. */
  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';

  /** Draws a pill-style tag with rounded edges. */
  @property({ type: Boolean, reflect: true }) pill = false;

  /** Makes the tag removable and shows a remove button. */
  @property({ type: Boolean }) removable = false;

  /** Disables the tag and cannot remove the tag. */
  @property({ type: Boolean }) disabled = false;

  private handleRemoveClick() {
    this.emit('nile-remove');
  }
  
  getCloseButtonColor() {
    let primaryColor;
    switch (this.variant) {
      case 'primary':
        primaryColor = '--nile-colors-blue-500';
        break;
      case 'success':
        primaryColor = '--nile-colors-green-500';
        break;
      case 'normal':
        primaryColor = '--nile-colors-dark-500';
        break;
      case 'warning':
        primaryColor = '--nile-colors-yellow-500';
        break;
      case 'error':
        primaryColor = '--nile-colors-red-500';
        break;
      case 'info':
        primaryColor = '--nile-colors-blue-500';
        break;
      default:
        primaryColor = '--nile-colors-dark-500';
    }
    return `var(${primaryColor}, var(--ng-colors-fg-quaternary-400))`;
  }
  
  render() {
    const colorVariable = this.getCloseButtonColor();
    return html`
      <span
        part="base"
        class=${classMap({
          tag: true,

          // Types
          'tag--primary': this.variant === 'primary',
          'tag--success': this.variant === 'success',
          'tag--normal': this.variant === 'normal',
          'tag--warning': this.variant === 'warning',
          'tag--error': this.variant === 'error',
          'tag--info': this.variant === 'info',

          // Sizes
          'tag--small': this.size === 'small',
          'tag--medium': this.size === 'medium',
          'tag--large': this.size === 'large',

          // Modifiers
          'tag--pill': this.pill,
          'tag--removable': this.removable,

        })}
      >
        <div class="prefix_content_wrapper" part="prefix_content_wrapper">
          <slot name="prefix" part="prefix" class="tag__prefix"></slot>
          <slot part="content" class="tag__content"></slot>
        </div>

        ${this.removable
          ? html`
              <nile-icon-button
                part="remove-button"
                exportparts="base:remove-button__base"
                name="var(--nile-icon-close, var(--ng-icon-x-close))"
                library="system"
                label="remove"
                class="tag__remove cross_icon"
                @click=${this.handleRemoveClick}
                tabindex="-1"
                 color=${this.getCloseButtonColor()}
                ?disabled=${this.disabled}
              ></nile-icon-button>
            `
          : ''}
      </span>
    `;
  }
}

export default NileTag;

declare global {
  interface HTMLElementTagNameMap {
    'nile-tag': NileTag;
  }
}