import React from "react";

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

import PropTypes from "prop-types";

import { Filter, Toolbar } from "patternfly-react";

const messages = defineMessages({

  filterNameTitle: {

    defaultMessage: "Name",

  },

  filterReleaseTitle: {

    defaultMessage: "Release",

  },

  filterVersionTitle: {

    defaultMessage: "Version",

  },

});

class ToolbarLayout extends React.Component {

  constructor() {

    super();

    this.handleRemoveFilter = this.handleRemoveFilter.bind(this);

  }

  handleRemoveFilter(filter) {

    this.props.filterRemoveValue(filter);

  }

  render() {

    const { filters, children, filterClearValues } = this.props;

    const { formatMessage } = this.props.intl;

    const filterItem = (filter) => {

      switch (filter.key) {

        case "name":

          return (

            <Filter.Item key={`${filter.key}-${filter.value}`} onRemove={this.handleRemoveFilter} filterData={filter}>

              {formatMessage(messages.filterNameTitle)}: {filter.value}

            </Filter.Item>

          );

        case "release":

          return (

            <Filter.Item key={`${filter.key}-${filter.value}`} onRemove={this.handleRemoveFilter} filterData={filter}>

              {formatMessage(messages.filterReleaseTitle)}: {filter.value}

            </Filter.Item>

          );

        case "version":

          return (

            <Filter.Item key={`${filter.key}-${filter.value}`} onRemove={this.handleRemoveFilter} filterData={filter}>

              {formatMessage(messages.filterVersionTitle)}: {filter.value}

            </Filter.Item>

          );

        default:

          return null;

      }

    };

    return (

          
{children}

          {filters.filterValues && filters.filterValues.length !== 0 && (

            <Toolbar.Results>

              <Filter.ActiveLabel>

                <FormattedMessage defaultMessage="Active filters" />:

              </Filter.ActiveLabel>

              <Filter.List>{filters.filterValues.map((filter) => filterItem(filter))}</Filter.List>

              <button type="button" className="btn-link" onClick={filterClearValues}>

                <FormattedMessage defaultMessage="Clear all filters" />

              </button>

            </Toolbar.Results>

          )}

    );

  }

}

ToolbarLayout.propTypes = {

  filters: PropTypes.shape({

    defaultFilterType: PropTypes.string,

    filterTypes: PropTypes.arrayOf(PropTypes.object),

    filterValues: PropTypes.arrayOf(PropTypes.object),

  }),

  filterRemoveValue: PropTypes.func,

  filterClearValues: PropTypes.func,

  children: PropTypes.node,

  intl: intlShape.isRequired,

};

ToolbarLayout.defaultProps = {

  filters: {},

  filterRemoveValue() {},

  filterClearValues() {},

  children: React.createElement("div"),

};

export default injectIntl(ToolbarLayout);