import React from "react";

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

import PropTypes from "prop-types";

import {

  Split,

  SplitItem,

  Button,

  DataList,

  DataListItem,

  DataListItemRow,

  DataListCell,

  DataListItemCells,

} from "@patternfly/react-core";

import ComponentTypeIcons from "./ComponentTypeIcons";

const messages = defineMessages({

  dependencies: {

    defaultMessage: "Dependencies",

  },

});

class ComponentSummaryList extends React.Component {

  constructor() {

    super();

    this.state = { showAll: false };

  }

  handleShowAll(event) {

    // the user clicked a list item in the blueprint contents area to expand or collapse

    this.setState((prevState) => ({ showAll: !prevState.showAll }));

    event.preventDefault();

    event.stopPropagation();

  }

  render() {

    const listItems = this.state.showAll ? this.props.listItems : this.props.listItems.slice(0, 5);

    const { formatMessage } = this.props.intl;

    return (

        <Split hasGutter className="pf-m-spacer-sm">

          <SplitItem isFilled>

              <FormattedMessage defaultMessage="Dependencies" />

            {this.props.listItems.length}

          </SplitItem>

          <SplitItem>

            <Button variant="link" isInline onClick={(e) => this.handleShowAll(e)}>

              {this.state.showAll ? (

                <FormattedMessage defaultMessage="Show less" />

              ) : (

                <FormattedMessage defaultMessage="Show all" />

              )}

            </Button>

          </SplitItem>

        </Split>

        <DataList aria-label={formatMessage(messages.dependencies)} className="cc-m-compact">

          {listItems.map((listItem) => (

            <DataListItem key={listItem.name} aria-labelledby={`${this.props.parent}-${listItem.name}`}>

              <DataListItemRow>

                    componentType={listItem.ui_type}

                    componentInBlueprint={listItem.inBlueprint}

                    isSelected={listItem.userSelected}

                  />

                  dataListCells={[

                    <DataListCell key="primary" id={`${this.props.parent}-${listItem.name}`}>

                      {listItem.name}

                    </DataListCell>,

                  ]}

                />

              </DataListItemRow>

            </DataListItem>

          ))}

        </DataList>

    );

  }

}

ComponentSummaryList.propTypes = {

  listItems: PropTypes.arrayOf(PropTypes.object),

  parent: PropTypes.string,

  intl: intlShape.isRequired,

};

ComponentSummaryList.defaultProps = {

  listItems: [],

  parent: "",

};

export default injectIntl(ComponentSummaryList);