import { DOCUMENT } from '@angular/common';
import { Component, Inject, Renderer2 } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-auth-sign-in',
  templateUrl: './auth-sign-in.component.html',
  styleUrls: ['./auth-sign-in.component.scss'],
})
export class AuthSignInComponent {
  lang!: string;

  constructor(
    private readonly translate: TranslateService,
    private readonly renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {
    this.lang = localStorage.getItem('lang') ?? 'en';
    translate.setDefaultLang(this.lang);
    localStorage.setItem('lang', this.lang);
    this.chnageDirection();
  }
  onChangeLanguage(event: any): void {
    this.lang = event?.target?.value ?? event;
    localStorage.setItem('lang', this.lang);
    this.translate.use(this.lang);
    this.chnageDirection();
  }

  chnageDirection(): void {
    this.renderer.setAttribute(
      this.document.documentElement,
      'dir',
      this.lang === 'en' ? 'ltr' : 'rtl'
    );

    document.body.className = this.lang === 'en' ? 'body-en' : 'body-ar';
  }
}
