import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { MatButton } from '@angular/material/button';
import {
	MatDialogActions,
	MatDialogClose,
	MatDialogContent,
	MatDialogTitle,
} from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggle } from '@angular/material/slide-toggle';
import { CalendarSettingsService } from '../../services/calendar-settings-service';
import { ThemeService } from '../../services/theme-service';
import { TranslationService } from '../../services/translation-service';

@Component({
	selector: 'app-user-settings',
	imports: [
		MatButton,
		MatDialogActions,
		MatDialogClose,
		MatDialogContent,
		MatDialogTitle,
		MatFormFieldModule,
		MatSelectModule,
		MatSlideToggle,
	],
	templateUrl: './user-settings.html',
	styleUrl: './user-settings.scss',
	changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserSettings {
	protected readonly themeService = inject(ThemeService);
	protected readonly translationService = inject(TranslationService);
	protected readonly calendarSettings = inject(CalendarSettingsService);
	protected readonly showWeekNumbers = this.calendarSettings.get('showWeekNumbers');
	protected readonly tr = this.translationService.tr;
	protected readonly themePreferences = ['system', 'light', 'dark'] as const;
}