import {
  Component,
  OnInit,
  OnDestroy,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Input
} from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Subject, combineLatest } from 'rxjs';
import { takeUntil, withLatestFrom } from 'rxjs/operators';
import { CallSelector } from '@ucap/ng-store-call';
import { CallHistory, CallResultType } from '@ucap/domain-call';
import { ActivatedRoute } from '@angular/router';
import { UserSelector } from '@ucap/ng-store-organization';
import { QueryParams } from '@app/pages/call/types/params.type';

@Component({
  selector: 'app-sections-call-info',
  templateUrl: './info.section.component.html',
  styleUrls: ['./info.section.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class InfoSectionComponent implements OnInit, OnDestroy {
  isMe: boolean;
  userSeq: string;

  originalHistoryList: CallHistory[];
  awayHistoryList: CallHistory[];
  unansweredHistoryList: CallHistory[];

  private ngOnDestroySubject: Subject<void> = new Subject();
  constructor(
    private store: Store<any>,
    private activatedRoute: ActivatedRoute,
    private changeDetectorRef: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    combineLatest([
      this.activatedRoute.queryParams,
      this.store.pipe(select(CallSelector.callHistory))
    ])
      .pipe(
        takeUntil(this.ngOnDestroySubject),
        withLatestFrom(this.store.pipe(select(UserSelector.user)))
      )
      .subscribe(([[params, callHistory], user]) => {
        let existParams = false;
        if (!!params) {
          const seqParam = params[QueryParams.ID];
          // initializing by userSeq Change.
          if (this.userSeq !== seqParam) {
          }
          // setting userSeq.
          this.userSeq = !!seqParam
            ? seqParam
            : !!user
            ? String(user.info.seq)
            : undefined;
          if (!!user && this.userSeq === String(user.info.seq)) {
            this.isMe = true;
          } else {
            this.isMe = false;
          }

          this.originalHistoryList = callHistory;

          this.getFiltered();
        }
      });
  }

  ngOnDestroy(): void {
    if (!!this.ngOnDestroySubject) {
      this.ngOnDestroySubject.next();
      this.ngOnDestroySubject.complete();
    }
  }

  getFiltered(): void {
    // original
    this.originalHistoryList = this.originalHistoryList.filter((item) => {
      let result = true;
      if (!this.isMe && !!this.userSeq) {
        if (!!item.sendYn && item.sendYn === true) {
          result = item.calledUserSeq === this.userSeq;
        } else {
          result = item.callingUserSeq === this.userSeq;
        }
      }
      return result;
    });

    // away
    this.awayHistoryList = this.originalHistoryList.filter(
      (item) => item.callResult === CallResultType.Away
    );
    // unanswered
    this.unansweredHistoryList = this.originalHistoryList.filter(
      (item) => item.callResult === CallResultType.Missed
    );

    this.changeDetectorRef.markForCheck();
  }
}