import { Injectable } from '@angular/core';
import { UserPreferenceService } from '@users/user-preference.service';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { TranslateService } from '@ngx-translate/core';
import { PdfViewer } from './pdf-viewer.service';
import { REDDocumentViewer } from './document-viewer.service';
import { HeaderElements } from '../../file-preview/utils/constants';

@Injectable()
export class TooltipsService {
    constructor(
        private readonly _pdf: PdfViewer,
        private readonly _documentViewer: REDDocumentViewer,
        private readonly _userPreferenceService: UserPreferenceService,
        private readonly _translateService: TranslateService,
    ) {}

    get toggleTooltipsBtnTitle(): string {
        return this._translateService.instant(_('pdf-viewer.toggle-tooltips'), {
            active: this._userPreferenceService.getFilePreviewTooltipsPreference(),
        });
    }

    async toggleTooltips(): Promise<void> {
        await this._userPreferenceService.toggleFilePreviewTooltipsPreference();
        this._documentViewer.updateTooltipsVisibility();

        this.updateIconState();

        this._pdf.instance.UI.updateElement(HeaderElements.TOGGLE_TOOLTIPS, {
            title: this.toggleTooltipsBtnTitle,
        });
    }

    updateIconState() {
        const element = this._pdf.instance.UI.iframeWindow.document.querySelector(`[data-element=${HeaderElements.TOGGLE_TOOLTIPS}]`);
        if (this._userPreferenceService.getFilePreviewTooltipsPreference()) {
            element.classList.add('active');
        } else {
            element.classList.remove('active');
        }
    }
}
