import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "initialValues", "onSubmit"];
import React, { useState } from 'react';
import { Form, FormSpy } from 'react-final-form';
import FormWizard from '../../components/FormWizard';
import FormControls from '../../components/FormControls';
import StepNavigation from '../../components/StepNavigation';
import StepNavigationItem from '../../components/StepNavigationItem';

var handleValidation = function handleValidation(props) {
  return null;
};

var Page = function Page(_ref) {
  var children = _ref.children;
  return children;
};

var Wizard = function Wizard(_ref2) {
  var children = _ref2.children,
      initialValues = _ref2.initialValues,
      onSubmit = _ref2.onSubmit,
      other = _objectWithoutProperties(_ref2, _excluded);

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      page = _useState2[0],
      setPage = _useState2[1];

  var _useState3 = useState(initialValues || {}),
      _useState4 = _slicedToArray(_useState3, 2),
      values = _useState4[0],
      setValues = _useState4[1];

  var handleTabClick = function handleTabClick(values) {
    if (Object.keys(validate(values)).length > 0) {// console.log("not valid",validate(values))
    } else {
      setPage(values);
      setValues(values);
    }
  };

  var next = function next(values) {
    setPage(Math.min(page + 1, children.length - 1));
    setValues(values);
  };

  var previous = function previous() {
    setPage(Math.max(page - 1, 0));
  };
  /**
   * NOTE: Both validate and handleSubmit switching are implemented
   * here because 🏁 Redux Final Form does not accept changes to those
   * functions once the form has been defined.
   */


  var validate = function validate(values) {
    var activePage = React.Children.toArray(children)[page];
    return activePage.props.validate ? activePage.props.validate(values) : {};
  };

  var handleFormSubmit = function handleFormSubmit(values) {
    var isLastPage = page === React.Children.count(children) - 1;

    if (isLastPage) {
      return onSubmit(values);
    } else {
      next(values);
    }
  };

  var activePage = React.Children.toArray(children)[page];
  var isLastPage = page === React.Children.count(children) - 1;
  return /*#__PURE__*/React.createElement(Form, {
    initialValues: values,
    validate: validate,
    onSubmit: handleFormSubmit
  }, function (_ref3) {
    var handleSubmit = _ref3.handleSubmit,
        submitting = _ref3.submitting,
        values = _ref3.values;
    return /*#__PURE__*/React.createElement("form", {
      onSubmit: handleSubmit
    }, /*#__PURE__*/React.createElement(FormWizard, {
      stickySidebar: true,
      formHeader: "Step ".concat(page, "/4: ").concat(activePage.props.label),
      formControls: /*#__PURE__*/React.createElement(FormControls, {
        onPreviousClick: previous,
        previousHidden: page > 0 ? false : true,
        nextHidden: isLastPage,
        submitHidden: !isLastPage,
        onSubmitClick: handleSubmit
      }),
      sidebar: /*#__PURE__*/React.createElement(StepNavigation, {
        selectedPage: page,
        onSelectionChange: handleTabClick,
        handleTabClick: handleTabClick
      }, React.Children.map(children, function (child, i) {
        // Ignore the first child
        return /*#__PURE__*/React.createElement(StepNavigationItem, _extends({
          page: i,
          status: page >= i ? 'complete' : 'not-started'
        }, child.props));
      }))
    }, /*#__PURE__*/React.createElement("div", {
      className: "wfp--form-long"
    }, activePage)), /*#__PURE__*/React.createElement(FormSpy, {
      subscription: {
        active: true,
        values: true
      },
      component: handleValidation
    }));
  });
};

export { Wizard, Page }; // static propTypes = {
//   onSubmit: PropTypes.func.isRequired,
// };