/* eslint-disable @angular-eslint/prefer-on-push-component-change-detection */
import { AfterViewInit, Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
import { HelpModeService } from '../index';

@Component({
    selector: 'iqser-help-button',
    templateUrl: './help-button.component.html',
    styleUrls: ['./help-button.component.scss'],
})
export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy {
    @Input() dialogButton = true;
    helpModeButton: HTMLElement;

    constructor(
        private readonly _elementRef: ElementRef,
        readonly helpModeService: HelpModeService,
    ) {}

    get buttonId() {
        return `help-mode-button${this.dialogButton ? '-dialog' : ''}`;
    }

    ngOnInit() {
        if (this.dialogButton) {
            const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
            defaultButton.style.setProperty('z-index', '100');
        }
    }

    ngAfterViewInit() {
        const currentComponent = this._elementRef.nativeElement;
        this.helpModeButton = currentComponent.querySelector('.help-mode-slide-toggle');

        if (this.helpModeButton) {
            setTimeout(() => {
                const currentComponentRect = currentComponent.getBoundingClientRect();
                this.helpModeButton.style.setProperty('position', 'absolute');
                this.helpModeButton.style.setProperty('top', `${currentComponentRect.top}px`);
                this.helpModeButton.style.setProperty('left', `${currentComponentRect.left}px`);
                document.body.appendChild(this.helpModeButton);
            }, 500);
        }
    }

    ngOnDestroy() {
        document.body.removeChild(this.helpModeButton);
        if (this.dialogButton) {
            const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
            defaultButton.style.removeProperty('z-index');
        }
    }

    toggleHelpMode(): void {
        if (this.helpModeService.isHelpModeActive) {
            this.helpModeService.deactivateHelpMode();
            return;
        }
        this.helpModeService.activateHelpMode(this.dialogButton);
    }

    @HostListener('window:resize', ['$event'])
    onResize() {
        const currentComponent = this._elementRef.nativeElement;
        const currentComponentRect = currentComponent.getBoundingClientRect();
        this.helpModeButton.style.setProperty('top', `${currentComponentRect.top}px`);
        this.helpModeButton.style.setProperty('left', `${currentComponentRect.left}px`);
    }
}