import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _isEqual from "lodash/isEqual";
import React, { useCallback } from "react";
import { connect } from "../../../redux";
import { css } from "emotion";
import styled from "styled-components";
import { i18n } from '@fishx/i18n';
import DropZone from "../../../components/DropZone";
import { getElement, getParentElementWithChildren } from "../../../selectors";
import { useHandlers } from "../../../../hooks/useHandlers";
import { ResizeArea, Resizer, resizeHandler } from "../../../components/Resize";
import DropChild from "../../../components/DropChild";
var PlaceholderContainer = /*#__PURE__*/styled("span", {
  target: "e18z96en0",
  label: "PlaceholderContainer"
})({
  position: "relative"
});
var ChildContainer = /*#__PURE__*/styled("div", {
  target: "e18z96en1",
  label: "ChildContainer"
})({
  position: "relative",
  width: "100%",
  display: "flex"
});

var Container = function Container(props) {
  var buildMode = props.buildMode,
      elementStyle = props.elementStyle,
      elementAttributes = props.elementAttributes,
      customClasses = props.customClasses,
      containerClassName = props.containerClassName,
      combineClassNames = props.combineClassNames,
      element = props.element,
      updateElement = props.updateElement,
      resizeStart = props.resizeStart,
      resizeStop = props.resizeStop,
      currentCondition = props.currentCondition;

  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,
      _element$data = element.data,
      data = _element$data === void 0 ? {} : _element$data;

  var _ref = data || {},
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? "" : _ref$className,
      _ref$componentSetting = _ref.componentSettings,
      componentSettings = _ref$componentSetting === void 0 ? {} : _ref$componentSetting;

  var term = componentSettings.term; // 判断if条件内的block是否需要渲染

  var ifCurrentBlockNeedRender = useCallback(function () {
    var _element$data2;

    var _ref2 = ((_element$data2 = element.data) === null || _element$data2 === void 0 ? void 0 : _element$data2.componentSettings) || {},
        term = _ref2.term;

    if (typeof term === 'boolean' && typeof currentCondition === 'boolean') {
      return currentCondition === term;
    }

    return true;
  }, [currentCondition, element]);

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

  var _useHandlers = useHandlers(props, {
    onDrop: function onDrop(_ref3) {
      var element = _ref3.element,
          dropElement = _ref3.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;

  if (!ifCurrentBlockNeedRender()) {
    return null;
  }

  var renderAppChildren = function renderAppChildren() {
    return elements.map(function (child, index) {
      var last = index === elements.length - 1;
      return /*#__PURE__*/React.createElement(ChildContainer, {
        key: child.id
      }, /*#__PURE__*/React.createElement(DropChild, {
        childId: child.id,
        type: type,
        id: id,
        index: index,
        count: elements.length,
        last: last
      }));
    });
  };

  return /*#__PURE__*/React.createElement("div", Object.assign({
    style: {
      width: "100%",
      display: "flex",
      justifyContent: "center"
    },
    className: "".concat(containerClassName, " ").concat( /*#__PURE__*/css(containerStyle, "label:Container;"), " ").concat(buildMode ? className : '')
  }, elementAttributes), buildMode !== 'H5App' && /*#__PURE__*/React.createElement(ResizeArea, {
    refChildren: refChildren,
    resizing: resizing
  }), /*#__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,
    minHeight: typeof term === 'boolean' ? 50 : 170
  }, /*#__PURE__*/React.createElement(PlaceholderContainer, {
    className: "text-gray-600 text-xs"
  }, i18n('PAGEBUILDER_ELEMENT_BLOCK_DRAG_TIP'))), buildMode === 'H5App' && renderAppChildren(), buildMode === 'PC' && 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,
      type: type,
      id: id,
      index: index,
      count: elements.length,
      last: last
    }));
  })));
};

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

export default connect(function (state, props) {
  var _element$data3;

  var element = getElement(state, props.elementId);
  var currentCondition = 'all';

  var _ref4 = ((_element$data3 = element.data) === null || _element$data3 === void 0 ? void 0 : _element$data3.componentSettings) || {},
      term = _ref4.term;

  if (typeof term === 'boolean') {
    var _parentIf$data, _parentIf$data$compon;

    var parentIf = getParentElementWithChildren(state, element.id) || {};
    currentCondition = (_parentIf$data = parentIf.data) === null || _parentIf$data === void 0 ? void 0 : (_parentIf$data$compon = _parentIf$data.componentSettings) === null || _parentIf$data$compon === void 0 ? void 0 : _parentIf$data$compon.currentCondition;
  }

  return {
    element: _objectSpread(_objectSpread({}, element), {}, {
      elements: element.elements.map(function (id) {
        return getElement(state, id);
      })
    }),
    currentCondition: currentCondition
  };
}, mapDispatchToProps, null, {
  areStatePropsEqual: _isEqual
})(Container);
//# sourceMappingURL=BlockContainer.js.map