import { BidiModule, Direction } from '@angular/cdk/bidi';
import { Component, DestroyRef, Inject, inject, Renderer2 } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { RouterOutlet } from '@angular/router';
import { InConfiguration } from 'src/app/core/models/config.interface';
import { DirectionService } from 'src/app/core/service/direction.service';
import { ConfigService } from 'src/app/config/config.service';
import { DOCUMENT } from '@angular/common';

@Component({
	selector: 'app-auth-layout',
	templateUrl: './auth-layout.component.html',
	styleUrls: [],
	standalone: true,
	imports: [BidiModule, RouterOutlet],
})
export class AuthLayoutComponent {
	direction!: Direction;
	config!: InConfiguration;
	private readonly destroyRef = inject(DestroyRef);

	constructor(
		@Inject(DOCUMENT) private document: Document,
		private directoryService: DirectionService,
		private configService: ConfigService,
		private renderer: Renderer2
	) {
		this.config = this.configService.configData;
		this.directoryService.currentData
			.pipe(takeUntilDestroyed(this.destroyRef))
			.subscribe((currentData) => {
				if (currentData) {
					this.direction = currentData === 'ltr' ? 'ltr' : 'rtl';
				} else {
					if (localStorage.getItem('isRtl')) {
						if (localStorage.getItem('isRtl') === 'true') {
							this.direction = 'rtl';
						} else if (localStorage.getItem('isRtl') === 'false') {
							this.direction = 'ltr';
						}
					} else {
						if (this.config) {
							if (this.config.layout.rtl === true) {
								this.direction = 'rtl';
								localStorage.setItem('isRtl', 'true');
							} else {
								this.direction = 'ltr';
								localStorage.setItem('isRtl', 'false');
							}
						}
					}
				}
			});

		// set theme on startup
		if (localStorage.getItem('theme')) {
			this.renderer.removeClass(this.document.body, this.config.layout.variant);
			this.renderer.addClass(
				this.document.body,
				localStorage.getItem('theme') as string
			);
		} else {
			this.renderer.addClass(this.document.body, this.config.layout.variant);
		}
	}
}