marketplaces/src/app/features/project-editor/sections/languages-section.component.ts

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';
import { TranslateService } from '../../../i18n/translate.service';
import { ButtonComponent } from '../../../shared/ui/button/button.component';
import { InputComponent } from '../../../shared/ui/input/input.component';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { LocaleTabsComponent } from '../../../shared/ui/locale-tabs/locale-tabs.component';

@Component({
  selector: 'app-project-editor-languages-section',
  standalone: true,
  imports: [FormsModule, TranslatePipe, ButtonComponent, InputComponent, SectionCardComponent, LocaleTabsComponent],
  templateUrl: './languages-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorLanguagesSectionComponent {
  private readonly facade = inject(ProjectEditorFacade);
  private readonly translate = inject(TranslateService);
  readonly bootstrap = this.facade.bootstrap;
  readonly fieldError = (key: string): string | null => {
    const messageKey = this.facade.fieldError(key);
    return messageKey ? this.translate.t(messageKey) : null;
  };
  readonly locales = computed(() => this.bootstrap()?.localization.supportedLocales ?? []);
  readonly defaultLocale = computed(() => this.bootstrap()?.localization.defaultLocale ?? '');
  readonly supportedLocales = computed(() => this.bootstrap()?.tenant.supportedLocales ?? []);
  readonly tenantDefaultLocale = computed(() => this.bootstrap()?.tenant.defaultLocale ?? '');
  readonly activeLocale = signal<string | null>(null);
  readonly newLocale = signal('');

  onActiveLocaleChange(locale: string): void {
    this.activeLocale.set(locale);
  }

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

  readonly addLocaleError = signal<string | null>(null);

  addLocale(): void {
    const code = this.newLocale().trim().toLowerCase();
    if (!code) {
      return;
    }
    if (this.locales().includes(code)) {
      this.addLocaleError.set(this.translate.t('builder.languageAlreadyAdded'));
      return;
    }
    this.facade.addLocale(code);
    this.newLocale.set('');
    this.addLocaleError.set(null);
  }

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

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