/*
 *
 *   Copyright 2016 RIFT.IO Inc
 *
 *   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.
 *
 */
import React from 'react';
import DashboardCard from 'widgets/dashboard_card/dashboard_card.jsx';
import './launchpad_card.scss';
import LaunchpadNSInfo from './launchpadNSInfo.jsx';
import LaunchpadHeader from './launchpadHeader.jsx';
import MonitoringParamsCarousel from '../monitoring_params/monitoringParamsCarousel.jsx';
import LaunchpadControls from './launchpadControls.jsx';
import NfviMetricBars from 'widgets/nfvi-metric-bars/nfviMetricBars.jsx';
import MetricBarGroup from 'widgets/metric-bars/metricBarGroup.jsx';
import LoadingIndicator from 'widgets/loading-indicator/loadingIndicator.jsx';
import RecordViewStore from '../recordViewer/recordViewStore.js';
import TreeView from 'react-treeview';

import circleXImage from '../../node_modules/open-iconic/svg/circle-x.svg';

class LaunchpadCard extends React.Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps) {
    return true;
  }
  openLaunch = () => {
    this.context.router.push({pathname:'instantiate'});
  }
  render() {
    let html;
    let metrics = '';
    let monitoring_params_data;
    let deleting = false;
    let metricsAndParameters = [];
    let carousel = ''
    let closeCardAction = this.props.closeButtonAction;

    if(this.props.nsr && this.props.nsr.data) {
      metrics = this.props.nsr.data.map((info, index)=> {
          return (<LaunchpadNSInfo  key={index} name={info.name} data={info.data}/>)
      });
    }
    // debugger
    if(this.props.nsr && this.props.nsr["monitoring-param"]) {
      monitoring_params_data = this.props.nsr["monitoring-param"];
    } else {
      monitoring_params_data = null;
    }

    if (this.props.nsr && this.props.nsr.deleting) {
      deleting = true;
    }

    if(true) {
      // metricsAndParameters.push(<LaunchpadControls controlSets={this.props.nsr.nsControls} />)
      if (this.props.nsr) {
        if (this.props.nsr["nfvi-metrics"]) {
          metricsAndParameters.push((
                                     <div className="nfvi-metrics" key="nfviMetrics">
                                      <LpCardNfviMetrics key="nfvi-metrics" name="NFVI METRICS" id={this.props.id} data={this.props.nsr["nfvi-metrics"]} />
                                     </div>
                                     ))
        }
        if (this.props.nsr["epa-params"]) {
          metricsAndParameters.push(<EpaParams key="epa-params" data={this.props.nsr["epa-params"]} />);
        }
      }
      carousel = <MonitoringParamsCarousel component_list={monitoring_params_data} slideno={this.props.slideno}/>;
    }

    if(this.props.create){
      html = (
        <DashboardCard>
          <div className={'launchpadCard_launch'} onClick={this.openLaunch} style={{cursor:'pointer'}}>
            <img src={require("style/img/launchpad-add-fleet-icon.png")}/> Instantiate Network Service </div>
        </DashboardCard>
        );
    } else {
      let self = this;
      let closeButton = (
            <a onClick={self.props.closeButtonAction}
              className={"close-btn"}>
              <img src={circleXImage} title="Close card" />
              </a>
      );
      if (this.props.hasAccess) closebutton = null;
      html = (
        <DashboardCard className={'launchpadCard'} closeCard={closeButton}>
          <LaunchpadHeader nsr={this.props.nsr} name={this.props.name} isActive={this.props.isActive} id={this.props.id}/>
          {
          deleting ?
          <div className={'deletingIndicator'}>
            <LoadingIndicator size={10} show={true} />
          </div>
          :
          <div className="launchpadCard_content">
            <div className="launchpadCard_title">
              NSD: {this.props.nsr.nsd_name}
            </div>
            {carousel}
            {metricsAndParameters}
          </div>
          }
        </DashboardCard>
      );
    }
    return html;
  }
}
LaunchpadCard.contextTypes = {
    router: React.PropTypes.object
};
LaunchpadCard.propTypes = {
  nsr: React.PropTypes.object,
  isActive: React.PropTypes.bool,
  name: React.PropTypes.string
 };
LaunchpadCard.defaultProps = {
  name: 'Loading...',
  data: {},
  isActive: false
};

