text: import React from 'react';
  import _ from 'lodash';
  import Webiny from 'webiny';
  import matchOption from './matchOption';
  
  /**
   * @i18n.namespace Webiny.Backend.Acl.AddServiceModal
   */
  class AddServiceModal extends Webiny.Ui.ModalComponent {
      constructor() {
          super();
          this.api = new Webiny.Api.Endpoint('/services/webiny/services');
      }
  
      renderDialog() {
          const {Modal, Form, Grid, Select, Button} = this.props;
  
          return (
              <Modal.Dialog>
                  {({dialog}) => (
                      <Form
                          onSubmit={async ({model, form}) => {
                              form.showLoading();
                              const query = {
                                  details: 'methods',
                                  classId: model.service
                              };
  
                              const apiResponse = await this.api.setQuery(query).get();
  
                              form.hideLoading();
                              await dialog.hide();
  
                              this.props.onSubmit(apiResponse.getData());
                          }}>
                          {({form}) => (
                              <Modal.Content>
                                  <Modal.Header title={this.i18n('Add service')} onClose={dialog.hide}/>
                                  <Modal.Body>
                                      <Grid.Row>
                                          <Grid.Col all={12}>
                                              <Form.Error/>
                                              <Form.Loader/>
                                              <Select
                                                  description={this.i18n(`Services already added are not shown.`)}
                                                  placeholder={this.i18n('Select service...')}
                                                  name="service"
                                                  validate="required"
                                                  api="/services/webiny/services"
                                                  query={{exclude: this.props.exclude.map(item => item.classId)}}
                                                  valueAttr="classId"
                                                  textAttr="class"
                                                  matcher={matchOption}
                                                  optionRenderer={({option}) => (
                                                      <div>
                                                          <strong>{option.data.classId}</strong><br/>{option.data.class}
                                                      </div>
                                                  )}
                                                  selectedRenderer={({option}) => option.data.classId}
                                                  minimumResultsForSearch={5}/>
                                          </Grid.Col>
                                      </Grid.Row>
                                  </Modal.Body>
                                  <Modal.Footer>
                                      <Button label={this.i18n('Cancel')} onClick={this.hide}/>
                                      <Button type="primary" label={this.i18n('Add')} onClick={form.submit}/>
                                  </Modal.Footer>
                              </Modal.Content>
                          )}
                      </Form>
                  )}
              </Modal.Dialog>
          );
      }
  }
  
  AddServiceModal.defaultProps = _.assign({}, Webiny.Ui.ModalComponent.defaultProps, {
      onSubmit: _.noop,
      exclude: [],
  });
  
  export default Webiny.createComponent(AddServiceModal, {
      modules: ['Modal', 'Form', 'Grid', 'Select', 'Button']
  });