import { Component, inject, input } from '@angular/core';
import { PopupComponent, PopupPosition } from '../../components/popup/popup';
import { Dropdown, DropdownOption } from '../../components/dropdown/dropdown';
import { Switch } from '../../components/switch/switch';
import { NgOptimizedImage } from '@angular/common';
import { PopupService } from '../../services/popup.service';
import { SettingsService, Language } from '../../services/settings.service';
import { TranslationService } from '../../services/translation.service';

@Component({
  selector: 'settings-category',
  standalone: true,
  templateUrl: './category.html',
  styleUrl: './category.scss',
})
export class SettingsCategory {
  headerLabel = input<string>();
}

@Component({
  selector: 'settings-popup',
  standalone: true,
  imports: [PopupComponent, Dropdown, Switch, NgOptimizedImage, SettingsCategory],
  templateUrl: './settings.html',
  styleUrl: './settings.scss',
})
export class SettingsPopup {
  private popupService = inject(PopupService);
  protected settingsService = inject(SettingsService);
  protected translation = inject(TranslationService).translation;

  /**
   * 팝업의 위치 (기본값은 'center')
   */
  position = input<PopupPosition | 'center'>('center');

  languages: DropdownOption[] = [
    { label: 'English', value: 'EN' },
    { label: '한국어', value: 'KR' },
    { label: '日本語', value: 'JP' },
  ];

  onLanguageChange(lang: Language) {
    this.settingsService.setLanguage(lang);
  }

  onDarkModeChange(isDark: boolean) {
    this.settingsService.setDarkMode(isDark);
  }

  onRomanisationChange(value: boolean) {
    this.settingsService.setRomanisation(value);
  }

  onReduceAnimationChange(value: boolean) {
    this.settingsService.setReduceAnimation(value);
  }

  /**
   * 팝업을 닫을 때, 자기 자신(클래스)을 명확하게 지정하여 닫습니다.
   */
  close() {
    this.popupService.close(SettingsPopup);
  }
}