import React from 'react';
import { Field } from 'react-final-form';
import { Wizard, Page } from './Wizard';
import ReduxFormWrapper from '../../components/ReduxFormWrapper';
import TextInput from '../../components/TextInput';
import TextArea from '../../components/TextArea';
import FormGroup from '../../components/FormGroup';
import Blockquote from '../../components/Blockquote';
import Wrapper from '../../components/Wrapper';
import RadioButton from '../../components/RadioButton/RadioButton';
import RegularPage from '../RegularPage';
import markdown from './README.mdx'; // const markdown = 'TODO: sourcecode coming soon';

export default {
  title: 'Templates/WizardForm',
  parameters: {
    componentSubtitle: 'Example',
    status: 'released',
    mdx: markdown
  }
};

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

export var Regular = function Regular(args) {
  return /*#__PURE__*/React.createElement(Wrapper, {
    background: "lighter",
    pageWidth: "lg",
    spacing: "xl"
  }, /*#__PURE__*/React.createElement(Wizard, {
    initialValues: {
      employed: true,
      stooge: 'larry'
    }
  }, /*#__PURE__*/React.createElement(Page, {
    label: "Name and last name"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: '2rem'
    }
  }, /*#__PURE__*/React.createElement(Blockquote, {
    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.createElement(Field, {
    id: "firstName",
    name: "firstName",
    helperText: "Enter your full first name",
    component: ReduxFormWrapper,
    inputComponent: TextInput,
    labelText: "First Name"
  }), /*#__PURE__*/React.createElement(Field, {
    id: "lastName",
    name: "lastName",
    helperText: "Some more requirements",
    component: ReduxFormWrapper,
    inputComponent: TextInput,
    labelText: "Last Name"
  }), /*#__PURE__*/React.createElement(Field, {
    component: ReduxFormWrapper,
    inputComponent: TextArea,
    name: "notes",
    labelText: "Notes",
    placeholder: "Notes"
  })), /*#__PURE__*/React.createElement(Page, {
    label: "Contact data"
  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement("label", {
    htmlFor: "sex"
  }, "Sex"), /*#__PURE__*/React.createElement(FormGroup, {
    className: "wfp--input-group",
    name: "input-group",
    defaultSelected: "default-selected",
    legend: "Group Legend"
  }, /*#__PURE__*/React.createElement(Field, {
    name: "sex",
    component: ReduxFormWrapper,
    inputComponent: RadioButton,
    type: "radio",
    value: "male",
    labelText: "Male"
  }), /*#__PURE__*/React.createElement(Field, {
    name: "sex",
    component: ReduxFormWrapper,
    inputComponent: RadioButton,
    type: "radio",
    value: "female",
    labelText: "Female"
  })), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Field, {
    component: ReduxFormWrapper,
    inputComponent: TextArea,
    name: "notes",
    labelText: "Notes",
    placeholder: "Notes"
  })), /*#__PURE__*/React.createElement(Field, {
    name: "sex",
    component: renderError
  }))), /*#__PURE__*/React.createElement(Page, {
    label: "Additional notes",
    validate: function validate(values) {
      var errors = {};

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

      return errors;
    }
  }, /*#__PURE__*/React.createElement(Field, {
    component: ReduxFormWrapper,
    inputComponent: TextArea,
    name: "newNotes",
    labelText: "Notes",
    placeholder: "Notes"
  })), /*#__PURE__*/React.createElement(Page, {
    label: "Sulamen mon anmen"
  }, /*#__PURE__*/React.createElement(Field, {
    component: ReduxFormWrapper,
    inputComponent: TextArea,
    name: "newNotes2",
    labelText: "Notes",
    placeholder: "Notes"
  })), /*#__PURE__*/React.createElement(Page, {
    label: "Summary",
    helperText: "Check & validate",
    status: 'summary'
  }, /*#__PURE__*/React.createElement(Field, {
    component: ReduxFormWrapper,
    inputComponent: TextArea,
    name: "summary",
    labelText: "Summary",
    placeholder: "Summary"
  }))));
};
Regular.decorators = [function (Story) {
  return /*#__PURE__*/React.createElement(RegularPage, {
    title: "Wizard form",
    withoutSecondaryTabs: true,
    pageWidth: "lg"
  }, /*#__PURE__*/React.createElement(Story, null));
}];