import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
  ViewEncapsulation,
} from '@angular/core';
import { TextButtonColor, TextButtonSize } from './types';
import { NgIconComponent, provideIcons } from '@ng-icons/core';
import { isaLoading } from '@isa/icons';

/**
 * A UI text button component that supports customization of size, color, and state.
 *
 * The component uses reactive signals to dynamically update its CSS classes
 * and properties without manual DOM manipulation.
 *
 * @property size - The size of the button (e.g., 'small', 'medium', 'large'). Default is 'medium'.
 * @property sizeClass - A computed CSS class based on the current size, formatted as 'ui-text-button__{size}'.
 * @property color - The color theme of the button (e.g., 'normal', 'primary'). Default is 'normal'.
 * @property colorClass - A computed CSS class based on the current color, formatted as 'ui-text-button__{color}'.
 * @property pending - A boolean flag indicating whether the button is in a loading or pending state.
 * @property pendingClass - A computed CSS class that adds a 'pending' style when the button is loading.
 * @property tabIndex - The tab index for the button, used to control keyboard navigation order.
 *
 * @remarks
 * This component is designed to be lightweight and flexible, leveraging Angular's
 * reactive input and computed signals for seamless updates.
 */
@Component({
  selector: 'ui-text-button, [uiTextButton]',
  templateUrl: './text-button.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [NgIconComponent],
  providers: [provideIcons({ isaLoading })],
  host: {
    '[class]': '["ui-text-button", sizeClass(), colorClass(), pendingClass(), disabledClass()]',
    '[tabindex]': 'tabIndex()',
    '[disabled]': 'disabled()',
  },
})
export class TextButtonComponent {
  /** The size of the button. */
  size = input<TextButtonSize>('medium');

  /** A computed CSS class based on the current size. */
  sizeClass = computed(() => `ui-text-button__${this.size()}`);

  /** The color theme of the button. */
  color = input<TextButtonColor>('normal');

  /** A computed CSS class based on the current color. */
  colorClass = computed(() => `ui-text-button__${this.color()}`);

  /** Indicates whether the button is in a loading or pending state. */
  pending = input<boolean>(false);

  /** A computed CSS class for the pending state. */
  pendingClass = computed(() => (this.pending() ? 'ui-text-button__pending' : ''));

  /** The tab index for the button. */
  tabIndex = input<number>(0);

  /** Indicates whether the button is disabled. */
  disabled = input<boolean>(false);

  /** A computed CSS class for the disabled state. */
  disabledClass = computed(() => (this.disabled() ? 'disabled' : ''));
}
