import { Component, EventEmitter, Input, Inject, Output } from '@angular/core';
import { MatDialogConfig, MatDialog } from '@angular/material';
import { Subject } from "rxjs/Rx";

import { CollectionService } from '../collection/collection.service';
import { orderRecords } from '../shared/array-utils';
import { Profile_CONSTANTS } from '../shared/profile.constants';
import { DialogConfirm } from '../confirmation-dialog/modal-confirm.component';
import { TokenAuthenticationService } from '../shared/token-authentication.service';

@Component({
    selector: 'rss-collection-list',
    templateUrl: './collection-list.component.html',
    styleUrls: ['./collection-list.component.scss'],
    providers: [CollectionService]
})

export class CollectionListComponent {
    @Input('environment') environment: any;
    @Input('loggedInUser') loggedInUser: any;
    @Input('collectionConfig') collectionConfig: any;
    @Input() campusChange: Subject<any>;
    @Input() newGroup: Subject<string>;
    @Output() switchUser: EventEmitter<any> = new EventEmitter<any>();

    @Output() collectionAlreadyExits: EventEmitter<string> = new EventEmitter<string>();
    @Output() closeCreateDialog: EventEmitter<boolean> = new EventEmitter<boolean>();

    public listCollections: any;
    public selectedCollection: any;
    public editCollection: any;
    public subscribe;
    public newCollection: any;
    public editDialogConfig: any;
    public safetyCoordinatorConfig: any;
    public groupConfig: any;
    public campusCode: string;


    constructor(public collectionService: CollectionService, private tokenAuthenticationService: TokenAuthenticationService, @Inject(Profile_CONSTANTS) private constants,
        public dialog: MatDialog) {
    }

    ngOnInit() {
        this.collectionService.setEnvironment(this.environment);
        this.campusCode = this.loggedInUser.campus;
        if(!this.campusCode){
          this.tokenAuthenticationService.getPersonProfile().subscribe((res)=>{
            this.campusCode = res.campusCode;
          });
        }
        this.addNewGroup();
        if (this.campusChange) this.campusChange.subscribe(event => {
            if (event && event!=this.campusCode) {
                this.campusCode = event;
                this.listCollections = null;
                this.getCollections(event, this.loggedInUser.groupUserId);
            }
        });
        this.getCollections(this.campusCode, this.loggedInUser.groupUserId);
    }

    ngOnDestroy() {
        if (this.subscribe)
            this.subscribe.unsubscribe();
    }
    public viewProfileEmit = (coordinator: any) => {
        this.switchUser.emit(coordinator);
    }

    public addNewGroup() {
        let page = this;
        if (this.newGroup) this.subscribe = this.newGroup.subscribe( name => {
            if (name) {
                if (this.listCollections.find(collection => collection.name.toLowerCase() === name.toLowerCase()))
                    page.collectionAlreadyExits.emit(this.constants.collection.messages.alreadyExists);
                else {
                    page.collectionService.createCollection(name, page.campusCode, page.loggedInUser.groupUserId)
                        .subscribe(collection => {
                            page.closeCreateDialog.emit(true);
                            page.listCollections.push(collection);
                            page.listCollections = orderRecords([...page.listCollections], this.constants.collection.sortCollection);
                            page.onSelected(collection);
                            page.newCollection = collection;
                        });
                }
            }

        });
    }

    public isNew(collectionId) {
        if (this.newCollection && collectionId && this.newCollection.collectionId === collectionId)
            return true;
        else
            return false;

    }

    public getCollections(campus, userId) {
        this.collectionService.getCollections(this.collectionConfig.isEditable, campus, userId)
            .subscribe((collections:any) => {
                if (collections.length > 0) {
                    collections = orderRecords([...collections], this.constants.collection.sortCollection);
                    this.listCollections = collections;
                    this.onSelected(collections[0]);
                }
                else {
                    this.listCollections = [];
                }
            });

    }

    public onRequestGroup = () => {
        this.groupConfig.requestGroup = true;
    }

    public onSelected = (collection: any) => {
        if (this.selectedCollection && this.selectedCollection.collectionId === collection.collectionId) {
            this.selectedCollection = {};
        } else {
            this.collectionService.getCollectionDetails(collection.collectionId)
                .subscribe((collection:any) => {
                    this.groupConfig = {
                        listGroups: collection.groups,
                        isEditable: this.collectionConfig.isEditable,
                        collectionId: collection.collectionId
                    };
                    this.safetyCoordinatorConfig = {
                        listSafetyCoordinator: collection.roleMembers,
                        isEditable: this.collectionConfig.isEditable,
                        collectionId: collection.collectionId
                    };
                    this.selectedCollection = collection;
                });
        }
    }

    public onDialogCancel() {
        this.editCollection = null;
    }

    public  onDialogUpdate(name) {
        this.collectionService.renameCollectionName(name, this.editCollection.collectionId)
            .subscribe(res => {
                let Index = this.listCollections.findIndex(item => item.collectionId === this.editCollection.collectionId);
                this.listCollections[Index] = res;
                this.editCollection = null;
            });
    }

    public onCollectionEdit = (collection: any) => {
        this.editDialogConfig = { name: collection.name, lstCollection: this.listCollections };
        this.editCollection = collection;

    }

    public onCollectionRemoveClick = (collection: any) => {
        this.openDialog(collection);
    }

    public onCollectionRemove =  (collection: any) => {
      this.collectionService.removeCollection(collection.collectionId).subscribe(()=>{
        this.listCollections = this.listCollections.filter(item => item.collectionId !== collection.collectionId);
      });
  }

    private openDialog = (collection) => {
        const dialogConfig = new MatDialogConfig();
        dialogConfig.data = {
            "head": `Remove the "${collection.name}" collection?`,
            "body": this.collectionService.getModalBody()
        };
        let dialogRef = this.dialog.open(DialogConfirm, dialogConfig);
        dialogRef.afterClosed().subscribe(result => {
            if (result)
                this.onCollectionRemove(collection);
            else
                return;
        });
    }

    public isSelected = (collection: any) => {
        if (this.selectedCollection)
            return (this.selectedCollection.collectionId === collection.collectionId);
    }

    public handleMenuClick(event) {
        event.stopPropagation();
    }

    public scrollToViewPanel() {
        setTimeout(() => {
          const elem = document.getElementById(
            this.selectedCollection.collectionId
          );
          if (elem) {
            window.scroll(0, 0);
            let offsetTop = elem.getBoundingClientRect().top - 50;
            window.scroll(0, offsetTop);
          }
        }, 100);
      }

}