import React, { Component } from 'react';
import { Table } from 'react-bootstrap';
import { withRouter } from 'react-router';
import _ from 'lodash';
import { connect } from 'react-redux';
import FontAwesome from 'react-fontawesome';
import { PlussCore } from '../feature.config';
import { jobTypesUpdate } from '../actions';
import { maintenanceActions } from '../apis';
import { values } from '../values.config';
import { Colours } from '@plusscommunities/pluss-core-web';

const { Components, Session, Helper } = PlussCore;
const DEFAULT_FIELD = { type: 'text', label: '', mandatory: false, isTitle: false, values: [''] };

class AddJobType extends Component {
  constructor(props) {
    super(props);

    this.fieldTypes = [
      {
        Title: 'Text Input',
        Key: 'text',
      },
      {
        Title: 'Email Input',
        Key: 'email',
      },
      {
        Title: 'Phone Input',
        Key: 'phone',
      },
      {
        Title: 'Date Input',
        Key: 'date',
      },
      {
        Title: 'Time Input',
        Key: 'time',
      },
      {
        Title: 'Image Input',
        Key: 'image',
      },
      // {
      //   Title: 'Document Input',
      //   Key: 'document',
      // },
      {
        Title: 'Yes/No Question',
        Key: 'yn',
      },
      {
        Title: 'Multiple Choice',
        Key: 'multichoice',
      },
      {
        Title: 'Checkboxes',
        Key: 'checkbox',
      },
      {
        Title: 'Title Text',
        Key: 'staticTitle',
      },
      {
        Title: 'Paragraph Text',
        Key: 'staticText',
      },
    ];

    this.state = {
      loading: false,
      jobTypeId: Helper.safeReadParams(this.props, 'jobTypeId') ? this.props.match.params.jobTypeId : null,
      jobTypeName: '',
      jobTypeEmail: '',
      jobTypeDescription: '',
      hasCustomFields: values.forceCustomFields ? true : false,
      customFields: [_.cloneDeep(DEFAULT_FIELD)],
      jobTypeLevel: 1,
      warnings: [],
      showWarnings: false,
      submitting: false,
      success: false,
    };
  }

  UNSAFE_componentWillMount() {
    Session.checkLoggedIn(this, this.props.auth);
    if (this.state.jobTypeId) this.getJobType();
  }

  getJobType = async () => {
    try {
      const res = await maintenanceActions.getJobType(this.props.auth.site, this.state.jobTypeId);

      const { typeName, email, description, level, hasCustomFields, customFields } = res.data;
      this.setState({
        jobTypeName: typeName,
        jobTypeEmail: email,
        jobTypeDescription: description,
        jobTypeLevel: level,
        hasCustomFields: !!hasCustomFields,
        customFields: customFields || [_.cloneDeep(DEFAULT_FIELD)],
      });
    } catch (error) {
      console.error('getJobType', error);
    }
  };

  getFieldTypeTitle = (type) => {
    const fieldType = this.fieldTypes.find((f) => f.Key === type);
    return fieldType ? fieldType.Title : '';
  };

  validateEmail = () => {
    const { jobTypeEmail } = this.state;
    return !_.isEmpty(jobTypeEmail) && Helper.isEmail(jobTypeEmail);
  };

  isJobTypeValid = () => {
    const { jobTypeName, jobTypeDescription } = this.state;

    if (_.isEmpty(jobTypeName)) return false;
    if (!this.validateEmail()) return false;
    if (_.isEmpty(jobTypeDescription)) return false;
    if (!this.validateCustomFields()) return false;

    return true;
  };

  validateCustomFields() {
    const { submitting, hasCustomFields, customFields } = this.state;
    if (submitting) return false;

    // Validate custom fields
    const warnings = [];
    if (hasCustomFields) {
      let missingLabel = false;
      let hasMandatoryField = false;
      let titleFieldCount = 0;
      customFields.forEach((field) => {
        const { type, label, values, mandatory, isTitle } = field;
        if (['staticTitle', 'staticText'].includes(type)) return;

        if (_.isEmpty(label)) {
          missingLabel = true;
        } else if (
          _.isEmpty(type) ||
          ((type === 'multichoice' || type === 'checkbox') && (!values || values.length < 2 || !values.every((value) => !_.isEmpty(value))))
        ) {
          warnings.push(`'${label}' is incomplete`);
        }
        if (mandatory) hasMandatoryField = true;
        if (isTitle) titleFieldCount += 1;
      });
      if (missingLabel) {
        warnings.push('All inputs must have a label');
      }
      if (!hasMandatoryField) {
        warnings.push('There must be at least one required input');
      }
      if (titleFieldCount > 1) {
        warnings.push('Only one required input can be selected as title for the request');
      }
    }

    this.setState({ warnings });
    return warnings.length === 0;
  }

