import PropTypes from "prop-types";
import React from "react";
import { MountService } from "foundation-ui";

import ConfigurationMapHeading from "#SRC/js/components/ConfigurationMapHeading";

import ConfigurationMapBooleanValue from "../components/ConfigurationMapBooleanValue";
import ConfigurationMapTable from "../components/ConfigurationMapTable";

const BOOLEAN_OPTIONS = {
  truthy: "TRUE",
  falsy: "FALSE"
};

class PodContainerArtifactsConfigSection extends React.Component {
  getColumns() {
    return [
      {
        heading: "Artifact URI",
        prop: "uri"
      },
      {
        heading: "Executable",
        prop: "executable",
        render(prop, row) {
          return (
            <ConfigurationMapBooleanValue
              options={BOOLEAN_OPTIONS}
              value={row[prop]}
            />
          );
        }
      },
      {
        heading: "Extract",
        prop: "extract",
        render(prop, row) {
          return (
            <ConfigurationMapBooleanValue
              options={BOOLEAN_OPTIONS}
              value={row[prop]}
            />
          );
        }
      },
      {
        heading: "Cache",
        prop: "cache",
        render(prop, row) {
          return (
            <ConfigurationMapBooleanValue
              options={BOOLEAN_OPTIONS}
              value={row[prop]}
            />
          );
        }
      },
      {
        heading: "Destination Path",
        prop: "destPath"
      }
    ];
  }

  render() {
    const { artifacts, index, onEditClick } = this.props;
    let tabViewID = "services";
    if (index != null) {
      tabViewID = `container${index}`;
    }

    if (!artifacts || !artifacts.length) {
      return <noscript />;
    }

    return (
      <MountService.Mount
        type="CreateService:ServiceConfigDisplay:Pod:Container:General:Artifacts"
        artifacts={artifacts}
        onEditClick={onEditClick}
      >
        <ConfigurationMapHeading level={3}>
          Container Artifacts
        </ConfigurationMapHeading>
        <ConfigurationMapTable
          columnDefaults={{ hideIfEmpty: true }}
          columns={this.getColumns()}
          data={artifacts}
          onEditClick={onEditClick}
          tabViewID={tabViewID}
        />
      </MountService.Mount>
    );
  }
}

PodContainerArtifactsConfigSection.defaultProps = {
  artifacts: []
};

PodContainerArtifactsConfigSection.propTypes = {
  artifacts: PropTypes.array,
  index: PropTypes.number,
  onEditClick: PropTypes.func
};

module.exports = PodContainerArtifactsConfigSection;

@@ -101,16 +101,97 @@
 ion-ui%22;
+%0Aimport %7B Trans %7D from %22@lingui/macro%22;%0Aimport %7B i18nMark %7D from %22@lingui/react%22;
 %0A%0Aimport
@@ -468,14 +468,24 @@
 hy: 
+i18nMark(
 %22TRUE%22
+)
 ,%0A  
@@ -495,15 +495,25 @@
 sy: 
+i18nMark(
 %22FALSE%22
+)
 %0A%7D;%0A
@@ -635,17 +635,37 @@
 eading: 
-%22
+%3CTrans render=%22span%22%3E
 Artifact
@@ -668,17 +668,24 @@
 fact URI
-%22
+%3C/Trans%3E
 ,%0A      
@@ -732,17 +732,37 @@
 eading: 
-%22
+%3CTrans render=%22span%22%3E
 Executab
@@ -755,33 +755,40 @@
 span%22%3EExecutable
-%22
+%3C/Trans%3E
 ,%0A        prop: 
@@ -1038,17 +1038,44 @@
 ng: 
-%22Extract%22
+%3CTrans render=%22span%22%3EExtract%3C/Trans%3E
 ,%0A  
@@ -1334,15 +1334,42 @@
 ng: 
-%22Cache%22
+%3CTrans render=%22span%22%3ECache%3C/Trans%3E
 ,%0A  
@@ -1622,17 +1622,37 @@
 eading: 
-%22
+%3CTrans render=%22span%22%3E
 Destinat
@@ -1659,17 +1659,24 @@
 ion Path
-%22
+%3C/Trans%3E
 ,%0A      
@@ -2158,32 +2158,47 @@
       %3E%0A        
+%3CTrans render=%7B
 %3CConfigurationMa
@@ -2215,16 +2215,20 @@
 evel=%7B3%7D
+ /%3E%7D
 %3E%0A      
@@ -2261,39 +2261,21 @@
       %3C/
-ConfigurationMapHeading
+Trans
 %3E%0A      

mark and translate component strings