/* eslint-disable @angular-eslint/prefer-on-push-component-change-detection */
import { Component, effect, ElementRef, Input, OnDestroy, OnInit, viewChild } from '@angular/core';
import { MatIcon } from '@angular/material/icon';
import { HelpModeService } from '../help-mode.service';
import { MatTooltip } from '@angular/material/tooltip';
import { TranslateService } from '@ngx-translate/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';

@Component({
    selector: 'iqser-help-button',
    templateUrl: './help-button.component.html',
    styleUrls: ['./help-button.component.scss'],
    standalone: true,
    imports: [MatIcon, MatTooltip],
})
export class HelpButtonComponent implements OnInit, OnDestroy {
    #helpModeHasBeenActivated = false;
    readonly helpModeButton = viewChild.required<ElementRef>('helpModeButton');
    @Input() dialogButton = true;

    constructor(
        private readonly _elementRef: ElementRef,
        private readonly _translateService: TranslateService,
        readonly helpModeService: HelpModeService,
    ) {
        effect(() => {
            if (this.helpModeService.isHelpModeActive()) {
                this.#helpModeHasBeenActivated = true;
                this.#applyActiveButtonStyles();
            } else if (this.#helpModeHasBeenActivated) {
                this.#applyInactiveButtonStyles();
            }
        });
    }

    get buttonTooltip() {
        const translation = this.helpModeService.isHelpModeActive() ? _('help-button.disable') : _('help-button.enable');
        return this._translateService.instant(translation);
    }

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

    ngOnDestroy() {
        if (this.dialogButton) {
            const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
            defaultButton.style.removeProperty('z-index');
            if (!this.helpModeService.isHelpModeActive()) {
                document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0]?.removeChild(this.helpModeButton().nativeElement);
            }
        }
    }

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

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

    #applyInactiveButtonStyles() {
        setTimeout(() => {
            this.helpModeButton().nativeElement.style.setProperty('position', 'relative');
            this.helpModeButton().nativeElement.style.setProperty('top', 'unset');
            this.helpModeButton().nativeElement.style.setProperty('left', 'unset');
            document.body.removeChild(this.helpModeButton().nativeElement);
            document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0]?.appendChild(this.helpModeButton().nativeElement);
        }, 500);
    }
}