  onHandleChange = (event) => {
    var stateChange = {};
    stateChange[event.target.getAttribute('id')] = event.target.value;
    this.setState(stateChange);
  };

  onFieldTypeChanged = (fieldIndex, key) => {
    const customFields = [...this.state.customFields];
    if (customFields[fieldIndex].type === key) return;

    customFields[fieldIndex] = _.cloneDeep(DEFAULT_FIELD);
    customFields[fieldIndex].type = key;

    this.setState({ customFields });
  };

  onFieldLabelChanged = (fieldIndex, event) => {
    const customFields = [...this.state.customFields];
    customFields[fieldIndex].label = event.target.value;

    this.setState({ customFields });
  };

  onFieldPlaceHolderChanged = (fieldIndex, event) => {
    const customFields = [...this.state.customFields];
    customFields[fieldIndex].placeHolder = event.target.value;

    this.setState({ customFields });
  };

  onFieldMandatoryChanged = (fieldIndex) => {
    const customFields = [...this.state.customFields];
    customFields[fieldIndex].mandatory = !customFields[fieldIndex].mandatory;
    if (!customFields[fieldIndex].mandatory) {
      // If a field is not mandatory, it cannot be a title field
      customFields[fieldIndex].isTitle = false;
    }

    this.setState({ customFields });
  };

  onFieldIsTitleChanged = (fieldIndex) => {
    const customFields = [...this.state.customFields];
    customFields[fieldIndex].isTitle = !customFields[fieldIndex].isTitle;
    if (customFields[fieldIndex].isTitle) {
      // If a field is title field, force mandatory
      customFields[fieldIndex].mandatory = true;
    }

    this.setState({ customFields });
  };

  onFieldOptionChanged = (fieldIndex, optionIndex, event) => {
    const customFields = [...this.state.customFields];
    const prevValue = customFields[fieldIndex].values[optionIndex];
    customFields[fieldIndex].values[optionIndex] = event.target.value;
    // Change corresponding validation if exists
    const validations = customFields[fieldIndex].validation;
    let validation = validations ? validations.find((val) => val.value === prevValue) : null;
    if (validation) validation.value = event.target.value;

    this.setState({ customFields });
  };

  onAddNewOption = (fieldIndex) => {
    const customFields = [...this.state.customFields];
    customFields[fieldIndex].values.push('');
    this.setState({ customFields });
  };

  onRemoveOption = (fieldIndex, optionIndex) => {
    const customFields = [...this.state.customFields];
    customFields[fieldIndex].values.splice(optionIndex, 1);
    this.setState({ customFields });
  };

  onRemoveField(fieldIndex) {
    const customFields = [...this.state.customFields];
    if (customFields.length < 2) return;

    customFields.splice(fieldIndex, 1);
    this.setState({ customFields });
  }

  onAddNewField = () => {
    const customFields = [...this.state.customFields];
    customFields.push(_.cloneDeep(DEFAULT_FIELD));
    this.setState({ customFields });
  };

  onMoveFieldPrev = (fieldIndex) => {
    if (fieldIndex === 0) return;
    const customFields = [...this.state.customFields];
    const item = customFields.splice(fieldIndex, 1)[0];
    customFields.splice(fieldIndex - 1, 0, item);

    this.setState({ customFields });
  };

  onMoveFieldNext = (fieldIndex) => {
    const customFields = [...this.state.customFields];
    if (fieldIndex > customFields.length - 1) return;
    const item = customFields.splice(fieldIndex, 1)[0];
    customFields.splice(fieldIndex + 1, 0, item);

    this.setState({ customFields });
  };

  onBack = () => {
    window.history.back();
  };

