// We have to remove node_modules/react to avoid having multiple copies loaded.
// eslint-disable-next-line import/no-unresolved
import React from 'react';
import { connect } from '@folio/stripes-connect';
import Paneset from '@folio/stripes-components/lib/Paneset';
import Pane from '@folio/stripes-components/lib/Pane';
import PatronGroupsList from './PatronGroupsList';

class PatronGroupsSettings extends React.Component {

  static manifest = Object.freeze({
    groups: {
      type: 'okapi',
      path: 'groups',
      records: 'usergroups',
      PUT: {
        path: 'groups/${activeRecord.id}',
      },
      DELETE: {
        path: 'groups/${activeRecord.id}',
      },
    },
    activeRecord: {},
  });

  constructor(props) {
    super(props);

    // placeholder data...
    this.state = {
      // groups: [{group:"Orange", desc:"orange group", id:"0", inUse:false},
      //   {group:"Red", desc:"red group", id:"1", inUse:true},
      //   {group:"Blue", desc:"blue group", id:"2", inUse: true}],
    };

    this.onUpdateGroup = this.onUpdateGroup.bind(this);
    this.onCreateGroup = this.onCreateGroup.bind(this);
    this.onDeleteGroup = this.onDeleteGroup.bind(this);
  }
  onUpdateGroup(groupObject) {
    this.props.mutator.activeRecord.update({ id: groupObject.id });
    this.props.mutator.groups.PUT(groupObject);
  }

  onCreateGroup(groupObject) {
    this.props.mutator.groups.POST(groupObject);
  }

  onDeleteGroup(groupId) {
    this.props.mutator.activeRecord.update({ id: groupId });
    this.props.mutator.groups.DELETE(this.props.data.groups.find(g => (g.id === groupId)));
  }

  render() {
    const suppressor = {
      delete: item => item.inUse, // suppress delete action based on 'inUse' prop
      edit: () => false, // suppress all editting of existing items...
    };

    return (
      <Paneset>
        <Pane defaultWidth="fill" fluidContentWidth>
          <PatronGroupsList
            // TODO: not sure why we need this OR if there are no groups
            // Seems to load this once before the groups data from the manifest
            // is pulled in. This still causes a JS warning, but not an error
            contentData={this.props.data.groups || []}
            label="Patron Groups"
            createButtonLabel="+ Add group"
            visibleFields={['group', 'desc']}
            itemTemplate={{ group: 'string', id: 'string', desc: 'string', inUse: 'bool' }}
            actionSuppression={suppressor}
            onUpdate={this.onUpdateGroup}
            onCreate={this.onCreateGroup}
            onDelete={this.onDeleteGroup}
            isEmptyMessage="There are no Patron Groups"
          />
        </Pane>
      </Paneset>
    );
  }
}

export default connect(PatronGroupsSettings, '@folio/ui-users');

@@ -134,16 +134,31 @@
 rt React
+, %7B PropTypes %7D
  from 'r
@@ -434,16 +434,455 @@
 ponent %7B
+%0A  static propTypes = %7B%0A    data: PropTypes.shape(%7B%0A      groups: PropTypes.arrayOf(%0A        PropTypes.object,%0A      ),%0A    %7D).isRequired,%0A    mutator: PropTypes.shape(%7B%0A      activeRecord: PropTypes.shape(%7B%0A        update: PropTypes.func.isRequired,%0A      %7D),%0A      groups: PropTypes.shape(%7B%0A        DELETE: PropTypes.func.isRequired,%0A        POST: PropTypes.func.isRequired,%0A        PUT: PropTypes.func.isRequired,%0A      %7D),%0A    %7D),%0A  %7D;
 %0A%0A  stat

Add PropTypes (STRIPES-334)