import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import React, { useCallback } from "react";
import styled from "styled-components";
import { Col } from "@whalecloud/fdx";
import { ElementRoot } from "../../../components/ElementRoot";
import ColumnChildForBlock from "./ColumnChildForBlock";
import { alignMap } from "./util";
import { judgeIfButtonElement } from "../../../../utils/util";
var ColumnContainer = /*#__PURE__*/styled(Col, {
  target: "eidltop0",
  label: "ColumnContainer"
})({
  position: "relative",
  display: "flex",
  "&:hover": {
    ">.resize-handle": {
      display: "block !important"
    }
  }
});
var containerStyle = {
  display: "flex",
  flexDirection: "column",
  width: "100%"
};

var Column = function Column(props) {
  var element = props.element,
      colProps = props.colProps,
      restProps = _objectWithoutProperties(props, ["element", "colProps"]);

  var elements = element.elements;
  var _element$data$setting = element.data.settings.align,
      align = _element$data$setting === void 0 ? 'center' : _element$data$setting;
  var _element$data = element.data,
      _element$data$directi = _element$data.direction,
      direction = _element$data$directi === void 0 ? 'vertical' : _element$data$directi,
      _element$data$classNa = _element$data.className,
      className = _element$data$classNa === void 0 ? '' : _element$data$classNa;
  var firstChildElement = elements.length > 0 ? elements[0] : {};
  var getContainerStyle = useCallback(function () {
    var style = _objectSpread({}, containerStyle);

    if (direction === 'horizontal') {
      style.flexDirection = 'row';

      if (judgeIfButtonElement(firstChildElement)) {
        style['justifyContent'] = alignMap[align];
      }
    } else {
      style.flexDirection = 'column';
    }

    return style;
  }, [firstChildElement, direction]);
  return /*#__PURE__*/React.createElement(ColumnContainer, colProps, /*#__PURE__*/React.createElement(ElementRoot, {
    element: element,
    className: "webiny-pb-base-page-element-style webiny-pb-layout-column ".concat(className),
    style: getContainerStyle()
  }, elements.map(function (child) {
    if (child.data && child.data.formSettings) {
      child.data.formSettings = _objectSpread(_objectSpread({}, restProps), child.data.formSettings);
    }

    return /*#__PURE__*/React.createElement(ColumnChildForBlock, Object.assign({
      key: child.id,
      id: child.id,
      element: child,
      align: align,
      direction: direction
    }, restProps));
  })));
};

export default /*#__PURE__*/React.memo(Column);
//# sourceMappingURL=ColumnForBlock.js.map