import { AsyncPipe } from '@angular/common'
import { Component, inject } from '@angular/core'
import { RouterLink } from '@angular/router'
import { FeatureKey, SessionInfo } from '@core/types'
import { isFeatureEnabled, sortTablesByRoomPlan } from '@core/utils'
import { DefaultService, FeaturesSettings } from '@api-client/angular'
import { TranslocoDirective } from '@jsverse/transloco'
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
import { Observable, map } from 'rxjs'
import { AuthService } from '../../../auth'
import { LucideChevronRight } from '@lucide/angular'

@UntilDestroy({ checkProperties: true })
@Component({
	selector: 'kadi-settings-options',
	templateUrl: './settings-options.component.html',
	styles: [
		`
			.text-wrap {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 16ch;

				@media (min-width: 640px) {
					width: auto;
				}
			}
		`,
	],
	imports: [TranslocoDirective, RouterLink, AsyncPipe, LucideChevronRight],
})
export class SettingsOptionsComponent {
	private readonly _authService = inject(AuthService)
	private readonly _apiService = inject(DefaultService)

	user: SessionInfo
	tables$: Observable<string[]>

	optionGroups: OptionGroup[] = []

	constructor() {
		this.user = this._authService.userData
		this.tables$ = this._apiService
			.roomPlanControllerFindAllSubscribedTablesByUserId(this.user.id)
			.pipe(map((tables) => sortTablesByRoomPlan(tables).map((table) => table.name)))

		this._apiService
			.settingsControllerFind()
			.pipe(untilDestroyed(this))
			.subscribe((settings) => {
				this.mapOptions(settings.features)
			})
	}

	private mapOptions(features?: FeaturesSettings): void {
		this.optionGroups = [
			{
				title: 'Restaurant',
				items: [
					{ title: 'Room Plan', route: '/settings/room-plan', hidden: false },
					{ title: 'Table Selection', route: '/settings/table-selection', hidden: false },
					{ title: 'Menu', route: '/settings/menu', hidden: false },
					{ title: 'Schedule', route: '/settings/schedule', hidden: false },
					{ title: 'Restaurant Information', route: '/settings/restaurant', hidden: false },
					{ title: 'Email', route: '/settings/email', hidden: false },
				],
			},
			{
				title: 'Application',
				items: [
					{ title: 'Personalization', route: '/settings/personalization', hidden: false },
					{
						title: 'Reservations',
						route: '/settings/reservation',
						hidden: !isFeatureEnabled(FeatureKey.Reservation, features),
					},
					{
						title: 'Kitchen',
						route: '/settings/kitchen',
						hidden: !isFeatureEnabled(FeatureKey.Kitchen, features),
					},
					// {
					// 	title: 'Email Templates',
					// 	route: '/settings/email-templates',
					// 	hidden: !isFeatureEnabled(FeatureKey.Reservation, features),
					// },
					{ title: 'Users', route: '/settings/user', hidden: false },
					{ title: 'Billing', route: '/settings/billing', hidden: false },
				],
			},
			{
				title: 'Personal',
				items: [
					{ title: 'Account', route: '/settings/account', hidden: false },
					{ title: 'Language', route: '/settings/language', hidden: false },
				],
			},
		]
	}
}

interface OptionGroup {
	title: string
	items: { title: string; route: string; hidden: boolean }[]
}