/*
 * ============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 Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import ModelCard from './ModelCard.jsx';
import Modal from 'react-bootstrap/lib/Modal';
import Button from 'react-bootstrap/lib/Button';
import BootstrapTable from 'react-bootstrap-table-next';
import {ExportExcel} from 'utils/ExportExcel.js';
import filterFactory, { textFilter, customFilter } from 'react-bootstrap-table2-filter';
//import overlayFactory from 'react-bootstrap-table2-overlay';
import OutputVisualization from 'generic-components/OutputVisualization.jsx';
import RelationshipList from './ModelTabularView.jsx';
import PropTypes from 'prop-types';
import Tabs from 'react-bootstrap/lib/Tabs';
import Tab from 'react-bootstrap/lib/Tab';
import commonApi from 'utils/CommonAPIService.js';
import {GlobalExtConstants} from 'utils/GlobalExtConstants.js';
import {GeneralCommonFunctions} from 'utils/GeneralCommonFunctions.js';
import Spinner from 'utils/SpinnerContainer.jsx';

let INVLIST = GlobalExtConstants.INVLIST;
let ENVIRONMENT = GlobalExtConstants.ENVIRONMENT;

/**
 * This function will take all of the node objects and turn them into
 * a ui grid of ModelCard components. This function is essentially a container
 * for the ModelCards
 * @param props
 * @returns {*}
 */
class AttributeFilter extends Component {
  
  constructor(props) {
    super(props);
    this.filter = this.filter.bind(this);
    this.getValue = this.getValue.bind(this);
    this.props = props;
    this.state = {
      filterText: '',
      isPageChange: this.props.isPageChange,
      columnValue : ''
    };
  }
  getValue = () => {
    return this.input.value;
  }
  setPlaceHolder = () => {
    let filterText = '';
    if(filterText === ''){
      filterText = 'Enter ' + this.props.column.text;
    }
    return filterText;
  }
  setFilterValue = () =>{
    let filterText = '';
    var columnFilter = this.props.columnFilterList[this.props.nodeType][0];
    for(var i=0;i<columnFilter.length;i++){
      if(columnFilter[i][this.props.column.text] != undefined){
        filterText = columnFilter[i][this.props.column.text];        
      }
    }    
    return filterText;
  }
  filter = () => {
    let txt=this.props.column.text;
    let obj = {};
    obj[txt] = this.getValue();
    var columnFilterList = this.props.columnFilterList;
    var columnFilter = columnFilterList[this.props.nodeType][0];    
   for(var i=0;i<columnFilter.length;i++){
      if(columnFilter[i][txt] != undefined){
        columnFilter[i][txt] = this.getValue();
        columnFilterList[this.props.nodeType] = [];
        columnFilterList[this.props.nodeType].push(columnFilter);
        this.props.handleOnFilter(columnFilterList,this.props.nodeType,this.props.columns,this.getValue(),this.props.aliasColumnList);        
        this.props.onFilter(this.getValue());      
      }
    }
  }
  render() {
    return (
      <div>
        
          <input
          key="input"
          ref={ node => this.input = node }
          type="text"
            placeholder={this.setPlaceHolder()}
           // value={this.setFilterValue}
            onChange={this.filter}
          />
        
      </div>
    )
  }
}

