import { Component, EventEmitter, Input, OnInit, ViewChild, Injectable, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { TreeModel } from './models/tree.model';
import { NodeService } from './services/node.service';
import { NodeInterface } from './interfaces/node.interface';
import * as ACTIONS from './reducers/actions.action';
import { SET_LOADING_STATE } from './reducers/actions.action';
import { AppStore } from './reducers/reducer.factory';
import { NgxSmartModalService } from 'ngx-smart-modal';
import { NodeClickedService } from './services/node-clicked.service';
import { TranslateService } from '@ngx-translate/core';
import { HttpClient, HttpHeaders, HttpRequest, HttpResponse, HttpResponseBase, HttpErrorResponse } from '@angular/common/http';
import { NextConfig } from './app-config';
import { TreeviewModule } from 'ngx-treeview';
import { MenuItem, TreeNode } from 'primeng/api';
import { Dialog } from 'primeng/dialog';
import { FormGroup, AbstractControl, FormBuilder } from '@angular/forms';
import { Table } from 'primeng/table';
import { FileUpload } from 'primeng/fileupload';

@Component({
  selector: 'fm-dms-uploader',
  templateUrl: './file-manager.component.html',
  styleUrls: ['./file-manager.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class FileManagerComponent implements OnInit {

  @ViewChild('pd', { static: false }) pdDialog: Dialog;
  @ViewChild('dt', { static: false }) dt: Table;
  @ViewChild('fileUpload', { static: false }) fileUpload: any;


  public form: FormGroup;
  loading: boolean;
  public nextConfig: any;
  files: TreeNode[];
  public UserFolderFiles: any;
  CurrentFolderSlug = '';
  OriCurrentFolderSlug = '';
  CurrentFolderSlugLabel = '';
  IsChangeNode = false;
  createFolderDisplay: boolean = false;
  editFolderDisplay: boolean = false;
  deleteFolderDisplay: boolean = false;
  CurrentFileSlug = '';
  deleteFileDisplay: boolean = false;
  first: number = 0;
  AddFolderName: string;
  EditFolderName: string;
  IsListView = true;
  minPageSize = 10;
  maxPageSize = "10000";
  currentMinPageSize: any;
  currentMaxPageSize = "";
  public singleFileData: any;
  groupData: any;
  groups: any = [];
  selectedViewerGroups: any = [];
  selectedEditorGroups: any = [];
  isFile: boolean = false;
  fileLink: string = '';
  fileDetailView: boolean = false;
  fromDate = "";
  toDate = "";
  showFilter = true;
  Note = "";
  SelectedDeleteFileList: any = [];
  languageList: any = [];
  defaultLanguage: string = "en";
  dragFileSlug = "";
  items: MenuItem[];

  
  constructor(
    private store: Store<AppStore>,
    private nodeService: NodeService,
    private nodeClickedService: NodeClickedService,
    public ngxSmartModalService: NgxSmartModalService,
    public translate: TranslateService,
    private http: HttpClient,
    public fb: FormBuilder
  ) {
    translate.setDefaultLang(this.defaultLanguage);
    translate.use(this.defaultLanguage);

    this.languageList = [
      { name: 'English', code: 'en' },
      { name: 'Dutch', code: 'nl' },
    ];

    this.nextConfig = NextConfig.config;
    this.form = fb.group({
      Title: [''],
      Name: [''],
      Slug: [''],
      Created: [''],
      LastEdited: [''],
      CreatedBy: [''],
      UpdatedBy: [''],
      Filename: [''],
      Link: [''],
      opt1: [''],
      opt2: [''],
      opt3: [''],
    });

    this.items = [
      {
        label: 'DeleteFiles', command: () => {
          this.OnDeleteSelectedColumn();
        }
      },
    ];
  }

  async ngOnInit() {
    this.currentMinPageSize = this.minPageSize;
    this.currentMaxPageSize = this.maxPageSize;
    if (localStorage.getItem("Token") == null) {
      this.getToken();
    }
    else {
      this.BindFileTree();
    }
  }

  async nodeSelect(val) {
    this.CurrentFolderSlug = val.node.data;
    this.CurrentFolderSlugLabel = val.node.text;
    this.IsChangeNode = true;
    this.resetpage();
    this.dt.reset();
    await this.getFileListOfFolder(10, 0);
  }

  resetpage() {
    this.first = 0;
  }

  BindFileTree() {
    const userData: FormData = new FormData();
    userData.append('apitoken', localStorage.getItem('Token'));
    //userData.append('currentFolder', localStorage.getItem('CurrentRepositorySlug'));
    userData.append('currentFolder', "196ea6ee3b4f8f9d91f364d71ddcc43e9b697923436aa7d456");
    //userData.append('itemSlug', localStorage.getItem('itemSlug'))
    userData.append('itemSlug', this.nextConfig.itemSlug)
    this.files = [];
    this.http.post(this.nextConfig.baseURL + 'custom/CustomAsset/getFolderTree', userData).toPromise().then(
      Response => {
        //var data: any = [];
        var listofData: any = Response;
        listofData.forEach(element => {
          this.manipulateListData(element, 0);
        });

        this.files = listofData;
        this.CurrentFolderSlug = listofData[0].href;
        this.OriCurrentFolderSlug = listofData[0].href;
        // this.CurrentFolderSlug = "ce5ee41da61049905e05117c47ee81ce14149d8e81a37d0848";
        // this.OriCurrentFolderSlug = "ce5ee41da61049905e05117c47ee81ce14149d8e81a37d0848";
        this.CurrentFolderSlugLabel = listofData[0].text;

        this.getFileListOfFolder(10, 0);
      });
  }

  manipulateListData(folderObj, count) {
    folderObj.label = folderObj.text;
    folderObj.data = folderObj.href;
    folderObj.expandedIcon = "pi pi-folder-open";
    folderObj.collapsedIcon = "pi pi-folder";
    folderObj.draggable = false;
    folderObj.droppable = false;
    if (count == 0) {
      folderObj.expanded = true;
    }
    if (folderObj && folderObj.nodes) {
      folderObj.children = folderObj.nodes;
      folderObj.nodes.forEach(nestedfolderobj => {
        this.manipulateListData(nestedfolderobj, 1)
      });
    }
  }

  public getFileListOfFolder(rows, start) {
    const userData: FormData = new FormData();
    userData.append('apitoken', localStorage.getItem('Token'));
    userData.append('currentFolderSlug', this.CurrentFolderSlug);
    userData.append('itemSlug', this.nextConfig.itemSlug)
    // userData.append('length', this.currentMinPageSize);
    userData.append('length', "0");
    userData.append('start', start);
    userData.append('createdFrom', this.fromDate);
    userData.append('createdTo', this.toDate);
    this.UserFolderFiles = [];

    this.http.post(this.nextConfig.baseURL + 'custom/CustomAsset/getFolderFiles', userData).toPromise().then(
      Response => {
        this.UserFolderFiles = Response;
        if (this.UserFolderFiles.aaData != null && this.UserFolderFiles.aaData != '') {
          this.UserFolderFiles.aaData.forEach(element => {
            var data = element.Name.substring(element.Name.lastIndexOf('.') + 1).toLowerCase();
            if (data == 'pdf') {
              element.fileIcon = "fa fa-2x fa-file-pdf-o";
            } else if (data == 'doc' || data == 'docx') {
              element.fileIcon = "fa fa-2x fa-file-word-o";
            } else if (data == 'jpge' || data == 'jpg' || data == 'png') {
              element.fileIcon = "fa fa-2x fa-file-image-o";
            } else {
              element.fileIcon = "fa fa-2x fa-file";
            }
          });
        }
        if (this.UserFolderFiles.resultListLabels && this.UserFolderFiles.resultListLabels.length > 0) {
          var changevals = this.UserFolderFiles.resultListLabels.filter(x => x.data == 'Slug');
          if (changevals.length > 0) {
            changevals[0].data = 'Action';
          }
        }
      });
  }

  async loadLazyData(event) {
    await this.getFileListOfFolder(event.rows, event.first);
  }

  async ImageUpload(event, form) {
    if (event.files && event.files.length > 0) {
      let files = event.files;
      const formdata = new FormData();
      files.forEach(file => {
        formdata.append('files[]', file);
      });

      formdata.append('apitoken', localStorage.getItem('Token'));
      formdata.append('currentFolderSlug', this.CurrentFolderSlug);
      this.http.post(this.nextConfig.baseURL + 'custom/CustomAsset/uploadFiles', formdata).toPromise().then(
        Response => {
          this.fileUpload.clear();
          this.getFileListOfFolder(10, 0);
        });
    }
  }

  onTableRowSelect(event) {
    this.getFileDataAndShowFileDialogue(true, event);
  }

  getToken() {
    const formData: FormData = new FormData();
    formData.append('Fields[Email]', this.nextConfig.apiuser);
    formData.append('Fields[Password]', this.nextConfig.apipassword);
    return this.http.post(this.nextConfig.baseURL + 'auth/getToken', formData)
      .toPromise().then(data => {
        var Data: any;
        Data = data;
        localStorage.setItem('Token', Data.Token);
        localStorage.setItem('Expire', Data.Expire);
        localStorage.setItem('CurrentRepositorySlug', Data.CurrentRepositorySlug);
        localStorage.setItem('itemSlug', this.nextConfig.itemSlug);
        this.BindFileTree();
      });
  }

  showCreateFolderDialog() {
    this.createFolderDisplay = true;
    this.AddFolderName = "";
  }

  showEditFolderDialog() {
    this.editFolderDisplay = true;
    this.EditFolderName = this.CurrentFolderSlugLabel;
  }

  showDeleteFolderDialog() {
    this.deleteFileDisplay = true;
  }

  AddNewFolder() {
    const userData: FormData = new FormData();
    userData.append('apitoken', localStorage.getItem('Token'));
    userData.append('folderName', this.AddFolderName);
    userData.append('folderSlug', "")
    userData.append('currentFolderSlug', this.CurrentFolderSlug);
    userData.append('itemSlug', this.nextConfig.itemSlug);
    this.http.post(this.nextConfig.baseURL + 'custom/CustomAsset/setFolder', userData).toPromise().then(
      Response => {
        this.AddFolderName = "";
        this.createFolderDisplay = false;
        this.BindFileTree();
      });
  }

  DeleteCurrentSlug() {
    this.deleteFileDisplay = true;
    this.CurrentFileSlug = this.singleFileData.Slug;
  }

  DeleteFile(deleteType) {


    if (this.DeleteSlugRecord(deleteType, this.CurrentFileSlug != null && this.CurrentFileSlug != '' ? this.CurrentFileSlug : this.CurrentFolderSlug)) {

      this.BindFileTree();
      this.deleteFileDisplay = false;
      this.fileDetailView = false;
      this.SelectedDeleteFileList = [];
      this['IsChkCheckAll'] = false;
    }
    else {
      this.deleteFileDisplay = false;
    }
  }

  async DeleteSlugRecord(deleteType, slug) {
    const userData: FormData = new FormData();
    if (this.SelectedDeleteFileList.length > 0) {
      this.SelectedDeleteFileList.forEach((data, index) => {
        userData.append('items[]', data);
      });
    } else {
      userData.append('items[]', slug);
    }
    userData.append('apitoken', localStorage.getItem('Token'));
    userData.append('deleteType', deleteType);
    return await this.http.post(this.nextConfig.baseURL + 'custom/CustomAsset/deleteFiles', userData).toPromise();
  }

  DeleteFolder(deleteType) {
    if (this.CurrentFolderSlug != this.OriCurrentFolderSlug) {
      if (this.DeleteSlugRecord(deleteType, this.CurrentFolderSlug)) {
        this.deleteFolderDisplay = false;
        this.BindFileTree();
      }
    }
    else {
      this.deleteFolderDisplay = false;
    }
  }

  RenameFileName() {
    const userData: FormData = new FormData();
    userData.append('apitoken', localStorage.getItem('Token'));
    userData.append('folderName', this.EditFolderName)
    userData.append('folderSlug', this.CurrentFolderSlug)
    userData.append('currentFolderSlug', this.CurrentFolderSlug)
    userData.append('itemSlug', this.nextConfig.itemSlug)
    this.http.post(this.nextConfig.baseURL + 'custom/CustomAsset/setFolder', userData).toPromise().then(
      Response => {
        this.EditFolderName = "";
        this.editFolderDisplay = false;
        this.BindFileTree();
      });
  }

  OnListView() {
    this.IsListView = true;
  }

  OnGridView() {
    this.IsListView = false;
  }

  async onSearch() {
    this.currentMinPageSize = this.minPageSize;
    this.currentMaxPageSize = this.maxPageSize;
    await this.getFileListOfFolder(10, 0);
  }

  async getFileDataAndShowFileDialogue(event, fileSlug) {
    // this.fileDetailView = true;
    const userData: FormData = new FormData();
    userData.append('apitoken', localStorage.getItem('Token'));
    userData.append('slug', fileSlug);
    await this.http.post(this.nextConfig.baseURL + 'custom/CustomAsset/getFile', userData).toPromise().then(
      Response => {
        this.getGroups();
        console.log('File Data', Response);
        this.singleFileData = Response;
        if (this.singleFileData.ViewerGroupSlugs.length > 0) {
          this.selectedViewerGroups = this.singleFileData.ViewerGroupSlugs;
        }
        if (this.singleFileData.EditorGroupSlugs.length > 0) {
          this.selectedEditorGroups = this.singleFileData.EditorGroupSlugs;
        }
        this.isFile = (["svg", "jpeg", "jpg", "png"].indexOf(this.singleFileData.Filename.toLowerCase().split('.')[this.singleFileData.Filename.split('.').length - 1])) == -1 ? true : false;
        this.fileDetailView = true;
        this.fileLink = this.nextConfig.FileUrl + this.singleFileData.Link;
        this.singleFileData.fileCanViewType = this.singleFileData.CanViewType
      });
  }

  async getGroups() {
    await this.http.get(this.nextConfig.baseURL + 'Repository/' + localStorage.getItem('CurrentRepositorySlug') + '/Groups/?apitoken=' + localStorage.getItem('Token')).toPromise().then(
      Response => {
        this.groups = [];
        this.groupData = Response;
        this.groupData.forEach(element => {
          this.groups.push({ label: element.Title, value: element.Slug });
        });
      });
  }


  showDialogMaximized(event, dialog: Dialog) {
    setTimeout(() => {
      this.pdDialog.maximize();
    }, 0);
  }

  async submitFileData() {
    console.log('data', this.singleFileData);
    const fileData: any = new FormData();
    fileData.append('apitoken', localStorage.getItem('Token'));
    fileData.append('fileName', this.singleFileData.Name);
    fileData.append('fileTitle', this.singleFileData.Title);
    fileData.append('fileSlug', this.singleFileData.Slug);
    fileData.append('fileCreated', this.singleFileData.Created);
    fileData.append('fileLastEdited', this.singleFileData.LastEdited);
    fileData.append('fileCreatedBy', this.singleFileData.CreatedBy);
    fileData.append('fileUpdatedBy', this.singleFileData.UpdatedBy);
    fileData.append('fileFilename', this.singleFileData.Filename);
    fileData.append('fileLink', this.singleFileData.Link);
    if ((this.singleFileData.fileCanViewType != null || this.singleFileData.fileCanViewType != null || this.singleFileData.fileCanViewType != undefined)) {
      fileData.append('fileCanViewType', this.singleFileData.fileCanViewType);
    }
    if (this.selectedViewerGroups.length > 0) {
      this.selectedViewerGroups.forEach(element => {
        fileData.append('fileViewerGroups[]', element);
      });
    }

    if (this.selectedEditorGroups.length > 0) {
      this.selectedEditorGroups.forEach(element => {
        fileData.append('fileEditorGroups[]', element);
      });
    }

    await this.http.post(this.nextConfig.baseURL + 'custom/CustomAsset/editFile', fileData).toPromise().then(
      Response => {
        this.getFileDataAndShowFileDialogue('', this.singleFileData.Slug);
      });
  }

  OnFiltervisable() {
    if (this.showFilter == false) {
      this.showFilter = true;
    } else {
      this.showFilter = false;
    }
  }
  async submitNoteDate(fileSlug) {
    const fileData: FormData = new FormData();
    fileData.append('apitoken', localStorage.getItem('Token'));
    fileData.append('noteContent', this.Note);
    fileData.append('fileSlug', fileSlug);
    await this.http.post(this.nextConfig.baseURL + 'custom/CustomAsset/addNote', fileData).toPromise().then(
      Response => {
        this.Note = "";
        this.getFileDataAndShowFileDialogue('', this.singleFileData.Slug);
      });
  }

  async deleteNote(noteSlug) {
    const noteData: FormData = new FormData();
    noteData.append('apitoken', localStorage.getItem('Token'));
    noteData.append('slug', noteSlug);
    await this.http.post(this.nextConfig.baseURL + 'custom/CustomAsset/deleteNote', noteData).toPromise().then(
      Response => {
        this.Note = "";
        this.getFileDataAndShowFileDialogue('', this.singleFileData.Slug);
      });
  }
  closeFileDialog() {
    this.fileDetailView = false;
  }

  OnDeleteSelectedColumn() {
    this.SelectedDeleteFileList = [];
    this.UserFolderFiles.aaData.forEach((data, index) => {
      if (this['IsChkCheck-' + data.Slug]) {
        this.SelectedDeleteFileList.push(data.Slug);
      }
    });

    if (this.SelectedDeleteFileList.length > 0) {
      this.deleteFileDisplay = true;
    }
  }

  OnSelectAll(event) {
    if (this['IsChkCheckAll']) {
      this.UserFolderFiles.aaData.forEach((data, index) => {
        this['IsChkCheck-' + data.Slug] = true;
      });
    }
    else {
      this.UserFolderFiles.aaData.forEach((data, index) => {
        this['IsChkCheck-' + data.Slug] = false;
      });
    }

  }


  //DragandDrop

  dragStart(event, data) {
    this.dragFileSlug = "";
    this.dragFileSlug = data;
  }

  async onDrop(event, val) {
    var data: any = {};
    const fileData: any = new FormData();
    fileData.append('apitoken', localStorage.getItem('Token'));
    fileData.append('slug', this.dragFileSlug);
    await this.http.post(this.nextConfig.baseURL + 'custom/CustomAsset/getFile', fileData).toPromise().then(
      Response => {
        data = Response;
        const fileData2: any = new FormData();
        fileData2.append('apitoken', localStorage.getItem('Token'));
        fileData2.append('fileName', data.Name);
        fileData2.append('fileTitle', data.Title);
        fileData2.append('fileSlug', data.Slug);
        fileData2.append('fileCreated', data.Created);
        fileData2.append('fileLastEdited', data.LastEdited);
        fileData2.append('fileCreatedBy', data.CreatedBy);
        fileData2.append('fileUpdatedBy', data.UpdatedBy);
        fileData2.append('fileFilename', data.Filename);
        fileData2.append('fileLink', data.Link);
        fileData2.append('fileFolderSlug', val.href);
        if ((data.fileCanViewType != null || data.fileCanViewType != null || data.fileCanViewType != undefined)) {
          fileData2.append('fileCanViewType', data.fileCanViewType);
        }
        this.http.post(this.nextConfig.baseURL + 'custom/CustomAsset/editFile', fileData2).toPromise().then(
          Response => {
            this.dragFileSlug = "";
            this.BindFileTree();
          });
      });
  }



  onLanguageChange(event) {
    this.translate.setDefaultLang(event.value.code);
    this.translate.use(event.value.code);
  }

}