import { Component, input, model, output } from '@angular/core';

@Component({
  selector: 'switch',
  imports: [],
  templateUrl: './switch.html',
  styleUrl: './switch.scss',
  host: {
    role: 'switch',
    tabindex: '0',
    '[attr.aria-checked]': 'isActive()',
    '[class.active]': 'isActive()',
    '[class.reduce-motion]': 'reduceMotion()',
    '(click)': 'onClick()',
    '(keydown.enter)': 'onClick()',
    '(keydown.space)': 'onSpaceDown($event)',
  },
})
export class Switch {
  isActive = model<boolean>(false);
  reduceMotion = input<boolean>(
    typeof window !== 'undefined'
      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
      : false,
  );
  toggle = output<boolean>();

  onClick(): void {
    this.isActive.update((value) => !value);
    this.onToggle();
  }

  onSpaceDown(event: Event): void {
    event.preventDefault(); // 스페이스바 스크롤 방지
    this.onClick();
  }

  onToggle(): void {
    this.toggle.emit(this.isActive());
  }
}