import { ChangeDetectionStrategy, Component, OnInit, ViewContainerRef } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';
import { accountTranslations } from '@translations/account-translations';
import { NgClass, NgIf } from '@angular/common';
import { AccountSideNavComponent } from '../account-side-nav/account-side-nav.component';
import { TranslateModule } from '@ngx-translate/core';

@Component({
    selector: 'redaction-base-account-screen',
    templateUrl: './base-account-screen-component.html',
    styleUrls: ['./base-account-screen-component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [NgClass, NgIf, RouterOutlet, AccountSideNavComponent, TranslateModule],
})
export class BaseAccountScreenComponent implements OnInit {
    readonly translations = accountTranslations;
    readonly path: string;
    readonly isWarningsScreen: boolean;

    constructor(
        private readonly _router: Router,
        private readonly _hostRef: ViewContainerRef,
    ) {
        this.path = this._router.url.split('/').pop();
        this.isWarningsScreen = this.path === 'warnings-preferences';
    }

    ngOnInit(): void {
        this.#setDialogWidth();
    }

    #setDialogWidth() {
        const element = this._hostRef.element.nativeElement as HTMLElement;
        element.style.setProperty('--width', this.path === 'user-profile' ? 'unset' : '100%');
    }
}
