content: /**
  *
  * Plugin
  *
  */
  
  import React from 'react';
  import PropTypes from 'prop-types';
  import { Collapse } from 'reactstrap';
  import { capitalize, get, isEmpty, map } from 'lodash';
  import { FormattedMessage } from 'react-intl';
  
  import Controller from 'components/Controller';
  
  import styles from './styles.scss';
  
  class Plugin extends React.Component { // eslint-disable-line react/prefer-stateless-function
    state = { collapse: false };
  
    componentDidMount() {
      // Open the application's permissions section if there are APIs
      if (this.props.name === 'application' && !isEmpty(get(this.props.plugin, 'controllers'))) {
        this.props.changePluginSelected('application');
        this.setState({ collapse: !this.state.collapse });
      }
    }
  
    componentWillReceiveProps(nextProps) {
      if (nextProps.pluginSelected !== this.props.pluginSelected && nextProps.pluginSelected !== this.props.name) {
        this.context.resetShouldDisplayPoliciesHint();
        this.setState({ collapse: false });
      }
    }
  
    handleClick = () => {
      this.props.changePluginSelected(this.props.name);
  
      if (!isEmpty(get(this.props.plugin, 'controllers'))) {
        this.setState({ collapse: !this.state.collapse });
      }
  
      if (this.state.collapse) {
        this.context.resetShouldDisplayPoliciesHint();
      }
    }
  
    render() {
      const divStyle = this.state.collapse ? { marginBottom: '.4rem' } : {};
      const icon = get(this.props.plugin, ['information', 'logo']);
      const emptyApplication = !isEmpty(get(this.props.plugin, 'controllers'));
  
      if (!emptyApplication) {
        return <div />;
      }
  
      return (
        <div className={styles.plugin} style={divStyle}>
          <div className={styles.banner} onClick={this.handleClick}>
            <div>
              {this.props.name !== 'application' && (
                <div className={styles.iconContainer}>
                  {icon &&  <img src={icon} alt="icon" />}
                </div>
              )}
              <div className={styles.name}>{this.props.name}</div>
              &nbsp;—&nbsp;
              <div className={styles.description}>
                {this.props.name === 'application' ? (
                  <FormattedMessage
                    id="users-permissions.Plugin.permissions.application.description"
                  />
                ) : (
                  <FormattedMessage
                    id="users-permissions.Plugin.permissions.plugins.description"
                    values={{ name: capitalize(this.props.name) }}
                  />
                )}
              </div>
            </div>
            { emptyApplication && <div className={this.state.collapse ? styles.chevronUp : styles.chevronDown}></div> }
          </div>
          <Collapse isOpen={this.state.collapse}>
            <div />
            <div className={styles.controllerContainer}>
              {map(get(this.props.plugin, 'controllers'), (controllerActions, key) => (
                <Controller
                  inputNamePath={`permissions.${this.props.name}`}
                  isOpen={this.state.collapse}
                  key={key}
                  name={key}
                  actions={controllerActions}
                  resetInputBackground={this.state.resetInputBackground}
                />
              ))}
            </div>
          </Collapse>
        </div>
      );
    }
  }
  
  Plugin.contextTypes = {
    plugins: PropTypes.object.isRequired,
    resetShouldDisplayPoliciesHint: PropTypes.func.isRequired,
  };
  
  Plugin.defaultProps = {
    name: '',
    plugin: {
      description: 'users-permissions.Plugin.permissions.description.empty',
      controllers: {},
      information: {},
    },
  };
  
  Plugin.propTypes = {
    changePluginSelected: PropTypes.func.isRequired,
    name: PropTypes.string,
    plugin: PropTypes.shape({
      description: PropTypes.string,
      information: PropTypes.shape({
        logo: PropTypes.string,
      }),
    }),
    pluginSelected: PropTypes.string.isRequired,
  };
  
  export default Plugin;
  