/*
 * ============LICENSE_START=======================================================
 * org.onap.aai
 * ================================================================================
 * Copyright © 2017-2021 AT&T Intellectual Property. All rights reserved.
 * ================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */

import React, { Component } from 'react';

import commonApi from 'utils/CommonAPIService.js';
import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
import Spinner from 'utils/SpinnerContainer.jsx';
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import Button from 'react-bootstrap/lib/Button';
import Modal from 'react-bootstrap/lib/Modal';
import Tabs from 'react-bootstrap/lib/Tabs';
import Tab from 'react-bootstrap/lib/Tab';
import Pagination from 'react-js-pagination';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import Panel from 'react-bootstrap/lib/Panel';
import {GeneralCommonFunctions} from 'utils/GeneralCommonFunctions.js';
import Alert from 'react-bootstrap/lib/Alert';
import MultiSelectDropDown from 'generic-components/MultiSelectDropDown.jsx';
let ENVIRONMENT = GlobalExtConstants.ENVIRONMENT;
let APERTURE_SERVICE = JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'APERTURE_SERVICE'));

let INVLIST = GlobalExtConstants.INVLIST;

const settings = {
	'NODESERVER': INVLIST.NODESERVER,
	'PROXY': INVLIST.PROXY,
  	'PREFIX': INVLIST.PREFIX,
  	'VERSION': INVLIST.VERSION,
    'USESTUBS': INVLIST.useStubs,
    'TABULAR': INVLIST.TABULAR,
    'APERTURE': INVLIST.APERTURE,
    'TABULARVERSION': INVLIST.TABULARVERSION
};

/**
 * This class is used to handle any saving or loading of dsl queries
 */

class CustomDSLSaveLoad extends Component {

  constructor(props) {
    console.log(props);
    super(props);
    APERTURE_SERVICE=JSON.parse(sessionStorage.getItem(ENVIRONMENT + 'APERTURE_SERVICE'));
    this.state = {
        enablePublicQueriesBusyFeedback: false,
        enableCommunityQueriesBusyFeedback: false,
        enablePersonalQueriesBusyFeedback: false,
        enableDeleteBusyFeedback: false,
        loadedPublicQueries: [],
        loadedCommunityQueries: [],
        loadedPersonalQueries: [],
        filteredPublicEntries: [],
        filteredCommunityEntries: [],
        filteredPersonalEntries: [],
        initialFilteredPublicEntries: [],
        initialFilteredCommunityEntries: [],
        initialFilteredPersonalEntries:[],
        totalPublicResults: 0,
        totalCommunityResults: 0,
        totalPersonalResults: 0,
        queriesPublicErrMsg: false,
        queriesCommunityErrMsg: false,
        queriesPersonalErrMsg: false,
        deleteErrMsg: false,
        deleteSuccessfulMsg: false,
        focusedEntryName: '',
        focusedEntryType: false,
        showDeleteModal: false,
        filterPublicCriteria: '',
        filterCommunityCriteria: '',
        filterPersonalCriteria: '',
        displayValue:'Category',
        selectedOption:{"public":[],"community":[],"personal":[]},
        filterText:'',
        activeType:'public',
        queryId:'',
        loadQueryList:[],
        publicLoadQueryList:[],
        personalLoadQueryList:[],
        communityLoadQueryList:[],
        loadQueryLimit:parseInt(sessionStorage.getItem(ENVIRONMENT + 'LOADTEMPLATE_MAX_COUNT')),
        loadQueryFlag:true,
        selectedCount:0
    };
    settings['ISAPERTURE']=APERTURE_SERVICE;
  }
  componentDidMount = () => {
    this.setState({enablePersonalQueriesBusyFeedback:true,enablePublicQueriesBusyFeedback:true,enableCommunityQueriesBusyFeedback:true});
    this.getQueries();
  };
  componentWillUnmount  = () => {};

