import { Location } from '@angular/common';
import { Component, Inject, NgZone } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { PreferenceKey, RouterLinks } from '@app/app/app.constant';
import { Map } from '@app/app/telemetryutil';
import { AppHeaderService } from '@app/services/app-header.service';
import { CommonUtilService } from '@app/services/common-util.service';
import { NotificationService } from '@app/services/notification.service';
import {
  AuditProps, AuditType, CorReleationDataType, Environment, ID, ImpressionType, InteractSubtype,
  InteractType, PageId
} from '@app/services/telemetry-constants';
import { TelemetryGeneratorService } from '@app/services/telemetry-generator.service';
import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions/ngx';
import { Platform } from '@ionic/angular';
import { Events } from '@app/util/events';
import { TranslateService } from '@ngx-translate/core';
import { Subscription } from 'rxjs';
import { AuditState, CorrelationData, SharedPreferences } from 'sunbird-sdk';
import { TagPrefixConstants } from '@app/services/segmentation-tag/segmentation-tag.service';
import { OnboardingConfigurationService } from '@app/services';

export interface ILanguages {
  label: string;
  code: string;
  isApplied: boolean;
  name: string;
}
@Component({
  selector: 'page-language-settings',
  templateUrl: 'language-settings.html',
  styleUrls: ['./language-settings.scss']
})
export class LanguageSettingsPage {

  languages: Array<ILanguages> = [];
  language: string;
  isLanguageSelected = false;
  isFromSettings = false;
  previousLanguage: any;
  selectedLanguage: any = {};
  tappedLanguage: string;
  btnColor = '#8FC4FF';
  unregisterBackButton: Subscription;
  headerConfig: any;
  headerObservable: any;
  appName = '';

  constructor(
    @Inject('SHARED_PREFERENCES') private preferences: SharedPreferences,
    public translateService: TranslateService,
    private events: Events,
    private zone: NgZone,
    private telemetryGeneratorService: TelemetryGeneratorService,
    public platform: Platform,
    private commonUtilService: CommonUtilService,
    private headerService: AppHeaderService,
    private notification: NotificationService,
    private router: Router,
    private location: Location,
    private activatedRoute: ActivatedRoute,
    private nativePageTransitions: NativePageTransitions,
    private onboardingConfigurationService: OnboardingConfigurationService
  ) { }

  ionViewDidEnter() {
    this.activatedRoute.params.subscribe(async params => {
      this.isFromSettings = Boolean(params['isFromSettings']);
      if (!this.isFromSettings) {
        this.headerService.hideHeader();
      } else {
        this.headerService.showHeaderWithBackButton();
      }
    });
  }

  handleBackButton() {
    this.unregisterBackButton = this.platform.backButton.subscribeWithPriority(10, () => {
      this.telemetryGeneratorService.generateInteractTelemetry(
        InteractType.TOUCH, InteractSubtype.DEVICE_BACK_CLICKED,
        this.isFromSettings ? Environment.SETTINGS : Environment.ONBOARDING,
        this.isFromSettings ? PageId.SETTINGS_LANGUAGE : PageId.ONBOARDING_LANGUAGE_SETTING,
      );
      if (this.isFromSettings) {
        this.location.back();
      } else {
        if (this.platform.is('ios')) {
          this.headerService.showHeaderWithHomeButton();
        } else {
          this.commonUtilService.showExitPopUp(PageId.ONBOARDING_LANGUAGE_SETTING, Environment.ONBOARDING, false);
        }
      }
    });
  }

