import { DOCUMENT } from '@angular/common';
import {
	Component,
	Inject,
	ElementRef,
	OnInit,
	AfterViewInit,
	Renderer2,
	ChangeDetectionStrategy,
} 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';

@Component({
	changeDetection: ChangeDetectionStrategy.OnPush,
	selector: 'app-right-sidebar',
	templateUrl: './right-sidebar.component.html',
	styleUrls: ['./right-sidebar.component.scss'],
})
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
	) {
		super();
	}

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

	ngAfterViewInit() {
		// set header color on startup
		if (localStorage.getItem('choose_skin')) {
			this.renderer.addClass(
				this.document.body,
				localStorage.getItem('choose_skin') as string
			);
			this.selectedBgColor = localStorage.getItem(
				'choose_skin_active'
			) as string;
		} else {
			this.renderer.addClass(
				this.document.body,
				'theme-' + this.config.layout.theme_color
			);
			this.selectedBgColor = this.config.layout.theme_color;
		}

		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;
		}

		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();
			}
		}
	}

	selectTheme(e: string) {
		this.selectedBgColor = e;
		const prevTheme = this.elementRef.nativeElement
			.querySelector('.settingSidebar .choose-theme li.active')
			.getAttribute('data-theme');
		this.renderer.removeClass(this.document.body, 'theme-' + prevTheme);
		this.renderer.addClass(this.document.body, 'theme-' + this.selectedBgColor);
		localStorage.setItem('choose_skin', 'theme-' + this.selectedBgColor);
		localStorage.setItem('choose_skin_active', this.selectedBgColor);
	}

	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');
		const menuOption = 'menu_light';
		localStorage.setItem('choose_logoheader', 'logo-white');
		localStorage.setItem('menuOption', menuOption);
	}

	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');
		const menuOption = 'menu_dark';
		localStorage.setItem('choose_logoheader', 'logo-black');
		localStorage.setItem('menuOption', menuOption);
	}

	lightThemeBtnClick() {
		this.renderer.removeClass(this.document.body, 'dark');
		this.renderer.removeClass(this.document.body, 'submenu-closed');
		this.renderer.removeClass(this.document.body, 'menu_dark');
		this.renderer.removeClass(this.document.body, 'logo-black');
		if (localStorage.getItem('choose_skin')) {
			this.renderer.removeClass(
				this.document.body,
				localStorage.getItem('choose_skin') as string
			);
		} else {
			this.renderer.removeClass(
				this.document.body,
				'theme-' + this.config.layout.theme_color
			);
		}

		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');
		const theme = 'light';
		const menuOption = 'menu_light';
		this.selectedBgColor = 'white';
		this.isDarkSidebar = false;
		localStorage.setItem('choose_logoheader', 'logo-white');
		localStorage.setItem('choose_skin', 'theme-white');
		localStorage.setItem('theme', theme);
		localStorage.setItem('menuOption', menuOption);
	}

	darkThemeBtnClick() {
		this.renderer.removeClass(this.document.body, 'light');
		this.renderer.removeClass(this.document.body, 'submenu-closed');
		this.renderer.removeClass(this.document.body, 'menu_light');
		this.renderer.removeClass(this.document.body, 'logo-white');
		if (localStorage.getItem('choose_skin')) {
			this.renderer.removeClass(
				this.document.body,
				localStorage.getItem('choose_skin') as string
			);
		} else {
			this.renderer.removeClass(
				this.document.body,
				'theme-' + this.config.layout.theme_color
			);
		}
		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');
		const theme = 'dark';
		const menuOption = 'menu_dark';
		this.selectedBgColor = 'black';
		this.isDarkSidebar = true;
		localStorage.setItem('choose_logoheader', 'logo-black');
		localStorage.setItem('choose_skin', 'theme-black');
		localStorage.setItem('theme', theme);
		localStorage.setItem('menuOption', menuOption);
	}

	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');
	}
}