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

/**
 * A toggle switch component that displays an icon and supports two states (on/off).
 * Use only when the icon meaning is universally clear, otherwise prefer a labeled switch.
 *
 * The component uses reactive signals to manage its state and provides a visually
 * appealing toggle animation between enabled and disabled states.
 *
 * Features:
 * - Customizable icon
 * - Two-way binding with model signal
 * - Hover state styling
 * - Disabled state handling
 * - Keyboard navigation support
 * - Accessible with ARIA attributes
 *
 * @property icon - The name of the icon to display in the switch
 * @property checked - A two-way bindable signal indicating whether the switch is on (true) or off (false)
 * @property color - The color theme of the switch (currently only 'primary' is supported)
 * @property colorClass - A computed CSS class based on the current color
 * @property disabled - A boolean flag indicating whether the switch is disabled
 * @property disabledClass - A computed CSS class that adds a 'disabled' style when the switch is disabled
 * @property tabIndex - The tab index for keyboard navigation
 *
 * @example
 * ```html
 * <ui-switch
 *   icon="isaHome"
 *   [(checked)]="isEnabled"
 *   [disabled]="false">
 * </ui-switch>
 * ```
 *
 * @remarks
 * - The switch uses a pill-shaped design with a circular toggle indicator
 * - The icon is always visible and moves with the toggle indicator
 * - Click and Enter/Space key events toggle the switch state
 */
@Component({
  selector: 'ui-switch',
  templateUrl: './switch.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [NgIconComponent],
  host: {
    '[class]': '["ui-switch", colorClass(), disabledClass()]',
    '[tabindex]': 'tabIndex()',
    '[attr.role]': '"switch"',
    '[attr.aria-checked]': 'checked()',
    '[attr.aria-disabled]': 'disabled()',
    '(click)': 'toggle()',
    '(keydown.enter)': 'toggle()',
    '(keydown.space)': 'toggle(); $event.preventDefault()',
  },
  providers: [provideIcons(IsaIcons)],
})
export class SwitchComponent {
  /** The name of the icon to display */
  icon = input.required<string>();

  /** Two-way bindable signal for the checked state */
  checked = model<boolean>(false);

  /** The color theme of the switch */
  color = input<IconSwitchColor>('primary');

  /** Computed class based on the current color */
  colorClass = computed(() => `ui-switch__${this.color()}`);

  /** Whether the switch is disabled */
  disabled = input<boolean>(false);

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

  /** The tab index for keyboard navigation */
  tabIndex = input<number>(0);

  /** Computed class for the checked state */
  checkedClass = computed(() => (this.checked() ? 'ui-switch__checked' : ''));

  /**
   * Toggles the switch state unless it's disabled
   */
  toggle(): void {
    if (!this.disabled()) {
      this.checked.set(!this.checked());
    }
  }
}
