/**
 * 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-badge.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, { setupA11yMetadata } from '../internal/nile-element';
import type { CSSResultGroup } from 'lit';
import { A11yProperty } from '../internal/accessibility/a11y.property.enum';
import { A11yRole } from '../internal/accessibility/a11y.role.enum';
import { Role } from '../internal/accessibility/role.enum';
import { A11yCustomValue } from '../internal/accessibility/a11y.custom-value.enum';
/**
 * Nile icon component.
 *
 * @tag nile-badge
 *
 */

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

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

  connectedCallback(): void {
    super.connectedCallback();
    setupA11yMetadata(this, {
      [Role.Role]: A11yRole.Text,
      [A11yProperty.AriaLabel]: this.textContent?.trim() || A11yCustomValue.Badge,
    });
  }

  /** The badge's theme variant. */
  @property({ reflect: true }) variant:
    | 'primary'
    | 'success'
    | 'normal'
    | 'warning'
    | 'error'
    | 'info'
    | 'gray'
    | 'brand'
    | 'blue-light'
    | 'blue'
    | 'indigo'
    | 'purple'
    | 'pink'
    | 'orange'
    | 'blue-gray'
    | 'gray-blue' = 'normal';

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

  //  For setting pill type
  @property({ reflect: true }) pilltype:
    | 'pill-color'
    | 'pill-outline'
    | 'badge-color'='badge-color';

  render() {
    return html`
      <span
        part="base"
        class=${classMap({
          badge: true,
          'badge--primary': this.variant === 'primary',
          'badge--normal': this.variant === 'normal',
          'badge--info': this.variant === 'info',
          'badge--pink': this.variant === 'pink',
          'badge--orange': this.variant === 'orange',
          'badge--purple': this.variant === 'purple',
          'badge--indigo': this.variant === 'indigo',
          'badge--blue': this.variant === 'blue',
          'badge--blue-light': this.variant === 'blue-light',
          'badge--gray-blue': this.variant === 'gray-blue',
          'badge--success': this.variant === 'success',
          'badge--warning': this.variant === 'warning',
          'badge--error': this.variant === 'error',
          'badge--brand': this.variant === 'brand',
          'badge--gray': this.variant === 'gray',
          'badge--pill-outline': this.pilltype == 'pill-outline',
          'badge--badge-color': this.pilltype == 'badge-color',
          'badge--rounded':
            this.rounded ||
            this.pilltype == 'pill-outline' ||
            this.pilltype == 'pill-color',
        })}
      >
        <slot part="content" class="badge__content"></slot>
      </span>
    `;
  }
}

export default NileBadge;

declare global {
  interface HTMLElementTagNameMap {
    'nile-badge': NileBadge;
  }
}