import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _isEqual from "lodash/isEqual";

/* eslint-disable */
import React, { useState, useEffect } from 'react';
import { createForm } from 'rc-form';
import { connect } from "../../../redux";
import styled from "styled-components";
import { useStore } from 'react-redux';
import { css } from 'emotion';
import { set } from 'dot-prop-immutable';
import { useDrop } from 'react-dnd';
import { useHandlers } from "../../../../hooks/useHandlers";
import DropZone from "../../../components/DropZone";
import { getElementWidthChildren } from "../../../selectors";
import DropChild from "../../../components/DropChild";
var PlaceholderContainer = /*#__PURE__*/styled("span", {
  target: "e4a1sfu0",
  label: "PlaceholderContainer"
})({
  position: "relative"
});
var ChildContainer = /*#__PURE__*/styled("div", {
  target: "e4a1sfu1",
  label: "ChildContainer"
})({
  position: "relative",
  width: "100%",
  display: 'flex',
  marginBottom: 10
});

var FormAppContainer = function FormAppContainer(props) {
  var elementStyle = props.elementStyle,
      updateForm = props.updateForm,
      elementAttributes = props.elementAttributes,
      customClasses = props.customClasses,
      combineClassNames = props.combineClassNames,
      element = props.element,
      form = props.form;

  var width = elementStyle.width,
      alignItems = elementStyle.alignItems,
      justifyContent = elementStyle.justifyContent,
      containerStyle = _objectWithoutProperties(elementStyle, ["width", "alignItems", "justifyContent"]);

  var id = element.id,
      type = element.type,
      elements = element.elements;
  var _element$data$classNa = element.data.className,
      className = _element$data$classNa === void 0 ? "" : _element$data$classNa;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      load = _useState2[0],
      setLoad = _useState2[1];

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

  useEffect(function () {
    if (!element.data.formInstance) {
      var newElement = set(element, 'data.formInstance', form);
      updateForm({
        element: newElement
      });
      setLoad(true);
    }
  }, [element]); // useEffect(() => {
  //   const formValues = form.getFieldsValue();
  //   if (!isEqual(values, formValues)) {
  //     Object.keys(formValues).forEach(key => {
  //       if (values[key] !== formValues[key]) {
  //         const child = elements.find(v => v.data?.formItemSettings?.name === key);
  //         if (child) {
  //           const newElement = set(child, 'data.formItemSettings.valueTest', formValues[key]);
  //           updateElement({ element: newElement })
  //         }
  //       }
  //     })
  //     setValues(formValues);
  //   }
  // }, [form.getFieldsValue()])

  var store = useStore();

  var _useHandlers = useHandlers(props, {
    onDrop: function onDrop(_ref) {
      var element = _ref.element,
          dropElement = _ref.dropElement;
      return function (source) {
        var id = element.id,
            path = element.path,
            type = element.type;
        dropElement({
          source: source,
          target: {
            id: id,
            path: path,
            type: type,
            position: null
          }
        });
      };
    },
    dropElementAbove: function dropElementAbove(_ref2) {
      var element = _ref2.element,
          dropElement = _ref2.dropElement;
      return function (source, i) {
        var id = element.id,
            type = element.type;
        dropElement({
          source: source,
          target: {
            id: id,
            type: type,
            position: i
          }
        }, store);
      };
    },
    dropElementBelow: function dropElementBelow(_ref3) {
      var element = _ref3.element,
          dropElement = _ref3.dropElement;
      return function (source) {
        var id = element.id,
            type = element.type,
            elements = element.elements;
        dropElement({
          source: source,
          target: {
            id: id,
            type: type,
            position: elements.length
          }
        }, store);
      };
    }
  }),
      onDrop = _useHandlers.onDrop,
      dropElementAbove = _useHandlers.dropElementAbove,
      dropElementBelow = _useHandlers.dropElementBelow;

  var _useDrop = useDrop({
    accept: 'formTableDrag',
    hover: function hover(item, monitor) {
      item.el = 'form';
      item.element = element;
    }
  }),
      _useDrop2 = _slicedToArray(_useDrop, 2),
      droper = _useDrop2[1];

  return load ? /*#__PURE__*/React.createElement("div", Object.assign({
    style: {
      width: '100%',
      display: 'flex',
      justifyContent: 'center'
    },
    className: "webiny-pb-layout-form-container " + /*#__PURE__*/css(containerStyle, "label:FormAppContainer;")
  }, elementAttributes, {
    ref: droper
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      width: width ? width : '100%',
      alignSelf: justifyContent,
      alignItems: alignItems
    },
    className: combineClassNames.apply(void 0, _toConsumableArray(customClasses))
  }, !elements.length && /*#__PURE__*/React.createElement(DropZone.Center, {
    key: id,
    id: id,
    type: type,
    onDrop: onDrop
  }, /*#__PURE__*/React.createElement(PlaceholderContainer, {
    className: "text-gray-600"
  }, "\u8BF7\u5C06\u53F3\u4FA7\u6570\u636E\u62D6\u5165\u4E8E\u6B64")), elements.map(function (child, index) {
    var last = index === elements.length - 1;
    return /*#__PURE__*/React.createElement(ChildContainer, {
      className: className,
      key: child.id
    }, /*#__PURE__*/React.createElement(DropChild, {
      childId: child.id,
      type: type,
      id: id,
      index: index,
      count: elements.length,
      last: last
    }));
  }))) : null;
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    updateElement: function updateElement(payload) {
      dispatch({
        type: 'appBuilder/updateAndFlattenElement',
        payload: payload
      });
    },
    updateForm: function updateForm(payload) {
      dispatch({
        type: 'appBuilder/updateFormElement',
        payload: payload
      });
    },
    dropElement: function dropElement(payload) {
      dispatch({
        type: 'appBuilder/dropElement',
        payload: payload
      });
    }
  };
};

export default connect(function (state, props) {
  return {
    element: getElementWidthChildren(state, props.elementId)
  };
}, mapDispatchToProps, null, {
  areStatePropsEqual: _isEqual
})( /*#__PURE__*/React.memo(createForm()(FormAppContainer)));
//# sourceMappingURL=FormAppContainer.js.map