export class DashboardEmbedComponent implements OnInit {
	dashboardId: string = '';
	dashboardFilters = [];
	contact_support = `Dashboard is not configured for this customer yet. Please <a href='<https://help.xxx.io>'>contact support</a> if you have questions.`;
	gdDashboardLoading$ = new BehaviorSubject<boolean>(true);
	dashboardConfigured = signal(false);
	spinnerClasses = signal('contained');

	constructor(
		private userSvc: UserService,
		private renderer: Renderer2,
		private globalDashboardSvc: GlobalDashboardService
	) {
	}

	onDashboardLoaded(e: Event) {
		const detail = (e as CustomEvent).detail;
		const filters = detail?.dashboard?.filterContext?.filters;
		if (Array.isArray(filters)) {
			this.dashboardFilters.push(...filters);
		}
	}

	onDashboardFilterChange(e: Event) {
		const detail = (e as CustomEvent).detail;
		const filters = detail?.dashboard?.filterContext?.filters;
		if (Array.isArray(filters)) {
			this.dashboardFilters.push(...filters);
		}
	}

	ngOnInit(): void {
		this.globalDashboardSvc.activeDashboardSubject$
		.pipe(
			distinctUntilChanged((prevDashboard, currDashboard) => JSON.stringify(prevDashboard) === JSON.stringify(currDashboard)),
			tap(dashboard => {
				if(!dashboard) {
					this.dashboardConfigured.set(false);
					this.gdDashboardLoading$.next(false);
				}
			}),
			filter(dashboard => !!dashboard),
			untilDestroyed(this),
		)
		.subscribe(dashboard => {
			this.dashboardId = dashboard?.dashId;
			this.authenticateAndInjectGdScript(dashboard?.workspaceId);
		})

		this.globalDashboardSvc.activeCustomer$.pipe(
			filter(customer => !!customer),
			untilDestroyed(this),
		).subscribe(customer => {
			if(customer?.enableLegacyDashboard) {
				this.gdDashboardLoading$.next(false);
				this.dashboardConfigured.set(false);
			}
		})
	}

	cleanUpGdElements() {
		// Clean up existing elements
		document.getElementById('customDashScript')?.remove();
		document.getElementById('gdElement')?.remove();
	}

	authenticateAndInjectGdScript(workspaceId: string) {
		this.userSvc.getStoredOrNewToken$()
			.pipe(
				distinctUntilChanged(),
				untilDestroyed(this),
			)
			.subscribe(token => {
				// Create and inject new script
				const script = this.renderer.createElement('script');
				const head = this.renderer.selectRootElement('head', true);
				const gdElement = document.createElement('gd-dashboard');

				script.type = 'module';
				script.id = 'customDashScript';

				// Create the script content with imports and context setup
				script.textContent = `
					import { setContext } from "<https://xxx.cloud.gooddata.com/components/${workspaceId}.js>";
					import factory, { TigerTokenAuthProvider } from "<https://xxx.cloud.gooddata.com/components/tigerBackend.js>";

					try {
						setContext({
						backend: factory()
							.onHostname("<https://xxx.cloud.gooddata.com>")
							.withAuthentication(new TigerTokenAuthProvider("${token}")),
						workspaceId: "${workspaceId}",
					});
					} catch(e) {
						// console.log('Context set');
					}
				`;

				// Append script to head
				this.renderer.appendChild(head, script);

				gdElement.classList.add('dashboard');
				gdElement.id = 'gdElement'
				gdElement.setAttribute('dashboard', this.dashboardId);
				gdElement.addEventListener(INITIALIZED, this.onDashboardLoaded.bind(this));
				gdElement.addEventListener(FILTER_CHANGED, this.onDashboardFilterChange.bind(this));

				if (document.getElementById('dashboardContainer')) {
					document.getElementById('dashboardContainer').innerHTML = '';
					document.getElementById('dashboardContainer').appendChild(gdElement);

					setTimeout(() => {
						this.gdDashboardLoading$.next(false);
						this.dashboardConfigured.set(true);
					}, 1000);
				} else {
					this.gdDashboardLoading$.next(false);
					this.dashboardConfigured.set(false);
				}
			});
	}
}