import {ChangeDetectorRef, Component, Inject, OnInit, Renderer2} from '@angular/core';
import {AccountService} from './_services';
import {User} from './_models';
import {TranslateService} from "@ngx-translate/core";
import {environment} from "@environments/environment";
import {Subscription} from "rxjs";
import {LoadingService} from "@app/_services/loading.service";
import {DOCUMENT} from "@angular/common";

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrl: 'app.component.scss'
})
export class AppComponent implements OnInit {
    protected readonly environment = environment;
    protected user?: User | null;
    protected loadingSub: Subscription;
    protected loading: boolean = false;
    protected isLeftHanded = false;
    protected isDarkMode = false;

    constructor(
        private accountService: AccountService,
        private translate: TranslateService,
        private loadingService: LoadingService,
        private cdr: ChangeDetectorRef,
        private renderer: Renderer2,
        @Inject(DOCUMENT) private document: Document
    ) {
        translate.setDefaultLang('en');
        translate.use('en');
        this.accountService.user.subscribe(x => this.user = x);
        this.loadingSub = new Subscription();
        this.isLeftHanded = localStorage.getItem('isLeftHanded') === 'true';
        this.isDarkMode = localStorage.getItem('isDarkMode') === 'true';
        this.updateLeftHandedState();
        this.updateDarkModeState();
    }

    ngOnInit(): void {
        this.loadingSub = this.loadingService.getLoading().subscribe(
            loading => {
                this.loading = loading;
                // To avoid Error: NG0100
                this.cdr.detectChanges();
            }
        );
    }

    logout() {
        this.accountService.logout();
    }

    // TODO: Hilfsfunktion - entfernen
    copyTokenToClipboard() {
        const el = document.createElement('textarea');
        el.value = this.user?.token !== undefined ? this.user.token : "";
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
    }

    // For our left handed friends
    leftHanded() {
        this.isLeftHanded = !this.isLeftHanded;
        this.updateLeftHandedState();
    }

    private updateLeftHandedState() {
        if (this.isLeftHanded) {
            this.renderer.addClass(this.document.body, 'left-handed');
        } else {
            this.renderer.removeClass(this.document.body, 'left-handed');
        }

        // Save the state to localStorage
        localStorage.setItem('isLeftHanded', this.isLeftHanded.toString());
    }

    darkMode() {
        this.isDarkMode = !this.isDarkMode;
        this.updateDarkModeState();
    }

    private updateDarkModeState() {
        if (this.isDarkMode) {
            this.renderer.addClass(this.document.body, 'dark-mode');
        } else {
            this.renderer.removeClass(this.document.body, 'dark-mode');
        }

        // Save the state to localStorage
        localStorage.setItem('isDarkMode', this.isDarkMode.toString());
    }

    get buttonClassLefties(): string {
        return this.isLeftHanded ? 'btn-primary' : 'btn-secondary';
    }

    get buttonClassDarkMode(): string {
        return this.isDarkMode ? 'btn-primary' : 'btn-secondary';
    }
}