  onSave = () => {
    const { site } = this.props.auth;
    const { submitting, jobTypeId, jobTypeName, jobTypeEmail, jobTypeDescription, jobTypeLevel, hasCustomFields, customFields } =
      this.state;

    if (submitting) return;
    if (!this.isJobTypeValid()) {
      this.setState({ showWarnings: true });
      return;
    }

    this.setState({ submitting: true }, async () => {
      try {
        if (jobTypeId) {
          await maintenanceActions.editJobType(
            site,
            jobTypeId,
            jobTypeName,
            jobTypeEmail,
            jobTypeDescription,
            jobTypeLevel,
            hasCustomFields,
            customFields,
          );
        } else {
          await maintenanceActions.addJobType(
            site,
            jobTypeName,
            jobTypeEmail,
            jobTypeDescription,
            jobTypeLevel,
            hasCustomFields,
            customFields,
          );
        }
        this.props.jobTypesUpdate(site);
        this.setState({ submitting: false, success: true });
      } catch (error) {
        console.error('onSave', error);
        this.setState({ submitting: false });
        alert('Something went wrong with the request. Please try again.');
      }
    });
  };

  renderBaseForm() {
    const { success, jobTypeId, showWarnings, jobTypeName, jobTypeEmail, jobTypeDescription, hasCustomFields } = this.state;
    if (success) return null;

    // TODO: Request Type should be configurable
    return (
      <div className="padding-60 paddingVertical-40 bottomDivideBorder">
        <Components.Text type="formTitleLarge" className="marginBottom-24">
          {!jobTypeId ? 'New' : 'Edit'} {values.textJobType}
        </Components.Text>
        <Components.GenericInput
          id="jobTypeName"
          type="text"
          label={`${values.textJobType} title`}
          placeholder={`${values.textJobType} title`}
          value={jobTypeName}
          onChange={this.onHandleChange}
          isRequired
          isValid={() => !_.isEmpty(jobTypeName)}
          showError={() => showWarnings && _.isEmpty(jobTypeName)}
          alwaysShowLabel
        />
        <Components.GenericInput
          id="jobTypeEmail"
          type="text"
          label="Email"
          placeholder="Email"
          help={`This is the email address that'll be notified of new submissions for this ${`${values.textJobType}`}.`}
          value={jobTypeEmail}
          onChange={this.onHandleChange}
          isRequired
          isValid={this.validateEmail}
          showError={() => showWarnings && !this.validateEmail()}
          alwaysShowLabel
        />
        <Components.GenericInput
          id="jobTypeDescription"
          type="text"
          label="Description"
          placeholder="Add a description. "
          help={`This description will be visible to the people to help them select the correct ${`${values.textJobType}`}.`}
          value={jobTypeDescription}
          onChange={this.onHandleChange}
          isRequired
          isValid={() => !_.isEmpty(jobTypeDescription)}
          showError={() => showWarnings && _.isEmpty(jobTypeDescription)}
          alwaysShowLabel
        />
        {values.forceCustomFields ? null : (
          <Components.RadioButton
            label={`Do you want to create a custom form for this ${`${values.textJobType}`}?`}
            isActive={hasCustomFields}
            options={[
              {
                Label: 'Yes',
                Value: true,
                onChange: () => this.setState({ hasCustomFields: true }),
              },
              {
                Label: 'No',
                Value: false,
                onChange: () => this.setState({ hasCustomFields: false }),
              },
            ]}
          />
        )}
      </div>
    );
  }

  renderOptionalCheckBox(field, fieldIndex) {
    return (
      <Components.CheckBox
        id={`fieldOptional${fieldIndex}`}
        label="Set this field as optional"
        isActive={!field.mandatory}
        onChange={(e) => this.onFieldMandatoryChanged(fieldIndex, e)}
      />
    );
  }

  renderTitleCheckBox(field, fieldIndex) {
    return (
      <Components.CheckBox
        id={`fieldTitle${fieldIndex}`}
        label={`Use this field as the ${values.textSingularName} title`}
        isActive={field.isTitle}
        onChange={(e) => this.onFieldIsTitleChanged(fieldIndex, e)}
      />
    );
  }

