import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import {
  FileInfo,
  FileDownloadInfo,
  FileType
} from '@ucap-webmessenger/protocol-file';
import { Subscription, combineLatest } from 'rxjs';
import { Store, select } from '@ngrx/store';

import * as AppStore from '@app/store';
import * as ChatStore from '@app/store/messenger/chat';
import { tap, map } from 'rxjs/operators';

export interface FileInfoTotal {
  info: FileInfo;
  checkInfo: FileDownloadInfo[];
}

@Component({
  selector: 'app-layout-chat-right-drawer-album-box',
  templateUrl: './album-box.component.html',
  styleUrls: ['./album-box.component.scss']
})
export class AlbumBoxComponent implements OnInit, OnDestroy {
  fileInfoTotal: FileInfoTotal[];
  fileInfoList: FileInfo[];
  fileInfoListSubscription: Subscription;

  constructor(private store: Store<any>) {}

  ngOnInit() {
    this.fileInfoListSubscription = combineLatest([
      this.store.pipe(select(AppStore.MessengerSelector.RoomSelector.roomInfo)),
      this.store.pipe(
        select(AppStore.MessengerSelector.EventSelector.selectAllFileInfoList)
      ),
      this.store.pipe(
        select(
          AppStore.MessengerSelector.EventSelector.selectAllFileInfoCheckList
        )
      )
    ])
      .pipe(
        tap(() => (this.fileInfoTotal = [])),
        tap(([roomInfo, fileInfoList, fileInfoCheckList]) => {
          this.fileInfoList = fileInfoList.filter(fileInfo => {
            if (
              fileInfo.roomSeq === roomInfo.roomSeq &&
              (fileInfo.type === FileType.Image ||
                fileInfo.type === FileType.Video)
            ) {
              return true;
            } else {
              return false;
            }
          });

          this.fileInfoList.map(fileInfo => {
            this.fileInfoTotal.push({
              info: fileInfo,
              checkInfo: fileInfoCheckList.filter(
                checkInfo => checkInfo.seq === fileInfo.seq
              )
            });
          });
        })
      )
      .subscribe();
  }

  ngOnDestroy(): void {
    if (!!this.fileInfoListSubscription) {
      this.fileInfoListSubscription.unsubscribe();
    }
  }
}