text: import React from 'react';
  import createReactClass from 'create-react-class';
  import PropTypes from 'prop-types';
  import _ from 'lodash';
  import { Overlay, Request } from 'lore-react-forms-material-ui';
  import formMap from './formMap';
  
  export default createReactClass({
    displayName: 'Wizard',
  
    propTypes: {
      steps: PropTypes.array.isRequired
    },
  
    getInitialState() {
      const {
        model,
        data
      } = this.props;
  
      return {
        key: 0,
        stepIndex: 0,
        data: _.merge({}, data, model.data),
        isSaving: false,
        request: null,
        hasError: false
      }
    },
  
    request: function(data) {
      const { modelName } = this.props;
      const { model, request } = this.props;
      return request ? request(data) : lore.actions[modelName].destroy(model).payload;
    },
  
    onSubmit: function (newData) {
      const { data } = this.state;
      const nextData = _.extend({}, data, newData);
  
      this.setState({
        isSaving: true,
        hasError: false,
        data: nextData,
        request: this.request(nextData)
      });
    },
  
    onRequestSuccess: function (request) {
      const { steps } = this.props;
      const lastStepIndex = steps.length - 1;
  
      this.setState({
        isSaving: false,
        request: request,
        hasError: false,
        stepIndex: lastStepIndex
      });
  
      this.afterRequestSuccess(request);
    },
  
    afterRequestSuccess: function(request) {
      const { afterRequestSuccess } = this.props;
      if (afterRequestSuccess) {
        afterRequestSuccess(request, this);
      }
    },
  
    onRequestError: function (request) {
      this.setState({
        isSaving: false,
        request: request,
        hasError: true
      });
    },
  
    onResetWizard: function () {
      this.setState(_.extend(this.getInitialState(), {
        key: this.state.key + 1
      }));
    },
  
    onNext: function (newData, newStepIndex) {
      const {
        data,
        stepIndex
      } = this.state;
  
      this.setState({
        stepIndex: newStepIndex || (stepIndex + 1),
        data: _.extend({}, data, newData)
      });
    },
  
    onPrevious: function (newData, newStepIndex) {
      const {
        data,
        stepIndex
      } = this.state;
  
      this.setState({
        stepIndex: newStepIndex || (stepIndex - 1),
        data: _.extend({}, data, newData)
      });
    },
  
    onChangeStep(newData, newStepIndex) {
      const {data} = this.state;
  
      this.setState({
        stepIndex: newStepIndex,
        data: _.extend({}, data, newData)
      });
    },
  
    render: function () {
      const { modelName } = this.props;
      const {
        steps,
        schema,
        fieldMap,
        actionMap,
        requestProps
      } = this.props;
  
      const {
        key,
        data,
        stepIndex,
        request,
        isSaving,
        hasError
      } = this.state;
  
      const stepConfig = steps[stepIndex];
      const form = formMap[stepConfig.form];
  
      const step = form.render({
        modelName: modelName,
        data: data,
        schema: schema,
        fieldMap: fieldMap,
        actionMap: actionMap,
        hasError: hasError,
        request: request,
        callbacks: {
          onNext: (newData, nextStep) => {
            this.onNext(newData, nextStep)
          },
          onPrevious: (newData, nextStep) => {
            this.onPrevious(newData, nextStep)
          },
          onSubmit: (newData) => {
            this.onSubmit(newData)
          },
          onResetWizard: this.onResetWizard
        }
      }, stepConfig);
  
      return (
        <Overlay isVisible={isSaving}>
          <div key={key}>
            {(request && isSaving) ? (
              <Request {..._.assign({
                request: request,
                reducer: modelName,
                singleton: false,
                onSuccess: this.onRequestSuccess,
                onError: this.onRequestError
              }, requestProps)} />
            ) : null}
            {step}
          </div>
        </Overlay>
      );
    }
  
  });
  