import { Component, Input, OnInit } from '@angular/core';
import { Select } from '@ngxs/store';
import { combineLatest, Observable, timer } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Dispatch } from '@ngxs-labs/dispatch-decorator';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { PreCheckStatus } from '@app/device-enrolment/types';
import { DeviceEnrolmentState, DeviceQrCodeState, POSPolicyChangedSuccessfully } from '@app/device-enrolment/store';
import { EDeviceStatus, ProvisioningType } from '@app/device-enrolment/constants';
import { PolicyService } from '@app/policy-v2/policy.service';
import { PolicySummaryV2Dto } from '@app/api/models/policy-summary-v-2-dto';

@UntilDestroy()
@Component({
  selector: 'mno-device-status-success',
  templateUrl: './device-status-success.component.html',
  styleUrls: ['../device-status/device-status.component.scss'],
})
export class DeviceStatusSuccessComponent implements OnInit {
  @Input() requiredError: boolean;

  @Select(DeviceEnrolmentState.preCheckStatus) preCheckStatus$!: Observable<PreCheckStatus>;
  @Select(DeviceEnrolmentState.posPolicy) posPolicy$!: Observable<null | string>;
  @Select(DeviceEnrolmentState.posSubmitted) posSubmitted$!: Observable<boolean>;
  @Select(DeviceQrCodeState.isReady) isReady$!: Observable<boolean>;
  @Select(DeviceQrCodeState.isActive) isActive$!: Observable<boolean>;

  model = '';
  modelID = '';
  policies: PolicySummaryV2Dto[];
  deviceStatus: EDeviceStatus;
  deviceStatusEnum = EDeviceStatus;
  isPolicySelectHidden: boolean = false;
  isPolicySelectDisabled: boolean = false;
  timer$ = timer(125000);

  private posPolicyInner = '';

  set posPolicy(policy: string) {
    this.posPolicyChangedSuccessfully(policy);
  }

  get posPolicy(): string {
    if(this.deviceStatus !== EDeviceStatus.NEW) {
      	this.posPolicyInner = localStorage.getItem('selectedPolicy');
    } else {
      	localStorage.setItem('selectedPolicy', this.posPolicyInner);
    }
    return this.posPolicyInner;
  }

  constructor(private policyService: PolicyService) {}

  @Dispatch()
  public posPolicyChangedSuccessfully(policy: string) {
    return new POSPolicyChangedSuccessfully(policy);
  }

  ngOnInit() {
    this.preCheckStatus$.pipe(untilDestroyed(this)).subscribe(preCheckStatus => {
      this.model = preCheckStatus.tac.modelMarketingName;
      this.modelID = preCheckStatus.tac.modelFormalName;

      this.policies = [...preCheckStatus.policies]
        .map((policy: PolicySummaryV2Dto) => ({
          id: policy.id,
          name: this.policyService.translateFromLocaleEntity(policy.names),
        }))
        .sort((a: { id: string; name: string }, b: { id: string; name: string }) =>
          new Intl.Collator(undefined, { caseFirst: 'upper' }).compare(a.name, b.name)
        );
      
      // this.policies does not include archived policies
      const selectedPolicy = this.policies.find(p => p.id === preCheckStatus.defaultPolicy.id);
      const selectedPolicyId = selectedPolicy?.id || '';

      this.posPolicyChangedSuccessfully(selectedPolicyId);
      
      this.deviceStatus = preCheckStatus.deviceStatus as EDeviceStatus;

      this.setPolicySelectVisibilityState({ deviceStatus: this.deviceStatus, preCheckStatus });
    });

    this.posPolicy$.pipe(untilDestroyed(this)).subscribe(policy => {
        this.posPolicyInner = policy;
    });

    combineLatest([this.isActive$, this.isReady$, this.posSubmitted$, this.preCheckStatus$])
      .pipe(untilDestroyed(this))
      .subscribe(([isActive, isReady, posSubmitted, preCheckStatus]) => {
        let isRegistrationCompleted: boolean = false;
        let isRegisteredButNotReady: boolean = false;

        switch (preCheckStatus.tac.provisioningType) {
          case ProvisioningType.ALPS:
            isRegistrationCompleted = isActive && isReady && posSubmitted;
            break;
          default:
            isRegistrationCompleted = isReady && posSubmitted;
            isRegisteredButNotReady = !isReady && posSubmitted;
        }

        if(isRegistrationCompleted) {
          this.deviceStatus = EDeviceStatus.REGISTRATION_COMPLETED;
        } else if(isRegisteredButNotReady) {
          this.deviceStatus = EDeviceStatus.REGISTERED_BUT_NOT_READY;
        }
      
      	this.setPolicySelectVisibilityState({ deviceStatus: this.deviceStatus, preCheckStatus });
      });
    
      this.isReady$
        .pipe(takeUntil(this.timer$))
        .subscribe(isReady => {
      	if(this.deviceStatus !== EDeviceStatus.NEW && isReady) {
        	this.deviceStatus = EDeviceStatus.REGISTRATION_COMPLETED;
        }
      });
  }

  private setPolicySelectVisibilityState({ deviceStatus, preCheckStatus }): void {
    let hiddenState: boolean = false;
    let disabledState: boolean = false;

    if (preCheckStatus) {
      const knoxGuardProvisioningType: boolean = preCheckStatus.tac.provisioningType === ProvisioningType.KNOX_GUARD;
      const hidePolicyForSamsung: boolean =
        [EDeviceStatus.ACTIVE, EDeviceStatus.REGISTERED].includes(preCheckStatus.deviceStatus as EDeviceStatus) && knoxGuardProvisioningType;
      const hidePolicyForALps: boolean = deviceStatus === EDeviceStatus.REGISTRATION_COMPLETED;

      hiddenState = hidePolicyForSamsung || hidePolicyForALps;
      disabledState =  deviceStatus === EDeviceStatus.REGISTERED_BUT_NOT_READY || [EDeviceStatus.ACTIVE, EDeviceStatus.REGISTERED].includes(preCheckStatus.deviceStatus as EDeviceStatus);
    }

    this.isPolicySelectHidden = hiddenState;
	this.isPolicySelectDisabled = disabledState;
  }
}