  async ionViewWillEnter() {
    const params = this.activatedRoute.snapshot.params;

    this.isFromSettings = Boolean(params['isFromSettings']);

    if (!this.isFromSettings) {
      this.headerService.hideHeader();
    } else {
      this.headerService.showHeaderWithBackButton();
    }

    this.appName = await this.commonUtilService.getAppName();

    if (this.router.url === '/' + RouterLinks.LANGUAGE_SETTING || this.router.url === '/' + RouterLinks.LANGUAGE_SETTING + '/' + 'true') {
      setTimeout(() => {
        /* New Telemetry */
        this.telemetryGeneratorService.generatePageLoadedTelemetry(
          this.isFromSettings ? PageId.SETTINGS_LANGUAGE : PageId.LANGUAGE,
          this.isFromSettings ? Environment.SETTINGS : Environment.ONBOARDING
        );

        this.telemetryGeneratorService.generateImpressionTelemetry(
          ImpressionType.VIEW, '',
          this.isFromSettings ? PageId.SETTINGS_LANGUAGE : PageId.ONBOARDING_LANGUAGE_SETTING,
          this.isFromSettings ? Environment.SETTINGS : Environment.ONBOARDING,
        );
      }, 350);
    }

    this.selectedLanguage = {};
    this.init();
    this.headerObservable = this.headerService.headerEventEmitted$.subscribe(eventName => {
      this.handleHeaderEvents(eventName);
    });
    this.handleBackButton();
  }

  ionViewWillLeave() {
    if (this.isLanguageSelected) {
      if (!this.selectedLanguage.code) {
        if (this.previousLanguage) {
          this.translateService.use(this.previousLanguage);
        } else {
          this.translateService.use('en');
        }
      }
    }
    if (this.headerObservable) {
      this.headerObservable.unsubscribe();
    }
    if (this.unregisterBackButton) {
      this.unregisterBackButton.unsubscribe();
    }
  }

  init(): void {
    this.languages = this.onboardingConfigurationService.getOnboardingConfig('language-setting').data;

    this.zone.run(() => {
      this.preferences.getString(PreferenceKey.SELECTED_LANGUAGE_CODE).toPromise()
        .then(val => {
          if (Boolean(val)) {
            this.previousLanguage = val;
            this.language = val;
          } else {
            this.previousLanguage = undefined;
          }
        });
    });

  }

  /**
   * It will set app language
   */
  onLanguageSelected() {
    /* New Telemetry */
    const cData: CorrelationData[] = [{
      id: this.language,
      type: CorReleationDataType.NEW_VALUE
    }];
    if (this.tappedLanguage) {
      cData.push({ id: this.tappedLanguage, type: CorReleationDataType.OLD_VALUE });
    }
    this.telemetryGeneratorService.generateInteractTelemetry(
      InteractType.SELECT_LANGUAGE, '',
      this.isFromSettings ? Environment.SETTINGS : Environment.ONBOARDING,
      PageId.LANGUAGE,
      undefined,
      undefined,
      undefined,
      cData
    );
    this.tappedLanguage = this.language;
    if (this.language) {
      this.zone.run(() => {
        this.translateService.use(this.language);
        this.btnColor = '#006DE5';
        this.isLanguageSelected = true;
      });
    } else {
      this.btnColor = '#8FC4FF';
    }
  }

  generateLanguageFailedInteractEvent() {
    this.telemetryGeneratorService.generateInteractTelemetry(
      InteractType.DISABLED,
      '',
      Environment.ONBOARDING,
      PageId.ONBOARDING_LANGUAGE_SETTING,
      undefined,
      undefined,
      undefined,
      undefined,
      ID.CONTINUE_CLICKED
    );
    /* New Telemetry */
    this.telemetryGeneratorService.generateInteractTelemetry(
      InteractType.SELECT_CONTINUE,
      InteractSubtype.FAIL,
      Environment.ONBOARDING,
      PageId.LANGUAGE
    );
  }


  generateLanguageSuccessInteractEvent(previousLanguage: string, currentLanguage: string) {
    const valuesMap = new Map();
    valuesMap['previousLanguage'] = previousLanguage ? previousLanguage : '';
    valuesMap['currentLanguage'] = currentLanguage;
    this.telemetryGeneratorService.generateInteractTelemetry(
      InteractType.TOUCH,
      InteractSubtype.LANGUAGE_SETTINGS_SUCCESS,
      this.isFromSettings ? Environment.SETTINGS : Environment.ONBOARDING,
      this.isFromSettings ? PageId.SETTINGS_LANGUAGE : PageId.ONBOARDING_LANGUAGE_SETTING,
      undefined,
      valuesMap
    );
    /* New Telemetry */
    const cData: CorrelationData[] = [{
      id: currentLanguage,
      type: CorReleationDataType.NEW_VALUE
    }];
    this.telemetryGeneratorService.generateInteractTelemetry(
      InteractType.SELECT_CONTINUE,
      InteractSubtype.SUCCESS,
      this.isFromSettings ? Environment.SETTINGS : Environment.ONBOARDING,
      this.isFromSettings ? PageId.SETTINGS_LANGUAGE : PageId.LANGUAGE,
      undefined,
      undefined,
      undefined,
      cData
    );
  }