export class LpCardNfviMetrics extends React.Component {
  constructor(props) {
    super(props)
  }
  convertToArray(o){
    let a = [];
    Object.keys(o).map(function(k){
      a.push(o[k]);
    });
    return a;
  }
  render() {
    let mets = this.props.data;
    let self = this;
    let html = (
      <div style={{overflow: 'hidden'}}>
        <div className="launchpadCard_title">
          NFVI-METRICS
        </div>
        <div className="metricBars">
        { (mets && mets.length > 0 ) ? mets.map(function(m,i) {
          return <MetricBarGroup key={i} index={i} title={m.title} lp_id={self.props.id} data={m.data.sort(function(a,b){return a.id > b.id})} />
        }) : <div className="empty"> NO NFVI METRICS CONFIGURED</div>}
        </div>
      </div>
    )
    return html;
  }
}
export class EpaParams extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    let metrics =[];
    let epa = this.props.data;
    let count = 0;
    for(let k in epa) {
      let epaHTMLsub = [];
      let epaHTML;
      epaHTMLsub.push(buildParams(epa[k], count));
      epaHTML = (
        <li key={count + k}>
          <h1>{k}</h1>
          {
            epaHTMLsub
          }
        </li>
      );
      metrics.push(epaHTML);
      count++;
    }
    function buildParams(epa, index) {
      let html = [];
      let tCount = 0;
      let checkForTotal = function checkForTotal(epa, html, i) {
        for (let k in epa) {
          if("total" in epa[k]) {
            html.push(<dd key={"total" + tCount + k + i}>{k} : {epa[k].total} {(epa[k].total>1) ? 'vms' : 'vm'}</dd>)
          } else {
            html.push(<dt key={tCount + k + i}>{k}</dt>)
            checkForTotal(epa[k], html, tCount)
          }
          tCount++;
        }
      }
      checkForTotal(epa, html, index)
      return (<dl key={"subTop-" + index}>{html}</dl>);
    }
    let display = (<ul>
              {metrics}
            </ul>)
    // metrics = false;
    if(metrics.length == 0) display = <div className="empty">NO EPA PARAMS CONFIGURED</div>
    let html = (
      <div style={{overflow: 'hidden'}}>
        <div className="launchpadCard_title">
          EPA-PARAMS
        </div>
        <div className={"launchpadCard_data-list" + ' ' + 'EPA-PARAMS'}>
          {display}
        </div>
      </div>
    )
    return html;
  }
}


export class NsrPrimitiveJobList extends React.Component {
  constructor(props) {
    super(props)
  }
  render () {
    let tree = null;
    tree = this.props.jobs.sort(function(a,b){
      return b['job-id'] > a['job-id'];
    }).map(function(job, jindex) {
          let nsrJobLabel = job['job-name'] ? job['job-name'] + ': ' + job['job-status'] : "NSR Job ID:" + job['job-id'] + ': ' + job['job-status']
          return (
              <TreeView key={jindex} nodeLabel={nsrJobLabel} className="nsrJob" defaultCollapsed={true}>
                <h4>NSR Job Name: {job['job-name']}</h4>
                <h4>NSR Job ID: {job['job-id']}</h4>
                <h4>NSR Job Status: {job['job-status']}</h4>
                  {job.vnfr ?
                  <TreeView defaultCollapsed={true} className="vnfrJobs" nodeLabel="VNFR Jobs">
                    {job.vnfr.map(function(v, vindex) {
                      return (
                        <TreeView key={vindex} nodeLabel="VNFR Job">
                          <h5>VNFR ID: {v.id}</h5>
                          <h5>VNFR Job Status: {v['vnf-job-status']}</h5>
                            {v.primitive && v.primitive.map((p, pindex) => {
                              return (
                                <div key={pindex}>
                                  <div>Name: {p.name}</div>
                                  <div>Status: {p["execution-status"]}</div>
                                </div>
                              )
                            })}
                        </TreeView>
                      )
                    })}
                  </TreeView>
                  :null}
              </TreeView>
          )
        });
    let html = (
      <div  className="nsConfigPrimitiveJobList">
        <div className="launchpadCard_title">
          JOB-LIST
        </div>
        <div className="listView">
          <div>
            {tree}
          </div>
        </div>
      </div>
    );
    return html;
  }
}
NsrPrimitiveJobList.defaultProps = {
  jobs: []
}

export default LaunchpadCard