import React from "react";

import { defineMessages, injectIntl, intlShape } from "react-intl";

import PropTypes from "prop-types";

import shortid from "shortid";

import {

  DataList,

  DataListItem,

  DataListItemRow,

  DataListCell,

  DataListItemCells,

  Tooltip,

  TooltipPosition,

} from "@patternfly/react-core";

import ComponentTypeIcons from "./ComponentTypeIcons";

const messages = defineMessages({

  hideDetails: {

    defaultMessage: "Hide Details",

  },

  showDetails: {

    defaultMessage: "Show Details and More Options",

  },

  addComponent: {

    defaultMessage: "Add latest version",

  },

  removeComponent: {

    defaultMessage: "Remove Component from Blueprint",

  },

});

// eslint-disable-next-line react/prefer-stateless-function

class ComponentInputs extends React.Component {

  render() {

    const { components, label } = this.props;

    const { formatMessage } = this.props.intl;

    return (

      <DataList aria-label={label} data-list="inputs" className="cc-m-compact">

        {components.map((component) => (

            key={shortid.generate()}

            aria-labelledby={`${component.name}-input`}

            className={component.active ? "active" : ""}

            data-input={component.name}

          >

            <DataListItemRow>

                  componentType={component.ui_type}

                  componentInBlueprint={component.inBlueprint}

                  isSelected={component.userSelected}

                />

                dataListCells={[

                  <DataListCell key="primary">

                        position={TooltipPosition.top}

                        content={

                          component.active ? formatMessage(messages.hideDetails) : formatMessage(messages.showDetails)

                        }

                      >

                         this.props.handleComponentDetails(e, component)}>

                            {component.name}

                      </Tooltip>

                    
{component.summary}

                  </DataListCell>,

                ]}

              />

                {(component.inBlueprint === true && component.userSelected === true && (

                  <Tooltip position={TooltipPosition.top} content={formatMessage(messages.removeComponent)}>

                      href="#"

                      className="btn btn-link"

                      onClick={(e) => this.props.handleRemoveComponent(e, component.name)}

                    >

                  </Tooltip>

                )) || (

                    position={TooltipPosition.top}

                    content={

                        {formatMessage(messages.addComponent)}

                        
({component.version})

                    }

                  >

                      href="#"

                      className="btn btn-link"

                      onClick={(e) => this.props.handleAddComponent(e, component, "*")}

                    >

                  </Tooltip>

                )}

            </DataListItemRow>

          </DataListItem>

        ))}

      </DataList>

    );

  }

}

ComponentInputs.propTypes = {

  components: PropTypes.arrayOf(PropTypes.object),

  label: PropTypes.string,

  handleComponentDetails: PropTypes.func,

  handleAddComponent: PropTypes.func,

  handleRemoveComponent: PropTypes.func,

  intl: intlShape.isRequired,

};

ComponentInputs.defaultProps = {

  components: [],

  label: "",

  handleComponentDetails() {},

  handleAddComponent() {},

  handleRemoveComponent() {},

};

export default injectIntl(ComponentInputs);