import { Component, OnInit } from '@angular/core';
import { CurrencyService } from '@core/services/currency.service';
import { TranslationService } from '@core/services/translation.service';
import { ClientSettingsPages } from '@core/typings/brand.typing';
import { InternationalSettingsSections } from '@core/typings/branding.typing';
import { AccordionStyle, ArrayHelpersService, PanelTypes, SelectOption, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { ClientSettingsService } from '../client-settings.service';
interface LanguagesGroup {
  languages: string[];
}
interface CurrencyGroup {
  currencies: string[];
}

@Component({
  selector: 'gc-international-settings-page',
  templateUrl: 'international-settings-page.component.html',
  styleUrls: ['international-settings-page.component.scss']
})
export class InternationalSettingsPageComponent implements OnInit {
  type = ClientSettingsPages.COLORS;
  PanelTypes = PanelTypes;
  AccordionStyle = AccordionStyle;
  languagesFormGroup: TypeSafeFormGroup<LanguagesGroup>;
  currencyFormGroup: TypeSafeFormGroup<CurrencyGroup>;
  InternationalSettingsSections = InternationalSettingsSections;
  languagesText = this.i18n.translate(
    'BRAND:textLanguages',
    {},
    'Languages'
  );
  currencyText = this.i18n.translate(
    'common:textCurrency',
    {},
    'Currency'
  );
  languageOptions: SelectOption<string>[];
  currencyOptions: SelectOption<string>[];
  sections = [{
    name: this.languagesText,
    section: InternationalSettingsSections.LANGUAGES,
    description: this.i18n.translate(
      'BRAND:textSupportedLanguagesForTranslations',
      {},
      'Supported languages for translations'
    )
  }, {
    name: this.currencyText,
    section: InternationalSettingsSections.CURRENCY,
    description: this.i18n.translate(
      'BRAND:textSupportedCurrenciesAcrossApplicationsAwardsPayments',
      {},
      'Supported currencies across applications, awards, and payments'
    )
  }];
  numberLangsSelected = '';
  numberCurrenciesSelected = '';
  maxPerColumnLang: number;
  maxPerColumnCurrency: number;
  defaultCurrency = this.clientSettingsService.defaultCurrency;
  defaultCurrencyName: string;
  defaultLanguage = this.clientSettingsService.defaultLanguage;
  defaultLanguageName: string;
  formattingData = this.currencyService.formattingData;

  get configureSettingsMap () {
    return this.clientSettingsService.configureSettingsMap;
  }

  get selectedCurrencies () {
    return this.clientSettingsService.selectedCurrenciesForForm;
  }

  get selectedLanguages () {
    return this.clientSettingsService.selectedLanguages;
  }

  get allCurrencies () {
    return this.clientSettingsService.currencies;
  }

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private i18n: I18nService,
    private clientSettingsService: ClientSettingsService,
    private arrayHelper: ArrayHelpersService,
    private currencyService: CurrencyService,
    private translationService: TranslationService
  ) { }

  ngOnInit () {
    const foundCurrency = this.allCurrencies.find((curr) => {
      return curr.code === this.defaultCurrency;
    });
    this.defaultCurrencyName = foundCurrency.displayName;
    this.currencyOptions = this.arrayHelper.sort(
      this.clientSettingsService.currencies.map((currency) => {
        return {
          display: this.i18n.translate(
            'currencies' + ':lblCurrencyOption' + currency.code,
            {},
            currency.code + ' (' + currency.displayName + ')'
          ),
          value: currency.code
        };
      }).filter((curr) => {
        return curr.value !== this.defaultCurrency &&
          curr.value in this.formattingData;
      }),
      'display'
    );
    this.languageOptions = this.arrayHelper.sort(
      this.clientSettingsService.langKeys.map((lang) => {
        const display = this.translationService.translateLanguageName(lang);
        if (lang === this.defaultLanguage) {
          this.defaultLanguageName = display;
        }

        return {
          display,
          value: lang
        };
      }).filter((lang) => {
        return lang.value !== this.defaultLanguage;
      }),
      'display'
    );
    // this sets the max per column based on the number of options
    this.maxPerColumnLang = Math.ceil(this.languageOptions.length / 4);
    this.maxPerColumnCurrency = Math.ceil(this.currencyOptions.length / 3);
    const languages = this.selectedLanguages.filter((lang) => lang !== this.defaultLanguage);
    this.languagesFormGroup = this.formBuilder.group({
      languages: [languages]
    });
    const initialCurrencyValue = this.selectedCurrencies.filter((curr) => {
      return curr !== this.defaultCurrency;
    });
    this.currencyFormGroup = this.formBuilder.group({
      currencies: [initialCurrencyValue]
    });
    this.updateConfigureMap();
   }

   updateConfigureMap () {
     // add 1 for default currenty/lang not included in form group
     const numberLangs = this.languagesFormGroup.value.languages.length + 1;
     const numberCurrencies = this.currencyFormGroup.value.currencies.length + 1;
     this.numberLangsSelected = numberLangs !== 1 ? this.i18n.translate(
       'GLOBAL:textNumberLanguages',
       {
         number: numberLangs
       },
       '__number__ languages'
     ) : this.i18n.translate(
       'GLOBAL:textOneLanguage',
       {},
       '1 language'
     );
     this.numberCurrenciesSelected = numberCurrencies !== 1 ? this.i18n.translate(
       'BRAND:textNumberCurrencies',
       {
         number: numberCurrencies
       },
       '__number__ currencies'
     ) : this.i18n.translate(
       'BRAND:textOneCurrency',
       {},
       '1 currency'
     );

      this.clientSettingsService.setConfigureMap({
        ...this.configureSettingsMap,
        languages: this.languagesFormGroup.value.languages.concat(this.defaultLanguage),
        currencies: this.currencyFormGroup.value.currencies.concat(this.defaultCurrency)
      });
   }
}