import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import Select from '../../components/Select';
import TextInput from '../../components/TextInput';
import NumberInput from '../../components/NumberInput';
import SelectItem from '../../components/SelectItem';
import Button from '../../components/Button';
import Form from '../../components/Form';
import Blockquote from '../../components/Blockquote/Blockquote';

var ComplexForm = function ComplexForm() {
  var _useForm = 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 = useState({}),
      _useState2 = _slicedToArray(_useState, 2),
      output = _useState2[0],
      setOutput = _useState2[1];

  return /*#__PURE__*/React.createElement(Form, {
    longForm: true,
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/React.createElement(TextInput, {
    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.createElement(TextInput, {
    labelText: "TextInput",
    name: "textinput",
    ref: register({
      validate: function validate(value) {
        return value !== 'admin' || 'Nice try!';
      }
    })
  }), /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "numberinput",
    render: function render(props) {
      return /*#__PURE__*/React.createElement(NumberInput, _extends({}, props, {
        labelText: "Number input",
        name: "numberinput",
        step: "0.1"
      }));
    }
  }), /*#__PURE__*/React.createElement(Select, {
    name: "select",
    inputRef: register,
    labelText: "Select"
  }, /*#__PURE__*/React.createElement(SelectItem, {
    value: "",
    text: "not selected"
  }), /*#__PURE__*/React.createElement(SelectItem, {
    value: "daily",
    text: "daily"
  }), /*#__PURE__*/React.createElement(SelectItem, {
    value: "weekly",
    text: "weekly"
  }), /*#__PURE__*/React.createElement(SelectItem, {
    value: "monthly",
    text: "monthly"
  })), errors.username && errors.username.message, /*#__PURE__*/React.createElement(Button, {
    type: "submit"
  }, "Submit"), ' ', /*#__PURE__*/React.createElement(Button, {
    type: "submit",
    kind: "secondary",
    onClick: function onClick() {
      return reset({
        numberinput: 3
      });
    }
  }, "Reset"), /*#__PURE__*/React.createElement(Blockquote, {
    title: "Output"
  }, JSON.stringify(output)));
};

export default ComplexForm;