import {Component, EventEmitter, Output} from "@angular/core";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {Lang} from "../idek/lang";


@Component({
  standalone: true,
  selector: "app-currency",
  imports: [
    ReactiveFormsModule,
    FormsModule
  ],
  template: `
    <select [ngModel]="currency" (ngModelChange)="setCurrency($event)">
      @for (currency of currencies; track currency.code) {
        <option value="{{currency.name}}">{{ currency.name }}</option>
      }
    </select>
  `
})
export class CurrencyComponent {

  @Output()
  public currency: EventEmitter<Lang> = new EventEmitter();

  public currencies: Lang[] = [
    {
      name: 'de',
      code: 'de-DE',
      currency: 'EUR'
    },
    {
      name: 'en',
      code: 'en-US',
      currency: 'USD'
    },
    {
      name: 'jap',
      code: 'ja-JP',
      currency: 'JPY'
    },
    {
      name: 'cn',
      code: 'cn-CN',
      currency: 'CNY'
    }
  ]

  public setCurrency(currencyInput: string): void {
    for (const currency of this.currencies) {
      if (currency.name === currencyInput) {
        this.currency.emit(currency);
        break;
      }
    }
  }
}