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

/**
 * Configuration options for CheckboxComponent appearance
 * @readonly
 */
export const CheckboxAppearance = {
  /** Renders the checkbox as a round bullet style selector */
  Bullet: 'bullet',
  /** Renders the checkbox as a traditional square checkbox (default) */
  Checkbox: 'checkbox',
} as const;

export type CheckboxAppearance =
  (typeof CheckboxAppearance)[keyof typeof CheckboxAppearance];

/**
 * A customizable checkbox component that supports different visual appearances.
 *
 * This component provides a styled checkbox input that can be displayed either as
 * a traditional checkbox or as a bullet-style (round) selector. It uses Angular signals
 * for reactive state management and includes an optional checkmark icon when selected.
 *
 * @example
 * ```html
 * <!-- Default checkbox appearance -->
 * <ui-checkbox>
 *   <input type="checkbox" />
 * </ui-checkbox>
 *
 * <!-- Bullet appearance -->
 * <ui-checkbox [appearance]="CheckboxAppearance.Bullet">
 *   <input type="checkbox" />
 * </ui-checkbox>
 * ```
 */
@Component({
  selector: 'ui-checkbox',
  templateUrl: './checkbox.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  imports: [NgIconComponent],
  providers: [provideIcons({ isaActionCheck, isaActionMinus })],
  host: {
    '[class]': '["ui-checkbox", appearanceClass()]',
  },
})
export class CheckboxComponent {
  /**
   * Controls the visual appearance of the checkbox.
   * Can be either "checkbox" (default) or "bullet".
   */
  appearance = input<CheckboxAppearance>(CheckboxAppearance.Checkbox);

  /**
   * Computes the CSS class to apply based on the current appearance setting.
   *
   * @returns A CSS class name string that corresponds to the current appearance
   */
  appearanceClass = computed(() => {
    return this.appearance() === CheckboxAppearance.Bullet
      ? 'ui-checkbox__bullet'
      : 'ui-checkbox__checkbox';
  });
}
