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 from 'react';
import { connect } from "../../../redux";
import styled from "styled-components";
import { css } from 'emotion';
import { SimpleForm as Form } from '@whalecloud/fdx';
import { useDrop } from 'react-dnd';
import { i18n } from '@fishx/i18n';
import { useHandlers } from "../../../../hooks/useHandlers";
import DropZone from "../../../components/DropZone";
import { getElementWithChildren } from "../../../selectors";
import { ResizeArea, Resizer, resizeHandler } from "../../../components/Resize";
import DropChild from "../../../components/DropChild";
var PlaceholderContainer = /*#__PURE__*/styled("span", {
  target: "e1u36thr0",
  label: "PlaceholderContainer"
})({
  position: "relative"
});
var Container = /*#__PURE__*/styled("div", {
  target: "e1u36thr1",
  label: "Container"
})({
  width: "100%",
  display: 'flex',
  justifyContent: 'center'
});

var FormContainer = function FormContainer(props) {
  var elementStyle = props.elementStyle,
      updateForm = props.updateForm,
      updateElement = props.updateElement,
      resizeStart = props.resizeStart,
      resizeStop = props.resizeStop,
      elementAttributes = props.elementAttributes,
      customClasses = props.customClasses,
      combineClassNames = props.combineClassNames,
      element = props.element;

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

  var id = element.id,
      type = element.type,
      path = element.path,
      elements = element.elements;
  var _element$data = element.data,
      _element$data$formSet = _element$data.formSettings,
      formSettings = _element$data$formSet === void 0 ? {} : _element$data$formSet,
      _element$data$classNa = _element$data.className,
      className = _element$data$classNa === void 0 ? "" : _element$data$classNa;

  var labelWidth = formSettings.labelWidth,
      restFormSettings = _objectWithoutProperties(formSettings, ["labelWidth"]);

  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
          }
        });
      };
    }
  }),
      onDrop = _useHandlers.onDrop;

  var _resizeHandler = resizeHandler({
    element: element,
    resizeStart: resizeStart,
    resizeStop: resizeStop,
    updateElement: updateElement
  }),
      refChildren = _resizeHandler.refChildren,
      resizing = _resizeHandler.resizing,
      restResizProps = _objectWithoutProperties(_resizeHandler, ["refChildren", "resizing"]);

  var lastChild = elements.length > 0 ? elements[elements.length - 1] : null;

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

  return /*#__PURE__*/React.createElement(Container, Object.assign({
    ref: droper,
    className: "webiny-pb-layout-form-container " + /*#__PURE__*/css(containerStyle, "label:FormContainer;")
  }, elementAttributes), /*#__PURE__*/React.createElement(ResizeArea, {
    refChildren: refChildren,
    resizing: resizing
  }), /*#__PURE__*/React.createElement(Form, Object.assign({
    style: {
      width: width ? width : '100%',
      alignSelf: justifyContent,
      alignItems: alignItems
    },
    className: combineClassNames.apply(void 0, _toConsumableArray(customClasses))
  }, restFormSettings), !elements.length && /*#__PURE__*/React.createElement(DropZone.Center, {
    key: id,
    id: id,
    type: type,
    path: path
  }, /*#__PURE__*/React.createElement(PlaceholderContainer, {
    className: "text-gray-600 text-xs"
  }, i18n('PAGEBUIDER_SETTINGS_DRAG_TIPS'))), elements.map(function (child, index) {
    var last = index === elements.length - 1;
    return /*#__PURE__*/React.createElement(Resizer, Object.assign({
      key: child.id,
      id: child.id,
      index: index,
      resizing: resizing
    }, restResizProps), /*#__PURE__*/React.createElement(DropChild, {
      childId: child.id,
      childType: child.type,
      type: type,
      id: id,
      index: index,
      count: elements.length,
      last: last
    }));
  })));
};

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

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