import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { SpinnerService } from '@core/services/spinner.service';
import { StaticResourceService } from '@core/services/static-resource.service';
import { FooterState } from '@core/states/footer.state';
import { ClientSettingsPages } from '@core/typings/brand.typing';
import { ColorPurpose, ColorSchemePayload, SaveBrandingForApi } from '@core/typings/branding.typing';
import { InternationalSettingsPageComponent } from '@features/client-settings/international-settings-page/international-settings-page.component';
import { Panel, PanelSection } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { isEqual } from 'lodash';
import { BrandingColorsPageComponent } from '../branding-colors-page/branding-colors-page.component';
import { ClientSettingsService } from '../client-settings.service';
import { LogoPageComponent } from '../logo-page/logo-page.component';

@Component({
  selector: 'gc-client-settings-tabs',
  templateUrl: './client-settings-tabs.component.html',
  styleUrls: ['./client-settings-tabs.component.scss']
})
export class ClientSettingsTabsComponent implements OnInit, OnDestroy {
  panelSections: PanelSection<BrandingColorsPageComponent|LogoPageComponent|InternationalSettingsPageComponent>[] = [];
  foundPanel: Panel<BrandingColorsPageComponent|LogoPageComponent|InternationalSettingsPageComponent>;
  clientSettings = this.clientSettingsService.get('clientSettings');
  hasInternational = this.clientSettings.hasInternational;
  constructor (
    private i18n: I18nService,
    private spinnerService: SpinnerService,
    private footerState: FooterState,
    private clientSettingsService: ClientSettingsService,
    private staticResourceService: StaticResourceService,
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {
    this.footerState.set('footerState', footerState.FOOTER_STATES.ACTION);
    this.footerState.set('footerAction', () => this.save());
    this.footerState.set('footerActionLabel', i18n.translate(
      'common:btnSave'
    ));
  }

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

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

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

  ngOnInit () {
    this.panelSections = [{
      name: '',
      panels: [{
        context: {
          type: ClientSettingsPages.COLORS
        },
        name: this.i18n.translate(
          'BRAND:hdrColors'
        ),
        description: '',
        icon: 'palette',
        iconClass: '',
        component: BrandingColorsPageComponent
      }, this.hasInternational ? {
        context: {
          type: ClientSettingsPages.INTERNATIONAL
        },
        name: this.i18n.translate(
          'GLOBAL:textInternational'
        ),
        description: '',
        icon: 'globe',
        iconClass: '',
        component: InternationalSettingsPageComponent
      } : null, {
        context: {
          type: ClientSettingsPages.LOGO
        },
        name: this.i18n.translate(
          'BRAND:hdrLogo'
        ),
        description: '',
        icon: 'sign',
        iconClass: '',
        component: LogoPageComponent
      }].filter((panel) => !!panel)
    }];
    const type = +this.activatedRoute.snapshot.params.type;
    this.foundPanel = this.panelSections[0].panels.find((panel) => {
      return panel.context.type === type;
    });
  }

  onPanelClick (
    panel: Partial<BrandingColorsPageComponent|LogoPageComponent|InternationalSettingsPageComponent>
  ) {
    this.router.navigate([
      `/management/configure/client-settings/${panel.type}`
    ]);
  }

  async uploadLogo () {
    if (this.configureSettingsMap.logoChanged) {
      const value = this.configureSettingsMap.file;
      const response = await this.staticResourceService.uploadManagerImage(
        value.file as File,
        value.fileName
      );

      return response.fileUrl;
    }

    return this.configureSettingsMap.logoUrl;
  }

  async save () {
    this.spinnerService.startSpinner();
    this.footerState.set('footerActionDisabled', true);
    const type = +this.activatedRoute.snapshot.params.type;
    if (type === ClientSettingsPages.INTERNATIONAL) {
      await this.saveLangs();
      await this.saveCurrencies();
    } else {
      await this.saveBranding();
    }
    this.footerState.set('footerActionDisabled', false);
    this.spinnerService.stopSpinner();
  }

  async saveBranding () {
    const colors = this.configureSettingsMap.colors;
    const logoUrl = await this.uploadLogo();
    const logoNameParts = logoUrl.split('/');
    const payload: SaveBrandingForApi = {
      brandPrimary: colors.primary,
      brandSecondary: colors.secondary,
      brandUtility: colors.utility,
      logoName: logoNameParts[logoNameParts.length - 1]
    };
    const colorScheme: ColorSchemePayload = {
      colorScheme: [{
        color: colors.chartPrimary,
        colorPurpose: ColorPurpose.ChartPrimary,
        colorPalette: colors.colorPalette
      }, {
        color: colors.chartSecondary,
        colorPurpose: ColorPurpose.ChartSecondary,
        colorPalette: colors.colorPalette
      }, {
        color: colors.chartUtility,
        colorPurpose: ColorPurpose.ChartUtility,
        colorPalette: colors.colorPalette
      }]
    };
    await this.clientSettingsService.saveBranding(payload, colorScheme);
    await this.clientSettingsService.setBranding();
  }

  async saveLangs () {
    const languages = this.configureSettingsMap.languages;
    if (!isEqual(languages, this.selectedLangs)) {
      if (!languages.includes(this.clientSettingsService.defaultLanguage)) {
        languages.push(this.clientSettingsService.defaultLanguage);
      }
      await this.clientSettingsService.updateLanguageSettings(languages);
    }
  }

  async saveCurrencies () {
    const currencies = this.configureSettingsMap.currencies;
    const clientCurrenciesFormatted = this.selectedCurrencies.map((currency) => {
      return currency.code;
    });
    if (!isEqual(clientCurrenciesFormatted, currencies)) {
      await this.clientSettingsService.updateCurrencySettings(
        currencies
      );
    }
  }

  ngOnDestroy () {
    this.footerState.set('footerState', this.footerState.FOOTER_STATES.STANDARD);
    this.footerState.set('footerAction', null);
    this.footerState.set('footerActionLabel', null);
  }

}