  generateClickInteractEvent(selectedLanguage: string, interactSubType) {
    const valuesMap = new Map();
    valuesMap['selectedLanguage'] = selectedLanguage;
    this.telemetryGeneratorService.generateInteractTelemetry(
      InteractType.TOUCH,
      interactSubType,
      this.isFromSettings ? Environment.SETTINGS : Environment.ONBOARDING,
      this.isFromSettings ? PageId.SETTINGS_LANGUAGE : PageId.ONBOARDING_LANGUAGE_SETTING,
      undefined,
      valuesMap
    );
  }

  continue() {
    // if language is not null, then select the checked language,
    // else set default language as english
    if (this.isLanguageSelected) {
      this.generateClickInteractEvent(this.language, InteractSubtype.CONTINUE_CLICKED);
      this.generateLanguageSuccessInteractEvent(this.previousLanguage, this.language);

      if (this.language) {
        this.selectedLanguage = this.languages.find(i => i.code === this.language);
        window['segmentation'].SBTagService.pushTag([this.selectedLanguage.code], TagPrefixConstants.USER_LANG, true);
        this.preferences.putString(PreferenceKey.SELECTED_LANGUAGE_CODE, this.selectedLanguage.code).toPromise();
        this.preferences.putString(PreferenceKey.SELECTED_LANGUAGE, this.selectedLanguage.label).toPromise();
        this.translateService.use(this.language);
      }
      this.events.publish('onAfterLanguageChange:update', {
        selectedLanguage: this.language
      });
      this.notification.setupLocalNotification(this.language);
      const corRelationList: Array<CorrelationData> = [
        { id: PageId.LANGUAGE, type: CorReleationDataType.FROM_PAGE }
      ];
      corRelationList.push({ id: this.language || '', type: CorReleationDataType.LANGUAGE });
      this.telemetryGeneratorService.generateAuditTelemetry(
        this.isFromSettings ? Environment.SETTINGS : Environment.ONBOARDING,
        AuditState.AUDIT_UPDATED,
        [AuditProps.LANGUAGE],
        AuditType.SET_LANGUAGE,
        undefined,
        undefined,
        undefined,
        corRelationList
      );
      if (this.isFromSettings) {
        this.location.back();
      } else {
        const options: NativeTransitionOptions = {
          direction: 'up',
          duration: 500,
          androiddelay: 500,
          iosdelay: 500,
          fixedPixelsTop: 0,
          fixedPixelsBottom: 0
        };
        this.nativePageTransitions.slide(options);
        this.router.navigate([RouterLinks.USER_TYPE_SELECTION]);
        this.preferences.putBoolean(PreferenceKey.IS_NEW_USER, true).toPromise();
      }
    } else {
      this.generateLanguageFailedInteractEvent();

      this.btnColor = '#8FC4FF';

      const parser = new DOMParser();
      const translatedString = this.commonUtilService.translateMessage('PLEASE_SELECT_A_LANGUAGE');
      const dom = parser.parseFromString(`<!doctype html><body>&#9432; ${translatedString}`, 'text/html');

      this.commonUtilService.showToast(dom.body.textContent, false, 'redErrorToast');
    }
  }

  handleHeaderEvents($event) {
    if ($event.name === 'back') {
      this.telemetryGeneratorService.generateBackClickedTelemetry(
        this.isFromSettings ? PageId.SETTINGS_LANGUAGE : PageId.ONBOARDING_LANGUAGE_SETTING,
        this.isFromSettings ? Environment.SETTINGS : Environment.ONBOARDING,
        true);
      this.location.back();
    }
  }
}