/**
 * 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 { HasSlotController } from '../internal/slot';
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.
 * @slot prefix - Content placed before the badge's content, such as an icon, dot or avatar.
 * @slot suffix - Content placed after the badge's content, such as an icon, count or button.
 *
 * @csspart base - The component's base wrapper.
 * @csspart prefix - The container that wraps the prefix slot.
 * @csspart content - The badge's content.
 * @csspart suffix - The container that wraps the suffix slot.
 */

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

  private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');

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

  /** Text of the default slot only, so prefix and suffix content stays out of the label. */
  private getLabelText(): string {
    return [...this.childNodes]
      .filter(
        node =>
          node.nodeType === Node.TEXT_NODE ||
          (node.nodeType === Node.ELEMENT_NODE && !(node as Element).hasAttribute('slot'))
      )
      .map(node => node.textContent ?? '')
      .join('')
      .trim();
  }

  /** 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';

  /** The badge's size. `md` keeps the existing default dimensions. */
  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';

  render() {
    const hasPrefix = this.hasSlotController.test('prefix');
    const hasSuffix = this.hasSlotController.test('suffix');

    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',
          'badge--sm': this.size === 'sm',
          'badge--md': this.size === 'md',
          'badge--lg': this.size === 'lg',
          'badge--has-prefix': hasPrefix,
          'badge--has-suffix': hasSuffix,
        })}
      >
        <slot name="prefix" part="prefix" class="badge__prefix"></slot>
        <slot part="content" class="badge__content"></slot>
        <slot name="suffix" part="suffix" class="badge__suffix"></slot>
      </span>
    `;
  }
}

export default NileBadge;

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