"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

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

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

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

var _reactHookForm = require("react-hook-form");

var _Select = _interopRequireDefault(require("../../components/Select"));

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

var _NumberInput = _interopRequireDefault(require("../../components/NumberInput"));

var _SelectItem = _interopRequireDefault(require("../../components/SelectItem"));

var _Button = _interopRequireDefault(require("../../components/Button"));

var _Form = _interopRequireDefault(require("../../components/Form"));

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var ComplexForm = function ComplexForm() {
  var _useForm = (0, _reactHookForm.useForm)(),
      control = _useForm.control,
      handleSubmit = _useForm.handleSubmit,
      register = _useForm.register,
      errors = _useForm.errors,
      reset = _useForm.reset;

  var onSubmit = function onSubmit(values) {
    setOutput(values);
  };

  var _useState = (0, _react.useState)({}),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      output = _useState2[0],
      setOutput = _useState2[1];

  return /*#__PURE__*/_react.default.createElement(_Form.default, {
    longForm: true,
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
    labelText: "Email TextInput",
    name: "email",
    ref: register({
      required: 'Required',
      pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
        message: 'invalid email address'
      }
    })
  }), errors.email && errors.email.message, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
    labelText: "TextInput",
    name: "textinput",
    ref: register({
      validate: function validate(value) {
        return value !== 'admin' || 'Nice try!';
      }
    })
  }), /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
    control: control,
    name: "numberinput",
    render: function render(props) {
      return /*#__PURE__*/_react.default.createElement(_NumberInput.default, (0, _extends2.default)({}, props, {
        labelText: "Number input",
        name: "numberinput",
        step: "0.1"
      }));
    }
  }), /*#__PURE__*/_react.default.createElement(_Select.default, {
    name: "select",
    inputRef: register,
    labelText: "Select"
  }, /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
    value: "",
    text: "not selected"
  }), /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
    value: "daily",
    text: "daily"
  }), /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
    value: "weekly",
    text: "weekly"
  }), /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
    value: "monthly",
    text: "monthly"
  })), errors.username && errors.username.message, /*#__PURE__*/_react.default.createElement(_Button.default, {
    type: "submit"
  }, "Submit"), ' ', /*#__PURE__*/_react.default.createElement(_Button.default, {
    type: "submit",
    kind: "secondary",
    onClick: function onClick() {
      return reset({
        numberinput: 3
      });
    }
  }, "Reset"), /*#__PURE__*/_react.default.createElement(_Blockquote.default, {
    title: "Output"
  }, JSON.stringify(output)));
};

var _default = ComplexForm;
exports.default = _default;