import { Component } from '@angular/core';
import { TranslationLoaderService } from './translation-loader.service';
import { take } from 'rxjs/operators';

export enum LanguageTypes {
  Nl = 'Nl',
  Fr = 'Fr',
  De = 'De'
}

export interface LanguageSelector {
  shortHand: string;
  title: string;
  button: string;
}

export interface LanguageSelectors {
  [key: string]: LanguageSelector;
}

@Component({
  selector: `portal-lang-select-view`,
  template: `
    <div fxLayout="row" fxLayoutAlign="space-evenly center " fxLayoutGap="30px" class="pt4">
      <div fxFlex class="mat-elevation-z1 sticker-card" *ngFor="let language of languageSelectors">
        <div class="bg-blue">
          {{language.shortHand}}
        </div>
        <mat-card fxFlex matElevation="0">
          <mat-card-content>
            <div fxLayoutAlign="space-between stretch">
              <div class="card-header-title">{{language.title}}</div>
            </div>
          </mat-card-content>
          <mat-card-actions fxLayout="row" fxLayoutAlign="end stretch">
            <button mat-button type="button" class="text-upper" (click)="setLang(language)">
              {{language.button}}
              <mat-icon>keyboard_arrow_right</mat-icon>
            </button>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>
  `
})
export class PortalLangSelectView {
  public languageSelectors: LanguageSelectors = {
    [LanguageTypes.Nl]: { shortHand: 'NL', title: 'Nederlands', button: 'Ga verder' },
    [LanguageTypes.Fr]: { shortHand: 'FR', title: 'Français', button: 'Continuer' },
    [LanguageTypes.De]: { shortHand: 'DE', title: 'Deutsch', button: 'Weiter' }
  };

  setLang(lang: LanguageSelector) {
    // set the lang application wide here
  }
}