import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _get from "lodash/get";
import React, { useCallback } from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import { Col } from "@whalecloud/fdx";
import { ElementRoot } from "../../../components/ElementRoot";
import ElementAnimation from "../../../components/ElementAnimation";
import { getContainerElementWithChildren } from "../../../selectors";
import previewDeviceConfig from "../../../../config/previewDeviceConfig";
import { alignMap } from "./util";
import ColumnChild from "./ColumnChild";
import ColumnForBlock from "./ColumnForBlock";
import { judgeIfButtonElement } from "../../../../utils/util";
var PC = previewDeviceConfig.PC;
var ColumnContainer = /*#__PURE__*/styled(Col, {
  target: "e73yzan0",
  label: "ColumnContainer"
})({
  position: "relative",
  // flex: "1 100%",
  boxSizing: "border-box",
  height: "100%",
  // width: "100%",
  zIndex: 20,
  display: "flex"
});
var containerStyle = {
  display: "flex",
  width: "100%",
  position: "relative"
};

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

  var colProps = {};
  var cols = _get(element.data, "settings.cols") || {};
  colProps.span = cols.span || 24;
  colProps.offset = cols.offset || 0;
  colProps.xs = 24;
  colProps.sm = 24;
  colProps.md = 24;
  var isDesktop = previewDevice === PC;
  colProps.lg = isDesktop ? colProps.span : 24;
  colProps.xl = isDesktop ? colProps.span : 24;
  colProps.xxl = isDesktop ? colProps.span : 24;

  if (containerType === 'block') {
    return /*#__PURE__*/React.createElement(ColumnForBlock, Object.assign({}, props, {
      colProps: colProps
    }));
  }

  var firstChildElement = element.elements.length > 0 ? element.elements[0] : {};
  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 _element$data$setting = element.data.settings.align,
      align = _element$data$setting === void 0 ? 'center' : _element$data$setting;
  var getContainerStyle = useCallback(function () {
    var style = _objectSpread({}, containerStyle);

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

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

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

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

export default connect(function (state, props) {
  var _formElement$data, _formElement$data$for;

  var formElement = getContainerElementWithChildren(state, props.element.id, props.nameSpace);
  return {
    labelWidth: (formElement === null || formElement === void 0 ? void 0 : (_formElement$data = formElement.data) === null || _formElement$data === void 0 ? void 0 : (_formElement$data$for = _formElement$data.formSettings) === null || _formElement$data$for === void 0 ? void 0 : _formElement$data$for.labelWidth) || 100,
    containerType: formElement === null || formElement === void 0 ? void 0 : formElement.type
  };
}, null)( /*#__PURE__*/React.memo(Column));
//# sourceMappingURL=Column.js.map