import React from 'react';

import DescriptionList from './DescriptionList';
import EnvironmentList from './EnvironmentList';
import PodContainerSpecView from './PodContainerSpecView';
import PodSpec from '../structs/PodSpec';
import PodNetworkSpecView from './PodNetworkSpecView';

class PodSpecView extends React.Component {
  getEnvironmentDetails() {
    let environment = this.props.spec.getEnvironment();

    if (!environment || Object.keys(environment).length === 0) {
      return null;
    }

    return (
      <div>
        <h4 className="inverse flush-top">
          Environment variables
        </h4>
        <EnvironmentList environment={environment} />
      </div>
    );
  }

  getScalingDetails() {
    let scaling = this.props.spec.getScaling();

    if (Object.keys(scaling).length === 0) {
      return null;
    }

    return (
      <div>
        <h4 className="inverse flush-top">
          Scaling
        </h4>
        <DescriptionList hash={scaling} />
      </div>
    );
  }

  getSecretsDetails() {
    let secrets = this.props.spec.getSecrets();

    if (Object.keys(secrets).length === 0) {
      return null;
    }

    let hash = Object.keys(secrets).reduce(function (memo, key) {
      memo[key] = secrets[key].source;

      return memo;
    }, {});

    return (
      <div>
        <h4 className="inverse flush-top">
          Secrets
        </h4>
        <DescriptionList hash={hash} />
      </div>
    );
  }

  getLabelsDetails() {
    let labels = this.props.spec.getLabels();

    if (Object.keys(labels).length === 0) {
      return null;
    }

    return (
      <div>
        <h4 className="inverse flush-top">
          Labels
        </h4>
        <DescriptionList hash={labels} />
      </div>
    );
  }

  getNetworksDetails() {
    let {spec} = this.props;
    let networks = spec.getNetworks();

    if (networks.length === 0) {
      return null;
    }

    return (
      <div>
        <h4 className="inverse flush-top">
          Networks
        </h4>
        {networks.map(function (network, i) {
          return (
            <PodNetworkSpecView
              key={i}
              network={network} />
          );
        })}
      </div>
    );
  }

  getGeneralDetails() {
    let {spec} = this.props;
    let hash = {
      ID: spec.getId(),
      version: spec.getVersion(),
      user: spec.getUser()
    };

    hash = Object.keys(hash).filter(function (key) {
      return hash[key];
    }).reduce(function (memo, key) {
      memo[key] = hash[key];

      return memo;
    }, {});

    return <DescriptionList hash={hash} />;
  }

  getVolumesDetails() {
    let volumes = this.props.spec.getVolumes().map(function (volume) {
      return {
        [volume.name]: volume.host || '-'
      };
    });

    if (volumes.length === 0) {
      return null;
    }

    return (
      <div>
        <h4 className="inverse flush-top">
          Volumes
        </h4>
        {volumes.map(function (volume, i) {
          return (
            <DescriptionList
              key={i}
              hash={volume} />
          );
        })}
      </div>
    );
  }

  getContainersSection() {
    let {spec} = this.props;

    return spec.getContainers().map(function (container, i) {
      return (
        <PodContainerSpecView
          key={i}
          className="nested-description-list"
          container={container} />
      );
    });
  }

  render() {
    return (
      <div>
        <h4 className="inverse flush-top">
          General
        </h4>
        {this.getGeneralDetails()}
        {this.getLabelsDetails()}
        {this.getEnvironmentDetails()}
        {this.getSecretsDetails()}
        {this.getVolumesDetails()}
        {this.getScalingDetails()}
        {this.getNetworksDetails()}
        <h4 className="inverse flush-top">
          Containers
        </h4>
        {this.getContainersSection()}
      </div>
    );
  }
};

PodSpecView.propTypes = {
  spec: React.PropTypes.instanceOf(PodSpec)
};

module.exports = PodSpecView;

@@ -1779,38 +1779,40 @@
 ils() %7B%0A    let 
-%7Bspec%7D
+networks
  = this.props;%0A 
@@ -1812,29 +1812,9 @@
 rops
-;%0A    let networks = 
+.
 spec
@@ -1897,114 +1897,20 @@
     
-return (%0A      %3Cdiv%3E%0A        %3Ch4 className=%22inverse flush-top%22%3E%0A          Networks%0A        %3C/h4%3E%0A        %7B
+let nodes = 
 netw
@@ -1940,36 +1940,32 @@
 ork, i) %7B%0A      
-    
 return (%0A       
@@ -1961,28 +1961,24 @@
 n (%0A        
-    
 %3CPodNetworkS
@@ -1987,36 +1987,32 @@
 cView%0A          
-    
 key=%7Bi%7D%0A        
@@ -2013,20 +2013,16 @@
         
-    
 network=
@@ -2040,33 +2040,143 @@
 %3E%0A      
+);%0A
     
+%7D
 );%0A
+%0A
     
-    %7D)
+return (%0A      %3Cdiv%3E%0A        %3Ch4 className=%22inverse flush-top%22%3E%0A          Networks%0A        %3C/h4%3E%0A        %7Bnodes
 %7D%0A      

refactor PodSpecView#getNetworksDetails