"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Regular = exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactFinalForm = require("react-final-form");

var _Wizard = require("./Wizard");

var _ReduxFormWrapper = _interopRequireDefault(require("../../components/ReduxFormWrapper"));

var _TextInput = _interopRequireDefault(require("../../components/TextInput"));

var _TextArea = _interopRequireDefault(require("../../components/TextArea"));

var _FormGroup = _interopRequireDefault(require("../../components/FormGroup"));

var _Blockquote = _interopRequireDefault(require("../../components/Blockquote"));

var _Wrapper = _interopRequireDefault(require("../../components/Wrapper"));

var _RadioButton = _interopRequireDefault(require("../../components/RadioButton/RadioButton"));

var _RegularPage = _interopRequireDefault(require("../RegularPage"));

var _README = _interopRequireDefault(require("./README.mdx"));

// const markdown = 'TODO: sourcecode coming soon';
var _default = {
  title: 'Templates/WizardForm',
  parameters: {
    componentSubtitle: 'Example',
    status: 'released',
    mdx: _README.default
  }
};
exports.default = _default;

var renderError = function renderError(_ref) {
  var _ref$meta = _ref.meta,
      touched = _ref$meta.touched,
      error = _ref$meta.error;
  return touched && error ? /*#__PURE__*/_react.default.createElement("span", {
    className: "wfp--form-requirement"
  }, error) : false;
};

var Regular = function Regular(args) {
  return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
    background: "lighter",
    pageWidth: "lg",
    spacing: "xl"
  }, /*#__PURE__*/_react.default.createElement(_Wizard.Wizard, {
    initialValues: {
      employed: true,
      stooge: 'larry'
    }
  }, /*#__PURE__*/_react.default.createElement(_Wizard.Page, {
    label: "Name and last name"
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '2rem'
    }
  }, /*#__PURE__*/_react.default.createElement(_Blockquote.default, {
    title: "Regular Blockquote"
  }, "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.")), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
    id: "firstName",
    name: "firstName",
    helperText: "Enter your full first name",
    component: _ReduxFormWrapper.default,
    inputComponent: _TextInput.default,
    labelText: "First Name"
  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
    id: "lastName",
    name: "lastName",
    helperText: "Some more requirements",
    component: _ReduxFormWrapper.default,
    inputComponent: _TextInput.default,
    labelText: "Last Name"
  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
    component: _ReduxFormWrapper.default,
    inputComponent: _TextArea.default,
    name: "notes",
    labelText: "Notes",
    placeholder: "Notes"
  })), /*#__PURE__*/_react.default.createElement(_Wizard.Page, {
    label: "Contact data"
  }, /*#__PURE__*/_react.default.createElement(_FormGroup.default, null, /*#__PURE__*/_react.default.createElement("label", {
    htmlFor: "sex"
  }, "Sex"), /*#__PURE__*/_react.default.createElement(_FormGroup.default, {
    className: "wfp--input-group",
    name: "input-group",
    defaultSelected: "default-selected",
    legend: "Group Legend"
  }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
    name: "sex",
    component: _ReduxFormWrapper.default,
    inputComponent: _RadioButton.default,
    type: "radio",
    value: "male",
    labelText: "Male"
  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
    name: "sex",
    component: _ReduxFormWrapper.default,
    inputComponent: _RadioButton.default,
    type: "radio",
    value: "female",
    labelText: "Female"
  })), /*#__PURE__*/_react.default.createElement(_FormGroup.default, null, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
    component: _ReduxFormWrapper.default,
    inputComponent: _TextArea.default,
    name: "notes",
    labelText: "Notes",
    placeholder: "Notes"
  })), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
    name: "sex",
    component: renderError
  }))), /*#__PURE__*/_react.default.createElement(_Wizard.Page, {
    label: "Additional notes",
    validate: function validate(values) {
      var errors = {};

      if (!values.newNotes) {
        errors.newNotes = 'Required';
      }

      return errors;
    }
  }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
    component: _ReduxFormWrapper.default,
    inputComponent: _TextArea.default,
    name: "newNotes",
    labelText: "Notes",
    placeholder: "Notes"
  })), /*#__PURE__*/_react.default.createElement(_Wizard.Page, {
    label: "Sulamen mon anmen"
  }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
    component: _ReduxFormWrapper.default,
    inputComponent: _TextArea.default,
    name: "newNotes2",
    labelText: "Notes",
    placeholder: "Notes"
  })), /*#__PURE__*/_react.default.createElement(_Wizard.Page, {
    label: "Summary",
    helperText: "Check & validate",
    status: 'summary'
  }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
    component: _ReduxFormWrapper.default,
    inputComponent: _TextArea.default,
    name: "summary",
    labelText: "Summary",
    placeholder: "Summary"
  }))));
};

exports.Regular = Regular;
Regular.decorators = [function (Story) {
  return /*#__PURE__*/_react.default.createElement(_RegularPage.default, {
    title: "Wizard form",
    withoutSecondaryTabs: true,
    pageWidth: "lg"
  }, /*#__PURE__*/_react.default.createElement(Story, null));
}];