import {
	AfterViewInit,
	Component,
	OnInit,
	ViewChild,
	ViewContainerRef,
} from '@angular/core';
import { SDK } from '@dilvant/bizcard-sdk';
import { Storage } from '@dilvant/front-lib';
import { ColorPickerService, SubscriptionBin } from '@dilvant/utils';
import { XM } from '@dilvant/xm-sdk';
import {
	ComponentLoaderService,
	IApp,
	LayoutElementEventListener,
	STORAGE_KEYS,
} from 'dilvant-xm-editor-lib';
import { MOCK_APP } from '../data/app';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, AfterViewInit {
	@ViewChild('canvas', { read: ViewContainerRef }) canvasEl!: ViewContainerRef;

	// app!: IApp;
	app!: any;
	title = 'xm-editor-test';
	subs = new SubscriptionBin();

	constructor(
		private colorPickerService: ColorPickerService,
		private componentLoaderService: ComponentLoaderService
	) {
		SDK.setEnv('dev');
		XM.setEnv('dev');

		this.subs.add = [
			colorPickerService.onColors().subscribe((colors: any) => {
				if (!colors) return;
				this.app.theme!.colors = colors;
				this.loadColorPallete();
			}),
		];
	}

	ngOnInit(): void { }

	async ngAfterViewInit() {
		await this.getApp();

		Storage.set(STORAGE_KEYS.APP, this.app);

		this.loadComponents(this.canvasEl);

		setTimeout(() => {
			LayoutElementEventListener.initializeListeners();
		}, 0);
	}

	async getApp() {
		// this.app = await SDK.App.getById('634d92bf5bf430001670206f');
		this.app = await SDK.App.getById('63797f327be8670016b325f5');
		// this.app = MOCK_APP;
	}

	async loadComponents(containerRef: ViewContainerRef) {
		const componentsRef = await this.componentLoaderService.loadMany(
			containerRef,
			this.app,
			STORAGE_KEYS.APP
		);
	}

	loadColorPallete() {
		const globalStyleSheet = document.documentElement.style;

		// this.app.colors.forEach((color) => {
		//   globalStyleSheet.setProperty(color.key, color.value);
		// });
	}
}