  renderFieldText(field, fieldIndex) {
    return (
      <div className="fieldInner">
        <Components.GenericInput
          id={`fieldLabel${fieldIndex}`}
          className={'textInput'}
          placeholder={'Type your label here (required)'}
          value={field.label}
          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
        />
        <Components.GenericInput
          id={`fieldPlaceHolder${fieldIndex}`}
          className={'placeHolderInput'}
          placeholder={'Insert placeholder (optional)'}
          value={field.placeHolder}
          onChange={(e) => this.onFieldPlaceHolderChanged(fieldIndex, e)}
        />
        {this.renderOptionalCheckBox(field, fieldIndex)}
        {this.renderTitleCheckBox(field, fieldIndex)}
      </div>
    );
  }

  renderFieldDate(field, fieldIndex) {
    return (
      <div className="fieldInner">
        <Components.GenericInput
          id={`fieldLabel${fieldIndex}`}
          className={'textInput'}
          placeholder={'Type your label here (required)'}
          value={field.label}
          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
        />
        {this.renderOptionalCheckBox(field, fieldIndex)}
        {this.renderTitleCheckBox(field, fieldIndex)}
      </div>
    );
  }

  renderFieldTime(field, fieldIndex) {
    return (
      <div className="fieldInner">
        <Components.GenericInput
          id={`fieldLabel${fieldIndex}`}
          className={'textInput'}
          placeholder={'Type your label here (required)'}
          value={field.label}
          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
        />
        {this.renderOptionalCheckBox(field, fieldIndex)}
        {this.renderTitleCheckBox(field, fieldIndex)}
      </div>
    );
  }

  renderFieldImage(field, fieldIndex) {
    return (
      <div className="fieldInner">
        <Components.GenericInput
          id={`fieldLabel${fieldIndex}`}
          className={'textInput'}
          placeholder={'Type your label here (required)'}
          value={field.label}
          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
        />
        {this.renderOptionalCheckBox(field, fieldIndex)}
      </div>
    );
  }

  renderFieldDocument(field, fieldIndex) {
    return (
      <div className="fieldInner">
        <Components.GenericInput
          id={`fieldLabel${fieldIndex}`}
          className={'textInput'}
          placeholder={'Type your label here (required)'}
          value={field.label}
          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
        />
        {this.renderOptionalCheckBox(field, fieldIndex)}
      </div>
    );
  }

  renderFieldYesNo(field, fieldIndex) {
    return (
      <div className="fieldInner">
        <Components.GenericInput
          id={`fieldLabel${fieldIndex}`}
          className={'textInput'}
          placeholder={'Type your label here (required)'}
          value={field.label}
          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
        />
        <Table className="optionsContainer">
          <thead className="headings">
            <tr>
              <th className="icon" />
              <th className="options">Options</th>
            </tr>
          </thead>
          <tbody>
            {['Yes', 'No'].map((value, optionIndex) => {
              return (
                <tr key={optionIndex} className="option">
                  <td>
                    <Components.RadioButton single disabled isActive={false} />
                  </td>
                  <td>
                    <Components.GenericInput id={`fieldOption${optionIndex}`} value={value} disabled />
                  </td>
                </tr>
              );
            })}
          </tbody>
        </Table>
        {this.renderOptionalCheckBox(field, fieldIndex)}
      </div>
    );
  }

  renderFieldMultiple(field, fieldIndex) {
    const { customFields } = this.state;
    return (
      <div className="fieldInner">
        <Components.GenericInput
          id={`fieldLabel${fieldIndex}`}
          className={'textInput'}
          placeholder={'Type your label here (required)'}
          value={field.label}
          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
        />
        <Table className="optionsContainer">
          <thead className="headings">
            <tr>
              <th className="icon" />
              <th className="options-wide">Options</th>
              <th className="remove" />
            </tr>
          </thead>
          <tbody>
            {field.values &&
              field.values.map((value, optionIndex) => {
                return (
                  <tr key={optionIndex} className="option">
                    <td>
                      <Components.RadioButton single disabled isActive={false} />
                    </td>
                    <td>
                      <Components.GenericInput
                        id={`fieldOption${optionIndex}`}
                        placeholder={'Enter option'}
                        value={value}
                        onChange={(e) => this.onFieldOptionChanged(fieldIndex, optionIndex, e)}
                      />
                    </td>
                    <td>
                      {customFields[fieldIndex].values.length > 1 ? (
                        <div onClick={() => this.onRemoveOption(fieldIndex, optionIndex)}>
                          <FontAwesome name="minus-circle" className="cornerCancelButton_icon" />
                        </div>
                      ) : null}
                    </td>
                  </tr>
                );
              })}
          </tbody>
        </Table>
        <div className="clearfix addoption optionAdd marginBottom-10" onClick={() => this.onAddNewOption(fieldIndex)}>
          <Components.P60Icon className="addoption_plus" icon="add-circle" />
          <div className="fillSpace">
            <p className="addoption_text">Add Another Option</p>
          </div>
        </div>
        {this.renderOptionalCheckBox(field, fieldIndex)}
        {this.renderTitleCheckBox(field, fieldIndex)}
      </div>
    );
  }

