import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe';

@Component({
  selector: 'app-project-editor-languages-section',
  standalone: true,
  imports: [FormsModule, TranslatePipe],
  templateUrl: './languages-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorLanguagesSectionComponent {
  private readonly facade = inject(ProjectEditorFacade);
  readonly bootstrap = this.facade.bootstrap;
  readonly locales = computed(() => this.bootstrap()?.localization.supportedLocales ?? []);
  readonly defaultLocale = computed(() => this.bootstrap()?.localization.defaultLocale ?? '');
  readonly newLocale = signal('');

  updateNewLocale(value: string): void {
    this.newLocale.set(value);
  }

  addLocale(): void {
    const code = this.newLocale().trim();
    if (!code) {
      return;
    }
    this.facade.addLocale(code);
    this.newLocale.set('');
  }

  removeLocale(code: string): void {
    this.facade.removeLocale(code);
  }

  setDefault(code: string): void {
    this.facade.setDefaultLocale(code);
  }
}