import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AdminPreferencesService } from '../services/admin-preferences.service';
import { TranslatePipe } from '../../../../i18n/translate.pipe';
import { ToggleComponent } from '../../../../shared/ui/toggle/toggle.component';
import { AdminOrderWatcherService } from '../../shell/services/admin-order-watcher.service';

const SAVED_MESSAGE_DURATION_MS = 2000;

@Component({
  selector: 'app-admin-settings-page',
  standalone: true,
  imports: [CommonModule, FormsModule, TranslatePipe, ToggleComponent],
  templateUrl: './admin-settings-page.component.html',
  styleUrls: ['./admin-settings-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AdminSettingsPageComponent {
  readonly preferences = inject(AdminPreferencesService);

  readonly orderWatcher = inject(AdminOrderWatcherService);
  readonly notificationIntervalSecondsDraft = signal(Math.round(this.orderWatcher.intervalMs() / 1000));
  readonly showNotificationIntervalSaved = signal(false);

  saveNotificationInterval(): void {
    const applied = this.orderWatcher.setIntervalSeconds(this.notificationIntervalSecondsDraft());
    this.notificationIntervalSecondsDraft.set(Math.round(this.orderWatcher.intervalMs() / 1000));
    if (applied) {
      this.showNotificationIntervalSaved.set(true);
      setTimeout(() => this.showNotificationIntervalSaved.set(false), SAVED_MESSAGE_DURATION_MS);
    }
  }

  onCompactToggle(compact: boolean): void {
    this.preferences.setDensity(compact ? 'compact' : 'comfortable');
  }
}
