import { CurrencyPipe, NgStyle } from '@angular/common'
import { Component, ViewEncapsulation, inject } from '@angular/core'
import { Router, RouterLink, RouterOutlet } from '@angular/router'
import { WifiPasswordPipe } from '@frontend/shared'
import { TranslocoDirective } from '@jsverse/transloco'
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
import { range } from 'es-toolkit'
import { FuseMediaWatcherService } from '../../../shared'
import { ImageUploadComponent } from '../../../shared/components/image-upload/image-upload.component'
import { PersonalizationSettingsStore } from './personalization-settings.store'
import {
	LucideChevronLeft,
	LucideCopy,
	LucideImages,
	LucidePencil,
	LucidePlus,
	LucideStar,
	LucideWifi,
} from '@lucide/angular'

/**
 * Allows to customize the customer experience, e.g. Restaurant Data, Name, Background Images, Wifi Data and Color
 */
@UntilDestroy({ checkProperties: true })
@Component({
	selector: 'kadi-personalization-settings',
	templateUrl: './personalization-settings.component.html',
	styleUrls: ['./personalization-settings.component.scss'],
	providers: [PersonalizationSettingsStore],
	encapsulation: ViewEncapsulation.None,
	imports: [
		TranslocoDirective,
		RouterLink,
		NgStyle,
		ImageUploadComponent,
		RouterOutlet,
		CurrencyPipe,
		WifiPasswordPipe,
		LucideChevronLeft,
		LucidePencil,
		LucideImages,
		LucideStar,
		LucidePlus,
		LucideWifi,
		LucideCopy,
	],
})
export class PersonalizationSettingsComponent {
	private readonly _router = inject(Router)
	private readonly _mediaWatcherService = inject(FuseMediaWatcherService)
	readonly _store = inject(PersonalizationSettingsStore)

	readonly range = range

	constructor() {
		this._mediaWatcherService.onMediaChange$.pipe(untilDestroyed(this)).subscribe(({ matchingAliases }) => {
			const isScreenSmall = !matchingAliases.includes('xl')
			if (!isScreenSmall) this._router.navigateByUrl('/settings/personalization/edit')
		})
	}
}