import { NgClass } from '@angular/common'
import { Component, inject, viewChild } from '@angular/core'
import { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav'
import { DefaultService, EmailTemplate, EmailTemplateSettings } from '@api-client/angular'
import { DialogService } from '@ngneat/dialog'
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
import { FuseMediaWatcherService } from '../../../shared'
import { EmailTemplatePreviewComponent } from './preview/email-template-preview.component'
import { LucideCheck, LucideMenu, LucideX } from '@lucide/angular'

export enum EmailTemplateType {
	ReservationConfirmed,
	ReservationReminder,
}

@UntilDestroy({ checkProperties: true })
@Component({
	selector: 'kadi-email-template-settings',
	templateUrl: './email-template-settings.component.html',
	styleUrls: ['./email-template-settings.component.scss'],
	imports: [MatDrawerContainer, MatDrawer, NgClass, MatDrawerContent, LucideMenu, LucideCheck, LucideX],
})
export class EmailTemplateSettingsComponent {
	private readonly _dialog = inject(DialogService)
	private readonly _apiService = inject(DefaultService)
	private readonly _fuseMediaWatcherService = inject(FuseMediaWatcherService)

	readonly drawer = viewChild.required<MatDrawer>('drawer')

	EmailTemplateType = EmailTemplateType

	drawerMode: 'over' | 'side' = 'side'
	drawerOpened = true
	panels: Panel[] = []
	selectedPanel = EmailTemplateType.ReservationConfirmed

	emailTemplates: EmailTemplateSettings | undefined
	currentTemplate: EmailTemplate | undefined

	constructor() {
		this.panels = [
			{
				type: EmailTemplateType.ReservationConfirmed,
				title: 'Reservation Confirmation',
				description: 'Tell your customers that their reservation has been confirmed',
			},
			{
				type: EmailTemplateType.ReservationReminder,
				title: 'Reservation Reminder',
				description: 'Give a reminder to your customers about their upcoming reservations',
			},
		]

		this._fuseMediaWatcherService.onMediaChange$.pipe(untilDestroyed(this)).subscribe(({ matchingAliases }) => {
			if (matchingAliases.includes('lg')) {
				this.drawerMode = 'side'
				this.drawerOpened = true
			} else {
				this.drawerMode = 'over'
				this.drawerOpened = false
			}
		})

		this.loadEmailTemplates()
	}

	goToPanel(panel: EmailTemplateType): void {
		this.selectedPanel = panel
		if (this.drawerMode === 'over') this.drawer().close()
		this.currentTemplate =
			panel === EmailTemplateType.ReservationConfirmed
				? this.emailTemplates?.reservationConfirmed
				: this.emailTemplates?.reservationReminder
	}

	getPanelInfo(type: EmailTemplateType): Panel | undefined {
		return this.panels.find((panel) => panel.type === type)
	}

	previewTemplate(template: EmailTemplate): void {
		this._dialog.open(EmailTemplatePreviewComponent, {
			enableClose: false,
			width: '800px',
			height: '95%',
			data: { template },
		})
	}

	private loadEmailTemplates(): void {
		this._apiService
			.settingsControllerFind()
			.pipe(untilDestroyed(this))
			.subscribe(({ emailTemplates }) => {
				this.emailTemplates = emailTemplates
				this.goToPanel(EmailTemplateType.ReservationConfirmed)
			})
	}

	private save(): void {
		this._apiService
			.settingsControllerSave({ emailTemplates: this.emailTemplates })
			.pipe(untilDestroyed(this))
			.subscribe()
	}
}

interface Panel {
	type: EmailTemplateType
	title: string
	description: string
}