class ModelGallery extends Component {
  constructor(props){
    super(props);
    this.props = props;
    this.state = {
      rerender: false,
      expanded: [],
      columnFilterList : {},
      columnsList: {},
      aliasColumnList: {},
      nodeType: '',
      disableFilter: true,
      showEditNodeModal: false,
      focusedNode: null,
      isEditSuccess: false,
      isWriteAllowed: sessionStorage.getItem(ENVIRONMENT + 'roles') && sessionStorage.getItem(ENVIRONMENT + 'roles').indexOf('ui_write') > -1,
      editInputFields: []
    }
  }
  componentWillMount() {
    console.log('Model gallery component will mount****');
  }
  componentWillUnmount() {
    console.log('Model Gallery component will unmount****');
  }
  handleOnExpand = (row, isExpand, rowIndex, e) => {
    console.log('handleOnExpand single Row...',row.id);
    if (isExpand) {
      this.setState(() => ({
        expanded: [...this.state.expanded,row.id]
      }));
    } else {
      this.setState(() => ({
        expanded: this.state.expanded.filter(x => x !== row.id)
      }),function () { this.forceUpdate(); }.bind(this));
      
    }
  }
  handleOnExpandAll = (isExpand, rows, e) => {
    console.log('handleOnExpandAll to expand all rows');
    var expandArr = [];    
    if (isExpand) {
      for(var r=0; r < rows.length; r++){
        expandArr.push(rows[r].id);
      }     
    }
    this.setState(() => ({
      expanded: expandArr
    }),function () { this.forceUpdate(); }.bind(this));
    
  } 
  handleOnFilter = (colFilterList,nodeType,columns,value,aliasColumnList) =>{
    console.log('handleOnFilter to Re-render',colFilterList);
    var applyState = true;
    if(value === ''){
      Object.keys(colFilterList).forEach(function(pkey){
        var filterList = colFilterList[pkey][0];
        for(var j in filterList){
          Object.keys(filterList[j]).forEach(function(key){         
            if(filterList[j][key] !== ''){
              applyState = false;
            }
          });
        }        
      });
    }else{
      applyState = false;
    }  
    this.setState({columnFilterList : colFilterList,rerender:true,columnsList : columns,nodeType: nodeType, disableFilter: applyState,aliasColumnList: aliasColumnList});    
  } 
  generateRegexForDsl= (nodeType) =>{
    var nodePatternwithProp = nodeType+"\\*\\{.*?\\}\\(.*?\\)[\\,|\\>|\\]|\\)]|"+nodeType+"\\*\\(.*?\\)\\{.*?\\}[\\,|\\>|\\]|\\)]|"+nodeType+"\\{.*?\\}\\(.*?\\)[\\,|\\>|\\]|\\)]|"+nodeType+"\\(.*?\\)\\{.*?\\}[\\,|\\>|\\]|\\)]|"+nodeType+"\\{.*?\\}[\\,|\\>|\\]|\\)]|"+nodeType+"\\*\\{.*?\\}[\\,|\\>|\\]|\\)]";
		return nodePatternwithProp;
  }
  /* Start Edit Node Modal Functions */
  closeEditNodeModal = () =>{
    this.setState({editErrMsg: null, editInfoMsg: null, showEditNodeModal:false});
  }
  submitEditNodeModal = () =>{
    var payload = {"operations": []};
    const settings = {
      'NODESERVER': INVLIST.NODESERVER,
      'PROXY': INVLIST.PROXY,
      'PREFIX': INVLIST.PREFIX,
      'VERSION': INVLIST.VERSION,
      'USESTUBS': INVLIST.useStubs,
      'APERTURE': INVLIST.APERTURE,
      'APERTURE_SERVICENAME':INVLIST.APERTURE_SERVICENAME
    };
    let delimiter = '\/';
    let start = 3;
    if((this.state.focusedNode.url).indexOf("/aperture/v") > -1){
        start = 4;
    }
    let tokens = (this.state.focusedNode.url).split(delimiter).slice(start);
    let patchURL = tokens.join(delimiter);
    var entry = {
                    "action": "patch",
                    "uri": patchURL,
                    "body": {}
                };
    let path = "bulk/single-transaction";
    this.setState({editErrMsg: null, isPatchLoading: true});
    for(var key in this.state.editInputFields){
        if(this.state.editInputFields[key].isEdited){
            if(this.state.editInputFields[key].newValue !== ""){
                entry.body[key] =  encodeURI(this.state.editInputFields[key].newValue);
            }else{
                entry.body[key] = null;
            }
        }
    }
    payload.operations.push(entry);
    console.log('ModelGallery: settings:' + JSON.stringify(settings));
    console.log('ModelGallery: path:' + path);
    console.log('ModelGallery: payload:' + JSON.stringify(payload));
    commonApi(settings, path, 'POST', payload, 'SingleTransactionEdit', null, null, null, true)
    .then(res => {
    	    console.log('ModelGallery: Response', Object.keys(res.data));
            if(res.status === 201 || res.status === 200){
                if(res.data["operation-responses"] && res.data["operation-responses"][0] && res.data["operation-responses"][0]["response-status-code"] === 200 ){
                    this.setState({isEditSuccess: true, isPatchLoading: false, showEditNodeModal:false});
                    GeneralCommonFunctions.scrollTo("editSuccessMessage");
                }else{
                    this.triggerError(res.data);
                }
            }else{
               this.triggerError(res.data);
            }
    	}, error=>{
    		this.triggerError(error);
    	}).catch(error => {
    		this.triggerError(error);
    });
  }
  triggerError = (error) => {
     console.error('[ModelGallery.jsx] error : ', JSON.stringify(error));
     let errMsg = this.renderErrorMsg(error);
     this.setState({
           isPatchLoading: false,
           isEditSuccess: false,
           editErrMsg: errMsg
       });
  };
  renderErrorMsg = (error) =>{
      let errMsg='';
        if (error.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            console.log('[ModeGallery.jsx] error :', error.response);
            if(error.response.status){
                errMsg += " Code: " + error.response.status;
            }
            if(error.response.data){
                errMsg += " - " + JSON.stringify(error.response.data);
            }
        } else if (error["requestError"]){
            errMsg += JSON.stringify(error["requestError"]);
        } else if (error.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(error.request);
            errMsg += " - Request was made but no response received";
        } else {
            // Something happened in setting up the request that triggered an Error
            console.log('Error', error.message);
            errMsg += " - Unknown error occurred " + error.message;
        }
       return errMsg;
  }
  openEditNodeModal = (nodeKey) => {
    console.log("ModelGallery :: openEditNodeModal called with " + nodeKey);
    var focusedNode = null;
    for (var i = 0; i < this.props.nodes.length && !focusedNode; i++){
        if(nodeKey === this.props.nodes[i].url){
            focusedNode = this.props.nodes[i];
            break;
        }
    }
    var editInputFields = [];
    if(focusedNode){
        var nodeType = focusedNode['node-type'];
        focusedNode.allowedEditProps = [];
        //call to check what props can be modified in oxm here;
        focusedNode.allowedEditProps = GeneralCommonFunctions.getEditableAttributes(nodeType);
        if(focusedNode.allowedEditProps.length > 0){
            for (var key in focusedNode.allowedEditProps){
                var attr = focusedNode.allowedEditProps[key];
                editInputFields[attr] = {};
                editInputFields[attr].isEdited = false;
                if(focusedNode.properties[attr]){
                    editInputFields[attr].oldValue = focusedNode.properties[attr];
                    editInputFields[attr].newValue = focusedNode.properties[attr];
                }else{
                    editInputFields[attr].oldValue = "";
                    editInputFields[attr].newValue = "";
                }
            }
        }else{
            this.setState({editInfoMsg: "This element cannot be edited, please contact an administrator if you need the ability to edit the attributes on this element."});
        }
    }else{
        //could not find the node, this shouldn't happen
        console.log("ModelGallery :: openEditNodeModal could not find " + nodeKey + " in this.props.nodes. This shouldn't happen.");
    }

    this.setState({showEditNodeModal:true, isEditSuccess: false, focusedNode: focusedNode, editInputFields: editInputFields});
  }
  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    var editInputFields = this.state.editInputFields;
    if(target.type === 'text'){
        editInputFields[name].newValue = value;
    }else if(target.type === 'checkbox'){
        if(!value){
            editInputFields[name].newValue =  editInputFields[name].oldValue,
            editInputFields[name].isEdited = value
        }else{
            editInputFields[name].isEdited = value
        }
    }
    this.setState({
              editInputFields: editInputFields
            });
  }
  /* End Edit Node Modal Functions */
  render(){
    let cards = null;
    let tableColumns = [];
    let tableValues = [];
    let rowIndexValue = 0;
    let svgWidth = window.outerWidth * 0.8;
    let nodesList=[];
    let tableColumnsList={};
    let tableDataList={};
    let columnFilter = [];
    let columnFilterList = (this.state.rerender) ? this.state.columnFilterList : {};
    let aliasColumnList=(this.state.rerender) ? this.state.aliasColumnList: {};
    let aliasRegex=/\'(\s)as(\s)\'|\'as\'/ig;
    console.log('Model gallery this.props>>>',this.props);
    console.log('columnFilterList while rendering:',columnFilterList);
    this.onTableFilterClick = (nodeType) => {
      this.setState({rerender:false},function(){this.props.isTableFilterApply(this.state.columnFilterList,nodeType,this.state.columnsList,this.state.aliasColumnList);}.bind(this))
    }
    const expandRows = {
      parentClassName: 'parent-expand-bar',
      onlyOneExpanding: true,
      renderer: (row, rowIndex) => (                    
        <div>
            <RelationshipList node={this.props.nodes[parseInt(row.id.split('_')[0])]}
                key={this.props.nodes[parseInt(row.id.split('_')[0])].id}
                nodeId={this.props.nodes[parseInt(row.id.split('_')[0])].id}
                nodeType={this.props.nodes[parseInt(row.id.split('_')[0])]['node-type']}
                nodeProps={this.props.nodes[parseInt(row.id.split('_')[0])].properties}
                nodeRelatives={this.props.nodes[parseInt(row.id.split('_')[0])]['related-to']}
                nodeUrl={this.props.nodes[parseInt(row.id.split('_')[0])].url}
                historyStackString={this.props.historyStackString}
                openHistoryModal={this.props.openHistoryModal}
                openEditNodeModal={this.openEditNodeModal}
                isWriteAllowed={this.state.isWriteAllowed}
                rowIndex={parseInt(row.id.split('_')[0])}
		enableRealTime={this.props.enableRealTime}
                aliasColumnList={this.props.tableFilterAliasColumns}
          />
        </div>
      ),
      showExpandColumn: true,
      expandByColumnOnly: true,     
      onExpandAll: this.handleOnExpandAll,
      expanded: this.state.expanded,
      onExpand: this.handleOnExpand

    };
    const rowEvents = {
      onClick: (e, row, rowIndex) => {
        //row index is usefull when single node type exist, for multiple node type use row id
        rowIndexValue = parseInt(row.id.split('_')[0]);        
      },
      onMouseEnter: (e, row, rowIndex) => {
        //row index is usefull when single node type exist, for multiple node type use row id
        rowIndexValue = parseInt(row.id.split('_')[0]);
      }
    };
    let aliasColumns=[]
    
    if(this.props.nodes && this.props.nodes[0] && this.props.nodes[0]['node-type'] && this.props.viewName === "CellLayout" ){
        for(var n=0; n<this.props.nodes.length; n++){
          let nodeType = this.props.nodes[n]['node-type'];
          let nodeTypeProperties =[];
          let aliasProperties=[];
          let plainNodes ='';
          let dslQuery = this.props.dslQuery + ',';
          if(this.props.dslQuery){
            var nodePatternwithProp = this.generateRegexForDsl(nodeType);
            var nodeRegularExp = new RegExp(nodePatternwithProp, 'g');
            plainNodes = dslQuery.match(nodeRegularExp);
            console.log('plainNodes model Gallery>>>>>*',plainNodes);
            if(plainNodes){
              let propertiesPattern ="\\{.*?\\}"; 
              var propRegularExp = new RegExp(propertiesPattern, 'g');
              let nodeTypeProp = plainNodes[0].match(propRegularExp);
              nodeTypeProp = nodeTypeProp[0].slice(1,-1).split(',');//.replace(/\'/g,'').toLowerCase().split(',');
              for(var s=0;s<nodeTypeProp.length;s++){
                let nodeTypePropes=nodeTypeProp[s].match(aliasRegex);
                let alias='';
                let nprop='';
                if(nodeTypePropes){
                  let nodeTypeSplit=nodeTypeProp[s].split(aliasRegex);
                  nprop=nodeTypeSplit[0].replace(/\'/g,'');                  
                  alias=nodeTypeSplit[nodeTypeSplit.length-1].replace(/\'/g,'');                 
                }else{
                  nprop=nodeTypeProp[s].replace(/\'/g,'').toLowerCase();
                } 
                aliasProperties.push(alias);
                nodeTypeProperties.push(nprop);
              }             
            }  
          }
          if(nodesList.indexOf(nodeType) === -1){
            tableColumns=[];
            tableValues=[];
            nodesList.push(nodeType);            
            let tableColumnsBuilt = ExportExcel.buildAttrList(nodeType,[],'required');
            if(this.props.dslQuery && plainNodes){
              for(var z=0;z<tableColumnsBuilt.length;z++){ 
                let index= nodeTypeProperties.indexOf(tableColumnsBuilt[z].value.toLowerCase());         
                if(index !== -1){
                  if(aliasProperties[index] !==''){
                    let objAlias = {};
                    objAlias[aliasProperties[index]]=nodeTypeProperties[index];
                    aliasColumns.push(objAlias);
                    tableColumnsBuilt[z].value=aliasProperties[index];                   
                  }
                  tableColumns.push(tableColumnsBuilt[z]);                                    
                }
              }
            }else{
              tableColumns=tableColumnsBuilt;
            }
            console.log('after condition table columns>>>>',tableColumns);
            tableColumns.push({value:'id'});
            if(!columnFilterList[nodeType]){             
              columnFilterList[nodeType] = [];
              columnFilter = [];
              for(var j = 0; j < tableColumns.length; j++){
                let txt = tableColumns[j].value;
                //if(!this.state.reRender && (!columnFilter[j] || (columnFilter[j] && columnFilter[j][txt] === undefined))){                
                  let obj = {};
                  obj[txt] = '';
                  obj['description'] = tableColumns[j].description;
                  columnFilter.push(obj);
                //}              
              }
              columnFilterList[nodeType].push(columnFilter); 
            }
            if(!aliasColumnList[nodeType]){   
              aliasColumnList[nodeType]=[]; 
              aliasColumnList[nodeType].push(aliasColumns);      
            }                 
            for(var j = 0; j < tableColumns.length; j++){                                         
              if(j === tableColumns.length-1){
                tableColumns[j].dataField = 'id';
                tableColumns[j].hidden = true;
                tableColumns[j].text = tableColumns[j].value;
              }else{
                tableColumns[j].dataField = tableColumns[j].value;
                tableColumns[j].text = tableColumns[j].value;
                tableColumns[j].headerAttrs= { title:tableColumns[j].description};
                tableColumns[j].ref=tableColumns[j].value;
                tableColumns[j].filter = customFilter();
                tableColumns[j].filterRenderer = (onFilter, column) => <AttributeFilter handleOnFilter= {this.handleOnFilter} onFilter={ onFilter } column={ column } isPageChange={this.props.isPageNumberChange} nodeType={nodeType} columnFilterList={columnFilterList} columns={tableColumnsList} aliasColumnList={aliasColumnList}/>;
              }
            }
            tableColumnsList[nodeType] = tableColumns;
            tableDataList[nodeType] = [];            
            for(var m=0; m<this.props.nodes.length; m++){
              let nodeTypeForData = this.props.nodes[m]['node-type'];
              if(nodeTypeForData === nodeType){
                let propertiesOfNode = this.props.nodes[m].properties; 
                propertiesOfNode.id = m + '_' + nodeType + '_id';         
                tableValues.push(propertiesOfNode);     
                tableDataList[nodeType].push(tableValues);  
              }
            }
          }                 
        }
    }else{
      cards = this.props.nodes.map(node => {
        return (
           <Col key={node.id} lg={3} md={3} sm={6} xs={12}>
                <ModelCard
                  key={node.id}
                  nodeId={node.id}
                  nodeType={node['node-type']}
                  nodeProps={node.properties}
                  nodeRelatives={node['related-to']}
                  nodeUrl={node.url}
                  historyStackString={this.props.historyStackString}
                  openHistoryModal={this.props.openHistoryModal}
                  openEditNodeModal={this.openEditNodeModal}
                  isWriteAllowed={this.state.isWriteAllowed}
                  enableRealTime={this.props.enableRealTime}
                  aliasColumnList={this.props.tableFilterAliasColumns}/>
            </Col>
        );
      });
    }
    let tabs=nodesList.map((nodeType,index) => {
      return(
        <Tab eventKey={nodeType} title={nodeType} key={nodeType}>
          <BootstrapTable
              id={nodeType}
              keyField='id'
              data={tableDataList[nodeType][0]}
              columns={tableColumnsList[nodeType]}
              filter={filterFactory()}
              bordered={true}
              columnFilter={true}
              headerClasses='table-header-view'
              expandRow={expandRows}
              rowEvents={rowEvents}
              bootstrap4 striped hover condensed
          />
        </Tab>
      )
    });
    return (
      <div>
       <div className={'addPaddingTop alert alert-success ' +(this.state.isEditSuccess ? 'show' : 'hidden')} id="editSuccessMessage" role="alert">
         Update made successfully to {this.state.focusedNode ? this.state.focusedNode.url : ""}. If you wish, you may check your update using a real-time mode query, it may take some time to reflect in analysis mode.
       </div>
	   <div className='static-modal'>
	   		<Modal show={this.state.showEditNodeModal} onHide={this.closeEditNodeModal}>
	   			<Modal.Header>
	   				<Modal.Title>Edit Element</Modal.Title>
	   			</Modal.Header>
	   			<Modal.Body>
	   			    <Spinner loading={this.state.isPatchLoading}>
	   			        <div className={'addPaddingTop alert alert-danger ' +(this.state.editErrMsg && this.state.editErrMsg !== '' ? 'show' : 'hidden')} id="editErrorMessage" role="alert">
                          An error occurred in editing the element. Please see details {this.state.editErrMsg}
                        </div>
                        <div className={'addPaddingTop alert alert-info ' +(this.state.editInfoMsg && this.state.editInfoMsg !== '' ? 'show' : 'hidden')} id="editNotAllowedMessage" role="alert">
                          {this.state.editInfoMsg}
                        </div>
	   			        <form>
	   			        {this.state.focusedNode && Object.keys(this.state.editInputFields).length > 0 && (this.state.focusedNode.allowedEditProps).sort().map((attr) => {
                            return <div class="form-group row">
                                       <div className="col-sm-3">
                                            <label for={attr} class="col-form-label">{attr}</label>
                                       </div>
                                       <div class="col-sm-1">
                                            <div className="checkbox">
                                               <input type="checkbox" name={attr} checked={this.state.editInputFields[attr].isEdited} onChange={this.handleInputChange.bind(this)} />
                                            </div>
                                       </div>
                                       <div class="col-sm-8">
                                         <input type="text" class="form-control" id={attr} name={attr} disabled={!this.state.editInputFields[attr].isEdited} onChange={this.handleInputChange.bind(this)} value={this.state.editInputFields[attr].newValue}/>
                                       </div>
                                     </div>;

                         })
                        }
                        </form>
                    </Spinner>
	   			</Modal.Body>
	   			<Modal.Footer>
	   				<Button onClick={this.closeEditNodeModal}>Close</Button>
	   				<Button className={this.state.editInfoMsg && this.state.editInfoMsg !== '' ? 'hidden' : ''} onClick={this.submitEditNodeModal}>Submit</Button>
	   			</Modal.Footer>
	   		</Modal>
       </div>
      {(() => {
              if (this.props.viewName === "CellLayout" && tableValues.length > 0) {
                if(nodesList.length > 1){
                  if(this.props.isTableFilterApply){
                    return (
                      <div className="addPaddingSide">
                        <button type='button' className={(this.state.disableFilter)? 'btn btn-outline-secondary' : 'btn btn-primary'} disabled={this.state.disableFilter} onClick={() => {this.onTableFilterClick(nodesList)}} style={{float: 'right', margin: '2px'}}>Apply Filters (All)</button>
                        <Tabs defaultActiveKey={nodesList[0]} id="multipleTabularView">
                          {tabs}
                        </Tabs>
                      </div>
                    )
                  }else{
                    return (
                      <div className="addPaddingSide">
                        <Tabs defaultActiveKey={nodesList[0]} id="multipleTabularView">
                          {tabs}
                        </Tabs>
                      </div>
                    )
                  }                
                }else{
                  if(this.props.isTableFilterApply){
                    return(
                      <div className="addPaddingSide">
                        <button type='button' className={(this.state.disableFilter)? 'btn btn-outline-secondary' : 'btn btn-primary'} disabled={this.state.disableFilter} onClick={() => {this.onTableFilterClick(this.state.nodeType)}} style={{float: 'right', margin: '10px'}}>Apply Filters (All)</button>
                        <BootstrapTable
                          id='modelGallery'
                          keyField='id'
                          data={ tableValues }
                          columns={ tableColumns }
                          filter={ filterFactory() }
                          bordered={ true }
                          columnFilter={ true }
                          headerClasses='table-header-view'
                          expandRow={ expandRows }
                          rowEvents={ rowEvents }
                          bootstrap4 striped hover condensed
                        />
                      </div>
                    )
                  }else{
                    return (
                      <div className="addPaddingSide">
                        <BootstrapTable
                          id='modelGallery'
                          keyField='id'
                          data={ tableValues }
                          columns={ tableColumns }
                          filter={ filterFactory() }
                          bordered={ true }
                          columnFilter={ true }
                          headerClasses='table-header-view'
                          expandRow={ expandRows }
                          rowEvents={ rowEvents }
                          bootstrap4 striped hover condensed
                        />
                      </div>
                    )
                  }                  
                }
              } else if (this.props.viewName === "CardLayout") {
                return (
                  <Grid fluid={true}>
                          <Row className='show-grid'>
                            {cards}
                          </Row>
                  </Grid>
                )
            }
           })()}
            <div className={this.props.viewName === "VisualLayout" ? 'show' : 'hidden'}>
                <OutputVisualization identifier="currentState" width={svgWidth} height="1200" overflow="scroll"/>
            </div>
      </div>
    );
  } 
};

export default ModelGallery;