  renderFieldCheckbox(field, fieldIndex) {
    const { customFields } = this.state;
    return (
      <div className="fieldInner">
        <Components.GenericInput
          id={`fieldLabel${fieldIndex}`}
          className={'textInput'}
          placeholder={'Type your label here (required)'}
          value={field.label}
          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
        />
        <Table className="optionsContainer">
          <thead className="headings">
            <tr>
              <th className="icon" />
              <th>Options</th>
              <th className="remove" />
            </tr>
          </thead>
          <tbody>
            {field.values &&
              field.values.map((value, optionIndex) => {
                return (
                  <tr key={optionIndex} className="option">
                    <td>
                      <Components.RadioButton single disabled isActive={false} isSquare />
                    </td>
                    <td>
                      <Components.GenericInput
                        id={`fieldOption${optionIndex}`}
                        placeholder={'Enter option'}
                        value={value}
                        onChange={(e) => this.onFieldOptionChanged(fieldIndex, optionIndex, e)}
                      />
                    </td>
                    <td>
                      {customFields[fieldIndex].values.length > 1 ? (
                        <div onClick={() => this.onRemoveOption(fieldIndex, optionIndex)}>
                          <FontAwesome name="minus-circle" className="cornerCancelButton_icon" />
                        </div>
                      ) : null}
                    </td>
                  </tr>
                );
              })}
          </tbody>
        </Table>
        <div className="clearfix addoption optionAdd marginBottom-10" onClick={() => this.onAddNewOption(fieldIndex)}>
          <Components.P60Icon className="addoption_plus" icon="add-circle" />
          <div className="fillSpace">
            <p className="addoption_text">Add Another Option</p>
          </div>
        </div>
        {this.renderOptionalCheckBox(field, fieldIndex)}
        {this.renderTitleCheckBox(field, fieldIndex)}
      </div>
    );
  }

  renderFieldStaticTitle(field, fieldIndex) {
    return (
      <div className="fieldInner">
        <Components.GenericInput
          id={`fieldStatic${fieldIndex}`}
          placeholder="Insert title here (required)"
          value={field.label}
          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
          large
        />
      </div>
    );
  }

  renderFieldStaticText(field, fieldIndex) {
    return (
      <div className="fieldInner">
        <Components.GenericInput
          id={`fieldStatic${fieldIndex}`}
          placeholder="Insert your paragraph text here (required)"
          value={field.label}
          onChange={(e) => this.onFieldLabelChanged(fieldIndex, e)}
          type="textarea"
        />
      </div>
    );
  }

  renderField(field, fieldIndex) {
    const { customFields } = this.state;

    const renderFieldContent = () => {
      switch (field.type) {
        case 'text':
        case 'email':
        case 'phone':
          return this.renderFieldText(field, fieldIndex);
        case 'date':
          return this.renderFieldDate(field, fieldIndex);
        case 'time':
          return this.renderFieldTime(field, fieldIndex);
        case 'image':
          return this.renderFieldImage(field, fieldIndex);
        case 'document':
          return this.renderFieldDocument(field, fieldIndex);
        case 'yn':
          return this.renderFieldYesNo(field, fieldIndex);
        case 'multichoice':
          return this.renderFieldMultiple(field, fieldIndex);
        case 'checkbox':
          return this.renderFieldCheckbox(field, fieldIndex);
        case 'staticTitle':
          return this.renderFieldStaticTitle(field, fieldIndex);
        case 'staticText':
          return this.renderFieldStaticText(field, fieldIndex);
        default:
          return null;
      }
    };

    return (
      <div className="fieldContainer" key={fieldIndex}>
        <div className="fieldNumberContainer">
          <p className="fieldNumber">{fieldIndex + 1}</p>
        </div>
        <div className="field">
          <div className="fieldHeader">
            <div className="group">
              <div className="line" />
              <div className="fieldType">{this.getFieldTypeTitle(field.type)}</div>
            </div>
            <div className="group">
              <Components.DropdownInput
                id={`fieldType${fieldIndex}`}
                placeholder="Type"
                value="Change Field Type"
                options={this.fieldTypes}
                onSelect={(key) => this.onFieldTypeChanged(fieldIndex, key)}
              />
              {customFields.length > 1 && (
                <div className="delete" onClick={() => this.onRemoveField(fieldIndex)}>
                  Delete
                </div>
              )}
            </div>
          </div>
          {renderFieldContent()}
        </div>
        {customFields.length > 1 && (
          <div className="switchField">
            {fieldIndex > 0 ? (
              <div className="circle" onClick={() => this.onMoveFieldPrev(fieldIndex)}>
                <FontAwesome name="angle-up" className="icon" />
              </div>
            ) : null}
            {fieldIndex < customFields.length - 1 ? (
              <div className="circle" onClick={() => this.onMoveFieldNext(fieldIndex)}>
                <FontAwesome name="angle-down" className="icon" />
              </div>
            ) : null}
          </div>
        )}
      </div>
    );
  }

