import { DOCUMENT } from '@angular/common';
import {
	Component,
	Inject,
	ElementRef,
	OnInit,
	AfterViewInit,
	Renderer2,
	ChangeDetectionStrategy,
	ChangeDetectorRef,
} from '@angular/core';
import { ConfigService } from 'src/app/config/config.service';
import { RightSidebarService } from 'src/app/core/service/rightsidebar.service';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
import { UnsubscribeOnDestroyAdapter } from 'src/app/shared/UnsubscribeOnDestroyAdapter';
import { DirectionService } from 'src/app/core/service/direction.service';
import { InConfiguration } from 'src/app/core/models/config.interface';
import { SharedModule } from 'src/app/shared/shared.module';
import { NgScrollbarModule } from 'ngx-scrollbar';

@Component({
	changeDetection: ChangeDetectionStrategy.OnPush,
	selector: 'app-right-sidebar',
	templateUrl: './right-sidebar.component.html',
	styleUrls: ['./right-sidebar.component.scss'],
	standalone: true,
	imports: [SharedModule, NgScrollbarModule],
})
export class RightSidebarComponent
extends UnsubscribeOnDestroyAdapter
implements OnInit, AfterViewInit {
	selectedBgColor = 'white';
	maxHeight!: string;
	maxWidth!: string;
	showpanel = false;
	isOpenSidebar!: boolean;
	isDarkSidebar = false;
	isDarTheme = false;
	innerHeight?: number;
	headerHeight = 60;
	isRtl = false;
	config!: InConfiguration;

	constructor(
		@Inject(DOCUMENT) private document: Document,
		private renderer: Renderer2,
		public elementRef: ElementRef,
		private rightSidebarService: RightSidebarService,
		private configService: ConfigService,
		private directionService: DirectionService,
		private cdr: ChangeDetectorRef
	) {
		super();
	}

	ngOnInit() {
		this.config = this.configService.configData;
		this.subs.sink = this.rightSidebarService.sidebarState.subscribe(
			(isRunning) => {
				this.isOpenSidebar = isRunning;
			}
		);
		this.setRightSidebarWindowHeight();
	}

	ngAfterViewInit() {
		// Light/dark skins only (clamp legacy color-skin values).
		const storedSkin = localStorage.getItem('choose_skin_active');
		const skin = storedSkin === 'black' || this.config.layout.theme_color === 'black'
			? 'black'
			: 'white';
		this.selectedBgColor = skin;
		this.renderer.addClass(this.document.body, 'theme-' + skin);
		localStorage.setItem('choose_skin', 'theme-' + skin);
		localStorage.setItem('choose_skin_active', skin);

		if (localStorage.getItem('menuOption')) {
			if (localStorage.getItem('menuOption') === 'menu_dark') {
				this.isDarkSidebar = true;
			} else if (localStorage.getItem('menuOption') === 'menu_light') {
				this.isDarkSidebar = false;
			} else {
				this.isDarkSidebar =
					this.config.layout.sidebar.backgroundColor === 'dark' ? true : false;
			}
		} else {
			this.isDarkSidebar =
				this.config.layout.sidebar.backgroundColor === 'dark' ? true : false;
		}

		if (localStorage.getItem('theme')) {
			if (localStorage.getItem('theme') === 'dark') {
				this.isDarTheme = true;
			} else if (localStorage.getItem('theme') === 'light') {
				this.isDarTheme = false;
			} else {
				this.isDarTheme = this.config.layout.variant === 'dark' ? true : false;
			}
		} else {
			this.isDarTheme = this.config.layout.variant === 'dark' ? true : false;
		}

		// Content styles use body.dark; keep in sync with the layout toggle (theme-black alone is chrome-only).
		if (this.isDarTheme) {
			this.renderer.removeClass(this.document.body, 'light');
			this.renderer.addClass(this.document.body, 'dark');
		} else {
			this.renderer.removeClass(this.document.body, 'dark');
			this.renderer.addClass(this.document.body, 'light');
		}

		if (localStorage.getItem('isRtl')) {
			if (localStorage.getItem('isRtl') === 'true') {
				this.setRTLSettings();
			} else if (localStorage.getItem('isRtl') === 'false') {
				this.setLTRSettings();
			}
		} else {
			if (this.config.layout.rtl == true) {
				this.setRTLSettings();
			} else {
				this.setLTRSettings();
			}
		}
		this.cdr.markForCheck();
	}

	lightSidebarBtnClick() {
		this.renderer.removeClass(this.document.body, 'menu_dark');
		this.renderer.removeClass(this.document.body, 'logo-black');
		this.renderer.addClass(this.document.body, 'menu_light');
		this.renderer.addClass(this.document.body, 'logo-white');
		this.isDarkSidebar = false;
		localStorage.setItem('choose_logoheader', 'logo-white');
		localStorage.setItem('menuOption', 'menu_light');
		this.cdr.markForCheck();
	}

	darkSidebarBtnClick() {
		this.renderer.removeClass(this.document.body, 'menu_light');
		this.renderer.removeClass(this.document.body, 'logo-white');
		this.renderer.addClass(this.document.body, 'menu_dark');
		this.renderer.addClass(this.document.body, 'logo-black');
		this.isDarkSidebar = true;
		localStorage.setItem('choose_logoheader', 'logo-black');
		localStorage.setItem('menuOption', 'menu_dark');
		this.cdr.markForCheck();
	}

	lightThemeBtnClick() {
		this.removeBodyThemeClasses();
		this.renderer.removeClass(this.document.body, 'dark');
		this.renderer.removeClass(this.document.body, 'menu_dark');
		this.renderer.removeClass(this.document.body, 'logo-black');

		this.renderer.addClass(this.document.body, 'light');
		this.renderer.addClass(this.document.body, 'submenu-closed');
		this.renderer.addClass(this.document.body, 'menu_light');
		this.renderer.addClass(this.document.body, 'logo-white');
		this.renderer.addClass(this.document.body, 'theme-white');

		this.selectedBgColor = 'white';
		this.isDarkSidebar = false;
		this.isDarTheme = false;
		localStorage.setItem('choose_logoheader', 'logo-white');
		localStorage.setItem('choose_skin', 'theme-white');
		localStorage.setItem('choose_skin_active', 'white');
		localStorage.setItem('theme', 'light');
		localStorage.setItem('menuOption', 'menu_light');
		this.cdr.markForCheck();
	}

	darkThemeBtnClick() {
		this.removeBodyThemeClasses();
		this.renderer.removeClass(this.document.body, 'light');
		this.renderer.removeClass(this.document.body, 'menu_light');
		this.renderer.removeClass(this.document.body, 'logo-white');

		this.renderer.addClass(this.document.body, 'dark');
		this.renderer.addClass(this.document.body, 'submenu-closed');
		this.renderer.addClass(this.document.body, 'menu_dark');
		this.renderer.addClass(this.document.body, 'logo-black');
		this.renderer.addClass(this.document.body, 'theme-black');

		this.selectedBgColor = 'black';
		this.isDarkSidebar = true;
		this.isDarTheme = true;
		localStorage.setItem('choose_logoheader', 'logo-black');
		localStorage.setItem('choose_skin', 'theme-black');
		localStorage.setItem('choose_skin_active', 'black');
		localStorage.setItem('theme', 'dark');
		localStorage.setItem('menuOption', 'menu_dark');
		this.cdr.markForCheck();
	}

	/** Clears light/dark theme-* classes before applying a layout. */
	private removeBodyThemeClasses() {
		['theme-white', 'theme-black', 'theme-purple', 'theme-orange', 'theme-cyan', 'theme-green', 'theme-blue']
			.forEach((themeClass) => this.renderer.removeClass(this.document.body, themeClass));
	}

	setRightSidebarWindowHeight() {
		this.innerHeight = window.innerHeight;
		const height = this.innerHeight - this.headerHeight;
		this.maxHeight = height + '';
		this.maxWidth = '500px';
	}

	onClickedOutside(event: Event) {
		const button = event.target as HTMLButtonElement;
		if (button.id !== 'settingBtn') {
			if (this.isOpenSidebar === true) {
				this.toggleRightSidebar();
			}
		}
	}

	toggleRightSidebar(): void {
		this.rightSidebarService.setRightSidebar(
			(this.isOpenSidebar = !this.isOpenSidebar)
		);
	}

	switchDirection(event: MatSlideToggleChange) {
		const isrtl = String(event.checked);
		if (
			isrtl === 'false' &&
				document.getElementsByTagName('html')[0].hasAttribute('dir')
		) {
			document.getElementsByTagName('html')[0].removeAttribute('dir');
			this.renderer.removeClass(this.document.body, 'rtl');
			this.directionService.updateDirection('ltr');
		} else if (
			isrtl === 'true' &&
				!document.getElementsByTagName('html')[0].hasAttribute('dir')
		) {
			document.getElementsByTagName('html')[0].setAttribute('dir', 'rtl');
			this.renderer.addClass(this.document.body, 'rtl');
			this.directionService.updateDirection('rtl');
		}
		localStorage.setItem('isRtl', isrtl);
		this.isRtl = event.checked;
	}

	setRTLSettings() {
		document.getElementsByTagName('html')[0].setAttribute('dir', 'rtl');
		this.renderer.addClass(this.document.body, 'rtl');
		this.isRtl = true;
		localStorage.setItem('isRtl', 'true');
	}

	setLTRSettings() {
		document.getElementsByTagName('html')[0].removeAttribute('dir');
		this.renderer.removeClass(this.document.body, 'rtl');
		this.isRtl = false;
		localStorage.setItem('isRtl', 'false');
	}
}