  filterPublicList = (event) =>{
      this.filterPublicListWithCategory(event.target.value);
  }
  filterPublicListWithCategory = (value) =>{
     var updatedList = this.state.loadedPublicQueries;
     updatedList = Object.keys(updatedList).filter(key => {
        return JSON.stringify(updatedList[key]).toLowerCase().search(value.toLowerCase()) !== -1;
     }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} );     
     let filterList=this.filterUpdatedList(updatedList, "public");
     console.log('filterPublicListWithCategory filterList>>>>>',filterList);
     this.setState({filteredPublicEntries: filterList, totalPublicResults: Object.keys(filterList).length, filterPublicCriteria: value,filterText: value.toLowerCase()});
   }
  filterCommunityList = (event) =>{
      this.filterCommunityListWithCategory(event.target.value);
  }
  filterCommunityListWithCategory = (value) =>{
     var updatedList = this.state.loadedCommunityQueries;
     updatedList = Object.keys(updatedList).filter(key => {
        return JSON.stringify(updatedList[key]).toLowerCase().search(value.toLowerCase()) !== -1;
     }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} );
     let filterList=this.filterUpdatedList(updatedList, "community");
     console.log('filterCommunityListWithCategory filterList>>>>>',filterList);
     this.setState({filteredCommunityEntries: filterList, totalCommunityResults: Object.keys(filterList).length, filterCommunityCriteria: value,filterText: value.toLowerCase()});
  }
  filterPersonalList = (event) =>{
      this.filterPersonalListWithCategory(event.target.value);
  }
  filterPersonalListWithCategory =(value) =>{
     var updatedList = this.state.loadedPersonalQueries;
     updatedList = Object.keys(updatedList).filter(key => {
        return JSON.stringify(updatedList[key]).toLowerCase().search(value.toLowerCase()) !== -1;
     }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} );
     let filterList=this.filterUpdatedList(updatedList, "personal");
     console.log('filterPersonalListWithCategory filterList>>>>>',filterList);     
     this.setState({filteredPersonalEntries: filterList, totalPersonalResults: Object.keys(filterList).length, filterPersonalCriteria: value,filterText: value.toLowerCase()});
  }
  filterUpdatedList = (updatedList, type) =>{
    let selectedCategory = this.state.selectedOption[type];
    let filterList = [];
    let selectedOption = [];
    if(selectedCategory.length > 0){
       selectedOption = Object.keys(selectedCategory).map((index)=>{
           return selectedCategory[index].value;
       }); 
       Object.keys(updatedList).map((key) => {
           Object.keys(updatedList[key]).map((entry) => {
               if(entry === 'category' && selectedOption.indexOf(updatedList[key][entry]) !==-1){
                   filterList[key]=updatedList[key];                  
               }
           })
       });
    }else{
       filterList=updatedList;
    }
    return filterList;
  }
  processQueryResponse = (res) => {
    var formattedList = [];
    for(var i = 0; i < res.length; i++){
        var newQueryObj = {};
        var requiredFieldCount = 0;
        if(res[i]){
            newQueryObj.isSelect=false;
            newQueryObj.id = res[i].id;
            newQueryObj['is_aggregate'] = false;
            newQueryObj['is_public'] = false;
            newQueryObj['community_shared'] = false;
            newQueryObj['template_details'] = [];
            for(var j = 0; j < res[i].cols.length; j++){
                if(res[i].cols[j].name){
                    if(res[i].cols[j].name === 'query_name'){
                        requiredFieldCount++;
                        newQueryObj.name = res[i].cols[j].value;
                    }
                    if(res[i].cols[j].name === 'creator'){
                        requiredFieldCount++;
                        newQueryObj.creator = res[i].cols[j].value;
                    }
                    if(res[i].cols[j].name === 'dsl'){
                        requiredFieldCount++;
                        newQueryObj.dsl = res[i].cols[j].value;
                    }
                    if(res[i].cols[j].name === 'description'){
                        newQueryObj.description = res[i].cols[j].value;
                    }
                    if(res[i].cols[j].name === 'is_aggregate'){
                        newQueryObj['is_aggregate'] = res[i].cols[j].value;
                    }
                    if(res[i].cols[j].name === 'is_public'){
                        newQueryObj['is_public'] = res[i].cols[j].value;
                    }
                    if(res[i].cols[j].name === 'community_shared'){
                        newQueryObj['community_shared'] = res[i].cols[j].value;
                    }
                    if(res[i].cols[j].name === 'template_details'){
                        newQueryObj['template_details'] = res[i].cols[j].value;
                    }
                    if(res[i].cols[j].name === 'category'){
                        newQueryObj['category'] = res[i].cols[j].value;
                    }
                }
            }
            newQueryObj.version = res[i].version;
        }
        if(requiredFieldCount === 3){
            formattedList[res[i].id] = newQueryObj;
        }else{
            console.log('Issue occurred on query list processing for the following element: ' + JSON.stringify(newQueryObj));
        }
    }
    return formattedList;
  }
  
  getPublicQueries = () => {
    settings['ISTABULAR'] = true;
    return new Promise((resolve, reject) => {
                        commonApi(settings, 'queries/is_public=true', 'GET', null, 'BYOQPublicQueries', GlobalExtConstants.OVERRIDE_DOMAIN)
                        		.then(res => {
                        			console.log('res:' + res.data, 'load');
                        			if(res.status === 200 || res.status === 404){
                        			    if(res.data.status && (res.data.status !== 200 && res.data.status !== 201 && res.data.status !== 404)){
                        			        this.triggerError(res.data);
                        			    }else{
                        			        var list = this.processQueryResponse(res.data);
                        			        this.setState({
                                             enablePublicQueriesBusyFeedback:false,
                                             filteredPublicEntries: list,
                                             initialFilteredPublicEntries: list,
                                             totalPublicResults: Object.keys(list).length,
                                             loadedPublicQueries: list
                                             });
                                          this.runPublicFilter();
                                          resolve(list);
                                      }
                                  }else{
                                    this.triggerError(res.data, 'public_load');
                                  }
                                resolve([]);
                        		}, error=>{
                        		    if(error.response.status === 404){
                        		        this.setState({
                                                      enablePublicQueriesBusyFeedback:false,
                                                      filteredPublicEntries: [],
                                                      totalPublicResults: 0,
                                                      initialFilteredPublicEntries:[],
                                                      loadedPublicQueries: []
                                                    });
                        		    }else{
                        		        this.triggerError(error.response.data, 'public_load');
                        		    }
                        		    resolve([]);
                        		}).catch(error => {
                        		    this.triggerError(error, 'public_load');
                        		    resolve([]);
                            })
                        })
    }
  getCommunityQueries = () => {
      settings['ISTABULAR'] = true;
      return new Promise((resolve, reject) => {
                          commonApi(settings, 'queries/community_shared=true', 'GET', null, 'BYOQCommunityQueries', GlobalExtConstants.OVERRIDE_DOMAIN)
                          		.then(res => {
                          			console.log('res:' + res.data, 'load');
                          			if(res.status === 200 || res.status === 404){
                          			    if(res.data.status && (res.data.status !== 200 && res.data.status !== 201 && res.data.status !== 404)){
                          			        this.triggerError(res.data);
                          			    }else{
                          			        var list = this.processQueryResponse(res.data);
                          			        this.setState({
                                               enableCommunityQueriesBusyFeedback:false,
                                               filteredCommunityEntries: list,
                                               initialFilteredCommunityEntries: list,
                                               totalCommunityResults: Object.keys(list).length,
                                               loadedCommunityQueries: list
                                               });
                                            this.runCommunityFilter();
                                            resolve(list);
                                        }
                                    }else{
                                      this.triggerError(res.data, 'community_load');
                                    }
                                  resolve([]);
                          		}, error=>{
                          		    if(error.response.status === 404){
                          		        this.setState({
                                                        enableCommunityQueriesBusyFeedback:false,
                                                        filteredCommunityEntries: [],
                                                        totalCommunityResults: 0,
                                                        initialFilteredCommunityEntries:[],
                                                        loadedCommunityQueries: []
                                                      });
                          		    }else{
                          		        this.triggerError(error.response.data, 'community_load');
                          		    }
                          		    resolve([]);
                          		}).catch(error => {
                          		    this.triggerError(error, 'community_load');
                          		    resolve([]);
                              })
                          })
  }
  getPrivateQueries = () => {
        settings['ISTABULAR'] = true;
        let query='queries/is_public=false';
        if(sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId')){
            query+='&creator=' + sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId');
        }        
        return new Promise((resolve, reject) => {
          commonApi(settings, 'queries/is_public=false&creator=' + sessionStorage.getItem(GlobalExtConstants.ENVIRONMENT + 'userId'), 'GET', null, 'BYOQPersonalQueries', GlobalExtConstants.OVERRIDE_DOMAIN)
          		.then(res => {
          			console.log('res:' + res.data, 'load');
          			if(res.status === 200 || res.status === 404){
          			    if(res.data.status && (res.data.status !== 200 && res.data.status !== 201 && res.data.status !== 404)){
          			        this.triggerError(res.data);
          			    }else{
          			        var list = this.processQueryResponse(res.data);
          			        this.setState({
                                 enablePersonalQueriesBusyFeedback:false,
                                 filteredPersonalEntries: list,
                                 initialFilteredPersonalEntries: list,
                                 totalPersonalResults: Object.keys(list).length,
                                 loadedPersonalQueries: list
                                 });
                              this.runPersonalFilter();
                              resolve(list);
                          }
                      }else{
                        this.triggerError(res.data, 'personal_load');
                      }
                      resolve([]);
          		}, error=>{
          		    if(error.response.status === 404){
          		        this.setState({
                                          enablePersonalQueriesBusyFeedback:false,
                                          filteredPersonalEntries: [],
                                          initialFilteredPersonalEntries: [],
                                          totalPersonalResults: 0,
                                          loadedPersonalQueries: []
                                        });
          		    }else{
          		        this.triggerError(error.response.data, 'personal_load');
          		    }
          		     resolve([]);
          		}).catch(error => {
          		    this.triggerError(error, 'personal_load');
          		    resolve([]);
                })
           })
  }
  getQueries = () =>{
    var state = this;
    this.getCommunityQueries();
    Promise.all([
      this.getPublicQueries(),
      this.getPrivateQueries()
      ])
      .then(function (responses) {
      	var result = Object.assign({}, responses[0], responses[1]);
        state.props.setQueriesState(result);
        state.setState({loadQueryList:[],publicLoadQueryList:[],personalLoadQueryList:[],communityLoadQueryList:[],selectedCount:0});
      }).catch(function (error) {
      	console.log(error);
      });
  };
  triggerError = (error, type) => {
    console.error('[CustomDslSaveLoad.jsx] error : ', JSON.stringify(error));
  	let errMsg = '';
  	if(error.status && error.message){
  	    errMsg += "Error Occurred: " + error.status + ' - ' +error.message;
  	}else{
  	    errMsg += "Error Occurred: " + JSON.stringify(error);
  	}
  	console.log(errMsg);
  	if(type === 'public_load'){
        this.setState({queriesPublicErrMsg:errMsg,
                       enablePublicQueriesBusyFeedback:false,
                       filteredPublicEntries: [],
                       totalPublicResults: 0,
                       loadedPublicQueries: []});
        var result = Object.assign({}, [], this.state.loadedPersonalQueries);
        this.props.setQueriesState(result);
    }else if(type === 'personal_load'){
        this.setState({queriesPersonalErrMsg:errMsg,
                       enablePersonalQueriesBusyFeedback:false,
                       filteredPersonalEntries: [],
                       totalPersonalResults: 0,
                       loadedPersonalQueries: []});
        var result = Object.assign({}, this.state.loadedPublicQueries, []);
        this.props.setQueriesState(result);
    }else if(type === 'community_load'){
        this.setState({queriesCommunityErrMsg:errMsg,
                       enableCommunityQueriesBusyFeedback:false,
                       filteredCommunityEntries: [],
                       totalCommunityResults: 0,
                       loadedCommunityQueries: []});
        var result = Object.assign({}, this.state.loadedCommunityQueries, []);
        this.props.setQueriesState(result);
    }else if (type === 'delete'){
        this.setState({deleteErrMsg: errMsg + " - Failed to delete query : " + this.state.focusedEntryName, enableDeleteBusyFeedback:false});
        GeneralCommonFunctions.scrollTo("deleteError");
    }else{
        console.log('[CustomDslSaveLoad.jsx] :: triggerError invoked with invalid type : ' + type);
    }
  }

  runPublicFilter = () =>{
    var updatedList = this.state.loadedPublicQueries;
    updatedList = Object.keys(updatedList).filter(key => {
                return JSON.stringify(updatedList[key]).toLowerCase().search(this.state.filterPublicCriteria.toLowerCase()) !== -1;
             }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} );
             this.setState({filteredPublicEntries: updatedList, totalPublicResults: Object.keys(updatedList).length},()=>{if(this.state.selectedOption["public"].length>0){this.filterPublicListWithCategory(this.state.filterPublicCriteria)}});
  }
  runCommunityFilter = () =>{
    var updatedList = this.state.loadedCommunityQueries;
    updatedList = Object.keys(updatedList).filter(key => {
                return JSON.stringify(updatedList[key]).toLowerCase().search(this.state.filterCommunityCriteria.toLowerCase()) !== -1;
             }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} );
             this.setState({filteredCommunityEntries: updatedList, totalCommunityResults: Object.keys(updatedList).length},()=>{if(this.state.selectedOption["community"].length>0){this.filterCommunityListWithCategory(this.state.filterCommunityCriteria)}});
  }
  runPersonalFilter = () =>{
    var updatedList = this.state.loadedPersonalQueries;
    updatedList = Object.keys(updatedList).filter(key => {
                return JSON.stringify(updatedList[key]).toLowerCase().search(this.state.filterPersonalCriteria.toLowerCase()) !== -1;
             }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} );
             this.setState({filteredPersonalEntries: updatedList, totalPersonalResults: Object.keys(updatedList).length},()=>{if(this.state.selectedOption["personal"].length>0){this.filterPersonalListWithCategory(this.state.filterPersonalCriteria)}});
  }

  addElement = (element) =>{
    var updatedList = this.state.loadedPublicQueries;
    updatedList[element.id] = element[0];
    this.setState({loadedPublicQueries: updatedList});
    this.props.setQueriesState(updatedList);
    this.runPublicFilter();
  }

  submitDelete = () =>{
     var loadedQueries = [];
     if(this.state.focusedEntryType === "personal"){
        loadedQueries = this.state.loadedPersonalQueries;
     }else{
        loadedQueries = this.state.loadedPublicQueries;
     }
     this.setState({enableDeleteBusyFeedback:true});
     settings['ISTABULAR'] = true;
     commonApi(settings, 'queries/' + encodeURIComponent(this.state.queryId), 'DELETE', '{\"id\":\"'
        + encodeURIComponent(this.state.queryId) + '\"}', 'BYOQDeleteQuery', GlobalExtConstants.OVERRIDE_DOMAIN, null,
        [{
            "name":"If-Match",
            "value": loadedQueries[this.state.queryId].version
         }])
            		.then(res => {
            			console.log('res:' + res.data);
            			if(res.status === 200){
            			    if(res.data.status && (res.data.status !== 200 && res.data.status !== 201)){
            			        this.triggerError(res.data, 'delete');
            			    }else{
            			        var updatedList = loadedQueries;
                                //remove the entry from the list
                                updatedList = Object.keys(updatedList).filter(key => {
                                   return key !== this.state.queryId;
                                }).reduce( (res, key) => Object.assign(res, { [key]: updatedList[key] }), {} );
                                this.setState({showDeleteModal:false,
                                               focusedEntryName: '',
                                               enableDeleteBusyFeedback:false,
                                               deleteSuccessfulMsg: "Successfully deleted query : " + this.state.focusedEntryName});
                                GeneralCommonFunctions.scrollTo("deleteSuccess");
                                if(this.state.focusedEntryType === "personal"){
                                   this.getCommunityQueries();
                                   this.setState({loadedPersonalQueries: updatedList});
                                   var result = Object.assign({}, this.state.loadedPublicQueries, updatedList);
                                   this.props.setQueriesState(result);
                                }else{
                                   this.setState({loadedPublicQueries: updatedList});
                                   var result = Object.assign({}, updatedList, this.state.loadedPersonalQueries);
                                   this.props.setQueriesState(result);
                                }
                                this.runPublicFilter();
                                this.runCommunityFilter();
                                this.runPersonalFilter();
                            }
            			}else{
            			    this.triggerError(res.data, 'delete');
            			}
            		}, error=>{
            		    this.triggerError(error.response.data, 'delete');
            		}).catch(error => {
            		    this.triggerError(error, 'delete');
     });
  };

  openDeleteModal = (id,name, isPublic) =>{
    var focusedEntryType = "public";
    if(isPublic === "true"){
        focusedEntryType = "public";
    }else{
        focusedEntryType = "personal";
    }
    this.setState({showDeleteModal:true, focusedEntryName: name, focusedEntryType: focusedEntryType, deleteSuccessfulMsg:false, deleteErrMsg:false, queryId:id});
  };

  closeDeleteModal = () =>{
    this.setState({showDeleteModal:false, focusedEntryName: '', focusedEntryType: false, deleteSuccessfulMsg:false, deleteErrMsg:false, queryId:''});
  };

  loadQuery = (e) =>{
    this.loadQueryData(e.target.value,0);
  };
  loadQueryData=(queryTemp, id)=>{
    let splitString = queryTemp.split('||');
    let name = splitString[0];
    let description = splitString[1];
    let category=(splitString[2] !== 'undefined')? splitString[2]:'';
    let dsl = splitString[3];
    let isAggregate = splitString[4];
    let type = splitString[5];
    let queryId = splitString[6];
    let isCommunityShared = splitString[7];
    let templateDetails = splitString[8];
    this.props.loadCallback(name, description, category, dsl, isAggregate, type, queryId, isCommunityShared, id, templateDetails, false);
  };
  loadBulkCallback =() =>{
    this.props.loadBulkCallback(this.state.loadQueryList);
  }
  loadAndRunQuery = (e) =>{
    let splitString = (e.target.value).split('||');
    let dsl = splitString[0];
    let isAggregate = splitString[1];
    this.props.loadCallback('', '', '', dsl, isAggregate, null, '', null, 0, [], true);
  };
  onMultiSelectPublicDropdownSelect = (selectedOption) =>{
    console.log('onMultiSelectPublicDropdownSelect selectedList',selectedOption);
    var tempSelection = this.state.selectedOption;
    tempSelection["public"] = selectedOption;
    this.setState({selectedOption:tempSelection},()=>{this.filterPublicListWithCategory(this.state.filterPublicCriteria)});
  };
  onMultiSelectCommunityDropdownSelect = (selectedOption) =>{
    console.log('onMultiSelectCommunityDropdownSelect selectedList',selectedOption);
    var tempSelection = this.state.selectedOption;
    tempSelection["community"] = selectedOption;
    this.setState({selectedOption:tempSelection},()=>{this.filterCommunityListWithCategory(this.state.filterCommunityCriteria)});
  };
  onMultiSelectPersonalDropdownSelect = (selectedOption) =>{
    console.log('onMultiSelectPersonalDropdownSelect selectedList',selectedOption);
    var tempSelection = this.state.selectedOption;
    tempSelection["personal"] = selectedOption;
    this.setState({selectedOption:tempSelection},()=>{this.filterPersonalListWithCategory(this.state.filterPersonalCriteria)});
  };
  prepareMultiOptions = (type) => {
    //this.setState({activeType:type});
    let filteredEntries=[];
    if(type==='public'){
        filteredEntries=this.state.initialFilteredPublicEntries;
    }else if(type==='community'){
        filteredEntries=this.state.initialFilteredCommunityEntries;
    }else{
        filteredEntries=this.state.initialFilteredPersonalEntries;
    }
    let dupArray=[];
    let  multiOption=Object.keys(filteredEntries).map((entry, idx) => {
                let obj ={};
                if(filteredEntries[entry]['category'] && dupArray.indexOf(filteredEntries[entry]['category']) === -1){
                    obj['value']=filteredEntries[entry]['category'];
                    obj['label']= filteredEntries[entry]['category'];
                    dupArray.push(filteredEntries[entry]['category']);
                }else{
                    obj='';
                }
                return obj;       
            });    
     let filterMultiOption = multiOption.filter((entry) => {
            if(entry !== '') return entry;             
     });    
     console.log('filterMultiOption>>>>>',filterMultiOption);   
     return filterMultiOption;       
  };
  editSavedQuery = (e) =>{
    let splitString = (e.target.value).split('||');
    let name = splitString[0];
    let description = splitString[1];
    let category = (splitString[2] !== 'undefined')? splitString[2]:'';
    let dsl = atob(splitString[3]).replace('<pre>','').replace('</pre>','');
    let isAggregate = splitString[4];
    let type = splitString[5];
    let queryId= splitString[6];
    let isCommunityShared = splitString[7];
    let templateDetails = splitString[8];
    this.props.editCallback(name, description, category, dsl, isAggregate, type, queryId, isCommunityShared, templateDetails);
  };
  loadAllQueries = () =>{
    console.log('this.state.loadQueryList>>>>',this.state.loadQueryList);
    let loadQueryList=this.state.loadQueryList;
    for(var l=0;l<loadQueryList.length;l++){
        this.loadQueryData(loadQueryList[l],l);
    }
  };
  onSelectCheckbox=(e) =>{
    let splitString = (e.target.value).split('||');   
    let type = splitString[5];
    let queryId=splitString[6];
    let queryList='';
    let loadQuery='';
    if(type =='public'){
        queryList=this.state.filteredPublicEntries;
        loadQuery= this.state.publicLoadQueryList;
    }else if (type == 'personal'){
        queryList=this.state.filteredPersonalEntries;
        loadQuery= this.state.personalLoadQueryList;        
    }else{
        queryList=this.state.filteredCommunityEntries;
        loadQuery= this.state.communityLoadQueryList;
    }
    let flag= true;
    if (e.target.checked) {        
        if(loadQuery.length<10){
            loadQuery.push(e.target.value);
            queryList[queryId].isSelect=true;        
        }    
    }else{
        let index=loadQuery.indexOf(e.target.value);
        loadQuery.splice(index,1);
        queryList[queryId].isSelect=false;         
    }
    flag=(loadQuery.length<=10)?true:false;
    if(type=='public'){
        this.setState({loadQueryList:loadQuery,publicLoadQueryList:loadQuery,personalLoadQueryList:[],communityLoadQueryList:[],filteredPublicEntries:queryList,loadQueryFlag:flag,selectedCount:loadQuery.length});
    }else if(type=='personal'){
        this.setState({loadQueryList:loadQuery,personalLoadQueryList:loadQuery,publicLoadQueryList:[],communityLoadQueryList:[],filteredPersonalEntries:queryList,loadQueryFlag:flag,selectedCount:loadQuery.length});
    } else{
        this.setState({loadQueryList:loadQuery,communityLoadQueryList:loadQuery,publicLoadQueryList:[],personalLoadQueryList:[],filteredCommunityEntries:queryList,loadQueryFlag:flag,selectedCount:loadQuery.length});
    }   
  }
  render() {
        let savedQueryCard = (type, totalCount, filterList, filteredEntries) =>{
                                let onMultiSelectDropdownSelect= (type==='public') ? this.onMultiSelectPublicDropdownSelect : (type==='community') ? this.onMultiSelectCommunityDropdownSelect : this.onMultiSelectPersonalDropdownSelect;
                                return <div className='card d3-model-card'>
                                          <div className={'card-header ' + (this.props.isSavedQueryFlow ? 'show' : 'hidden')}>
                                               <div>
                                                 <h3>Find A Query</h3>
                                               </div>
                                          </div>
                                          <div className='card-header'>
                                               <div>
                                                 <div style={{width:'82%',float:'left'}}>
                                                    <h5>Total Saved Queries: <strong>{totalCount}</strong></h5>
                                                 </div>
                                                 <div className={(this.props.isSavedQueryFlow ? 'show' : 'hidden')}>
                                                    <OverlayTrigger  placement='top' overlay={<Tooltip id='tooltip-top'>{'Enabled for up to '+this.state.loadQueryLimit+' Queries'}</Tooltip>}>
											            <span className="d-inline-block" style={{display: 'inline-block'}}>
                                                            <button className='btn btn-outline-primary' type='button' onClick={()=>this.loadBulkCallback()} disabled={!(this.state.loadQueryList.length<=10 && this.state.loadQueryList.length>0)}>Load Selected Queries</button>
                                                        </span>
                                                    </OverlayTrigger>
                                                 </div>                                                             
                                               </div>
                                               <div>
                                                   <form>
                                                       <div className='alignFormTwinElements'>
                                                       <fieldset className="form-group">
                                                           <input type="text" className="form-control form-control-lg" placeholder="Search" onChange={filterList}/>
                                                       </fieldset>
                                                       </div>
                                                       <div className='alignFormTwinElements'>
                                                       <fieldset className="form-group">
                                                            <MultiSelectDropDown
                                                                    options={this.prepareMultiOptions(type)}
                                                                    displayValue={this.state.displayValue}
                                                                    triggerSelect={onMultiSelectDropdownSelect}
                                                            />
                                                        </fieldset>
                                                       </div>
                                                   </form>
                                               </div>
                                          </div>
                                          <div className='card-content model-card-content'>
                                                 <table className="table table-hover table-striped">
                                                   <thead>
                                                     <tr>
                                                       <th scope='col' className={(this.props.isSavedQueryFlow ? 'show' : 'hidden')}>Select</th>
                                                       <th scope="col">Name</th>
                                                       <th scope="col">Description</th>
                                                       <th scope="col">Category</th>
                                                       <th scope="col">Creator</th>
                                                       <th scope="col">Aggregate</th>
                                                       <th scope="col" className={((type === 'personal') ? '' : 'hidden')}>Shared</th>
                                                       <th scope="col">Actions</th>
                                                     </tr>
                                                   </thead>
                                                   <tbody>
                                                   {Object.keys(filteredEntries).sort(function(a, b) {
                                                                                                      var compareA = a.toUpperCase();
                                                                                                      var compareB = b.toUpperCase();
                                                                                                      if(compareA < compareB) return -1;
                                                                                                      if(compareA > compareB) return 1;
                                                                                                      return 0;
                                                                                                     }).map((entry, idx) => {                                                                                                        
                                                                                                     return (                                                                                                     
                                                                                                       <tr>
                                                                                                         <td className={(this.props.isSavedQueryFlow ? '' : 'hidden')}>
                                                                                                            <div className="checkbox">
                                                                                                            <OverlayTrigger  placement='top' overlay={<Tooltip id='tooltip-top'>{(this.state.selectedCount===this.state.loadQueryLimit)?'Reached Maximun Template Count '+this.state.loadQueryLimit:(this.state.loadQueryLimit-this.state.selectedCount)+' More Selectable'}</Tooltip>}>
                 		    	 	                                                                            <span className="d-inline-block" style={{display: 'inline-block'}}>						    				
                                                                                                                <label>
                                                                                                                    <input type="checkbox" checked={filteredEntries[entry].isSelect} onChange={this.onSelectCheckbox.bind(this)} value={filteredEntries[entry].name + '||' + filteredEntries[entry].description + '||' + filteredEntries[entry].category + '||' + filteredEntries[entry].dsl + '||' + filteredEntries[entry]['is_aggregate'] + '||' +  type + '||' + entry + '||' + filteredEntries[entry]['community_shared'] + '||' + filteredEntries[entry]['template_details']} disabled={!filteredEntries[entry].isSelect && !this.state.loadQueryFlag}/>
                                                                                                                </label>
                                                                                                                </span>
                                                                                                            </OverlayTrigger>
                                                                                                            </div>
                                                                                                        </td>
                                                                                                         <td><strong>{filteredEntries[entry].name}</strong></td>
                                                                                                         <td>{filteredEntries[entry].description}</td>
                                                                                                         <td width='15%'>{(filteredEntries[entry].category)?filteredEntries[entry].category:''}</td>
                                                                                                         <td>{filteredEntries[entry].creator}</td>
                                                                                                         <td>{filteredEntries[entry]['is_aggregate']}</td>
                                                                                                         <td className={((type === 'personal') ? '' : 'hidden')}>{filteredEntries[entry]['community_shared']}</td>
                                                                                                         <td className="actionsRow">
                                                                                                             <div>
                                                                                                         	    <button className={'btn btn-primary ' + (!this.props.isDSLBuilder ? '' : 'hidden')} type='button' value={filteredEntries[entry].dsl + "||" + filteredEntries[entry]['is_aggregate']} onClick={this.loadAndRunQuery}>Run</button>
                                                                                                         	    <button className='btn btn-outline-secondary' type='button' value={filteredEntries[entry].name + '||' + filteredEntries[entry].description + '||' + filteredEntries[entry].category + '||' + filteredEntries[entry].dsl + '||' + filteredEntries[entry]['is_aggregate'] + '||' +  type + '||' + entry + '||' + filteredEntries[entry]['community_shared'] + '||' + filteredEntries[entry]['template_details']  } onClick={this.loadQuery}>Load</button>
                                                                                                                <button className={'btn btn-outline-secondary ' + ((this.props.isDataSteward || type === 'personal') && type !== 'community' && !this.props.isDSLBuilder ? '' : 'hidden')} type='button' value={filteredEntries[entry].name + '||' + filteredEntries[entry].description + '||' + filteredEntries[entry].category + '||' + filteredEntries[entry].dsl + '||' + filteredEntries[entry]['is_aggregate'] + '||' +  type +'||' + entry + '||' + filteredEntries[entry]['community_shared'] + '||' + filteredEntries[entry]['template_details']} onClick={this.editSavedQuery}>Edit</button>
                                                                                                                <button className={'btn btn-outline-secondary ' + ((this.props.isDataSteward || type === 'personal') && type !== 'community' && !this.props.isDSLBuilder ? '' : 'hidden')} type='button' onClick={(e) => this.openDeleteModal(entry,filteredEntries[entry].name, filteredEntries[entry]['is_public'])}>Delete</button>
                                                                                                             </div>
                                                                                                         </td>
                                                                                                       </tr>
                                                                                                     );
                                                                                             })}
                                                   </tbody>
                                                 </table>
                                          </div>
                                      </div>};
        let savedQueryMessaging = (type, loadedQueries, queryErrMsg) => { return <Col>
                                <Alert className={!queryErrMsg ? 'show' : 'hidden'} bsStyle="warning">
                                    {type === 'public' && <h3>No Saved Public Queries Loaded</h3>}
                                    {type === 'community' && <h3>No Saved Community Shared Queries Loaded</h3>}
                                    {type === 'personal' && <h3>No Saved Personal Queries Loaded</h3>}
                                </Alert>
                                <Alert bsStyle="danger" className={queryErrMsg ? 'show' : 'hidden'} onDismiss={() => {
                                                                                                                   if(type==='public'){
                                                                                                                      this.setState({queriesPublicErrMsg: false});
                                                                                                                   }else if (type === 'community'){
                                                                                                                      this.setState({queriesCommunityErrMsg: false});
                                                                                                                   }else{
                                                                                                                      this.setState({queriesPersonalErrMsg: false});
                                                                                                                   }}}>
                                    <h3>An error occurred</h3>
                                    <p>
                                      {queryErrMsg}
                                    </p>
                                </Alert>
                              </Col>
        }
        let savedQueryTabs = () => { return <Tabs defaultActiveKey={'1'} id="multipleTabularView">
                                                <Tab eventKey={'1'} title={'Public'}>
                                                    <Spinner loading={this.state.enablePublicQueriesBusyFeedback}>
                                                        {Object.keys(this.state.loadedPublicQueries).length <= 0 && (<div>{savedQueryMessaging('public', this.state.loadedPublicQueries, this.state.queriesPublicErrMsg)}</div>)}
                                           	            {Object.keys(this.state.loadedPublicQueries).length > 0 && (<div>{savedQueryCard('public', this.state.totalPublicResults, this.filterPublicList, this.state.filteredPublicEntries)}</div>)}
                                           	        </Spinner>
                                           	    </Tab>
                                           	    <Tab eventKey={'2'} title={'Community'}>
                                                    <Spinner loading={this.state.enableCommunityQueriesBusyFeedback}>
                                                        {Object.keys(this.state.loadedCommunityQueries).length <= 0 && (<div>{savedQueryMessaging('community', this.state.loadedCommunityQueries, this.state.queriesCommunityErrMsg)}</div>)}
                                                        {Object.keys(this.state.loadedCommunityQueries).length > 0 && (<div>{savedQueryCard('community', this.state.totalCommunityResults, this.filterCommunityList, this.state.filteredCommunityEntries)}</div>)}
                                                    </Spinner>
                                                </Tab>
                                           	    <Tab eventKey={'3'} title={'My Personal Queries'}>
                                           	       <Spinner loading={this.state.enablePersonalQueriesBusyFeedback}>
                                           	            {Object.keys(this.state.loadedPersonalQueries).length <= 0 &&(<div>{savedQueryMessaging('personal', this.state.loadedPersonalQueries, this.state.queriesPersonalErrMsg)}</div>)}
                                                        {Object.keys(this.state.loadedPersonalQueries).length > 0 && (<div>{savedQueryCard('personal', this.state.totalPersonalResults, this.filterPersonalList, this.state.filteredPersonalEntries)}</div>)}
                                                   </Spinner>
                                                </Tab>
                                           </Tabs>
        };
        if (!GlobalExtConstants.INVLIST.IS_ONAP){
            return (<div>
            <div className='static-modal'>
                      		<Modal show={this.state.showDeleteModal} onHide={this.closeDeleteModal} dialogClassName="modal-override">
                      		    <Spinner loading={this.state.enableDeleteBusyFeedback}>
                      			    <Modal.Header>
                      			    	<Modal.Title>Delete DSL Query</Modal.Title>
                      			    </Modal.Header>
                      			    <Modal.Body>
                      			        <Alert id="deleteError" className={this.state.deleteErrMsg ? 'show' : 'hidden'} bsStyle="danger" onDismiss={() => this.setState({deleteErrMsg: false})}>
                                            <h3>An error occurred</h3>
                                            <p>
                                              {this.state.deleteErrMsg}
                                            </p>
                                         </Alert>
                                        <p>Are you sure you want to delete the following query?: {this.state.focusedEntryName}</p>
                      			    </Modal.Body>
                      			    <Modal.Footer>
                                    	<Button onClick={this.closeDeleteModal}>Cancel</Button>
                                    	<Button onClick={this.submitDelete}>Delete</Button>
                                    </Modal.Footer>
                                </Spinner>
                      		</Modal>
            </div>

              <Row>
                 <Col className={this.props.isSavedQueryFlow ? 'col-lg-10' : 'col-lg-12'}>
                    <Alert id="deleteSuccess" bsStyle="success" className={this.state.deleteSuccessfulMsg ? 'show' : 'hidden'} onDismiss={() => this.setState({deleteSuccessfulMsg: false})}>
                            <h3>Delete Successful</h3>
                            <p>
                              {this.state.deleteSuccessfulMsg}
                            </p>
                    </Alert>
                    {!this.props.isSavedQueryFlow && (<Panel>
                      <Panel.Heading>
                        <Panel.Title toggle>
                          <div className="checkbox">
                             <h2>Saved Queries</h2>
                          </div>
                        </Panel.Title>
                      </Panel.Heading>
                      <Panel.Collapse>
                        <Panel.Body className='cardwrap'>
                            {savedQueryTabs()}
                        </Panel.Body>
                      </Panel.Collapse>
                    </Panel>)}
                    {this.props.isSavedQueryFlow && savedQueryTabs()}
                  </Col>
                 </Row>
          </div>);
        }else{
            return (<span></span>);
        }
   }
}

export default CustomDSLSaveLoad;