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

@Component({
  selector: 'ui-info-button, [uiInfoButton]',
  templateUrl: './info-button.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  imports: [NgIconComponent],
  providers: [provideIcons({ isaLoading })],
  host: {
    '[class]': '["ui-info-button", pendingClass(), disabledClass()]',
    '[tabindex]': 'tabIndex()',
    '[disabled]': 'disabled()',
  },
})
export class InfoButtonComponent {
  pending = input<boolean>(false);

  pendingClass = computed(() => (this.pending() ? 'ui-info-button--pending' : ''));

  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' : ''));
}