  renderCustomForm() {
    const { success, hasCustomFields, customFields } = this.state;
    if (success || !hasCustomFields) return null;

    return (
      <div className="padding-60 paddingTop-8 paddingLeft-20">
        <Components.Text type="bodyLarge" className="marginBottom-24 paddingLeft-40" style={{ color: Colours.COLOUR_LIGHTGREY }}>
          By default, the form submission title will be the name of the person submitting the form. You can choose to select a different
          field to use as the title for the form submission.
        </Components.Text>
        <div className="fields">
          {customFields.map((field, fieldIndex) => this.renderField(field, fieldIndex))}
          <div className="clearfix addoption addField" onClick={() => this.onAddNewField()}>
            <Components.P60Icon className="addoption_plus" icon="add-circle" />
            <div className="fillSpace">
              <p className="addoption_text">Add New Field</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  renderWarnings() {
    const { showWarnings, warnings } = this.state;
    if (!showWarnings || !warnings || warnings.length === 0) return null;

    return (
      <div className="padding-60 paddingVertical-8 text-bodyLarge" style={{ color: Colours.COLOUR_RED }}>
        To save the form
        <ul style={{ padding: 0, paddingLeft: 16 }}>
          {warnings.map((warn, index) => (
            <li key={index}>{warn}</li>
          ))}
        </ul>
      </div>
    );
  }

  renderSuccess() {
    const { success, jobTypeId } = this.state;
    if (!success) return null;

    return (
      <Components.SuccessPopup
        text={`${`${values.textJobType}`} has been ${!jobTypeId ? 'added' : 'edited'}`}
        buttons={[
          {
            type: 'outlined',
            onClick: this.onBack,
            text: 'Go to home',
          },
        ]}
      />
    );
  }

  renderSubmit() {
    if (this.state.submitting) {
      return <Components.Button buttonType="secondary">Saving...</Components.Button>;
    }
    return (
      <div>
        <Components.Button inline buttonType="tertiary" onClick={this.onBack} isActive style={{ marginRight: 8 }}>
          Cancel
        </Components.Button>
        <Components.Button inline buttonType="primary" onClick={this.onSave} isActive>
          Save
        </Components.Button>
      </div>
    );
  }

  render() {
    const { success } = this.state;

    return (
      <Components.OverlayPage>
        <Components.OverlayPageContents noBottomButtons={success}>
          <Components.OverlayPageSection className="pageSectionWrapper--newPopup pageSectionWrapper--newPopup950">
            <div className="addForm">
              {this.renderBaseForm()}
              {this.renderWarnings()}
              {this.renderCustomForm()}
            </div>
            {this.renderSuccess()}
          </Components.OverlayPageSection>
        </Components.OverlayPageContents>
        <Components.OverlayPageBottomButtons>{this.renderSubmit()}</Components.OverlayPageBottomButtons>
      </Components.OverlayPage>
    );
  }
}

const mapStateToProps = (state) => {
  const { auth } = state;
  return { auth, strings: (state.strings && state.strings.config) || {} };
};

export default connect(mapStateToProps, { jobTypesUpdate })(withRouter(AddJobType));
