import { CdkDrag, CdkDragDrop, CdkDragHandle, CdkDragPlaceholder, CdkDropList } from '@angular/cdk/drag-drop'
import { CurrencyPipe } from '@angular/common'
import { Component, ViewEncapsulation, inject } from '@angular/core'
import { RouterLink, RouterOutlet } from '@angular/router'
import { CategoryResponse, CreateMenuItemRequest, MenuItemResponse } from '@api-client/angular'
import { LoadingImageDirective } from '@frontend/shared'
import { TranslocoDirective } from '@jsverse/transloco'
import { UntilDestroy } from '@ngneat/until-destroy'
import { MenuSettingsStore } from './+state'
import { CategorySettingsComponent } from './category-settings/category-settings.component'
import { LucideChevronLeft, LucideEye, LucideEyeOff, LucideImages, LucideMenu, LucidePlus } from '@lucide/angular'

@UntilDestroy({ checkProperties: true })
@Component({
	selector: 'kadi-menu-settings',
	templateUrl: './menu-settings.component.html',
	styleUrls: ['./menu-settings.component.scss'],
	encapsulation: ViewEncapsulation.None,
	providers: [MenuSettingsStore],
	imports: [
		TranslocoDirective,
		RouterLink,
		CategorySettingsComponent,
		CdkDropList,
		CdkDrag,
		CdkDragPlaceholder,
		LoadingImageDirective,
		CdkDragHandle,
		RouterOutlet,
		CurrencyPipe,
		LucideChevronLeft,
		LucideImages,
		LucideMenu,
		LucideEye,
		LucideEyeOff,
		LucidePlus,
	],
})
export class MenuSettingsComponent {
	private readonly _store = inject(MenuSettingsStore)

	categories = this._store.categories
	menuItems = this._store.menuItems
	items = this._store.items
	selectedCategory = this._store.selectedCategory
	selectedSubCategory = this._store.selectedSubcategory
	selectedItem = this._store.selectedItem

	isItemVisible(item: MenuItemResponse, category: CategoryResponse): boolean {
		if (!category.isVisible) return false
		return item.categories.find((_category) => _category.categoryId === category.id)?.isVisible ?? true
	}

	toggleVisibility(item: MenuItemResponse, category: CategoryResponse): void {
		if (!category.isVisible) return
		this._store.toggleItemVisibility(item, category.id)
	}

	onDropItem(event: CdkDragDrop<string[]>, categoryId: string): void {
		if (event.previousIndex === event.currentIndex) return
		this._store.updateItemSortOrder(event.previousIndex, event.currentIndex, categoryId)
	}

	addNewItem(): void {
		const items = this.items()
		const selectedCategory = this.selectedCategory()
		const selectedSubCategory = this.selectedSubCategory()

		const item: CreateMenuItemRequest = {
			name: '',
			price: 1,
			amount: 1,
			unit: CreateMenuItemRequest.UnitEnum.pcs,
			currency: 'EUR',
			coverUrl: undefined,
			categories: [],
			subcategories: [],
		}

		if (selectedCategory) {
			item.categories.push({
				categoryId: selectedCategory.id,
				sortOrder: this.items().length + 1,
			})
		}

		if (selectedSubCategory) {
			item.categories.push({
				categoryId: selectedCategory!.id,
				sortOrder: items.length + 1,
			})
			item.subcategories?.push({
				categoryId: selectedSubCategory.id,
				sortOrder: items.length + 1,
			})
		}
		this._store.selectItem(item as MenuItemResponse)
	}

	selectItem(item: MenuItemResponse): void {
		this._store.selectItem(item)
	}
}