import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React from "react";
import { connect } from "../../../redux";
import { set } from "dot-prop-immutable";
import { Collapse } from '@whalecloud/fdx';
import { i18n } from '@fishx/i18n';
import styled from "styled-components";
import useUpdateHandlers from "../useUpdateHandlers";
import { getActiveElement, getElementWithChildren } from "../../../selectors";
import { toolCollapseAttr } from "../../../utils";
import CommonStyleSettings from "../../elements/components/CommonStyleSettings";
var Panel = Collapse.Panel;
var FormContainer = /*#__PURE__*/styled('div', {
  target: "e1cxyyl20",
  label: "FormContainer"
})({
  padding: 5
});
var DATA_NAMESPACE = "data.componentSettings";

var HeaderCellSettings = function HeaderCellSettings(_ref) {
  var ele = _ref.ele,
      element = _ref.element,
      updateElement = _ref.updateElement;
  var _element$data$compone = element.data.componentSettings,
      componentSettings = _element$data$compone === void 0 ? {} : _element$data$compone;
  var _componentSettings$fo = componentSettings.fontSize,
      fontSize = _componentSettings$fo === void 0 ? 14 : _componentSettings$fo;

  var _useUpdateHandlers = useUpdateHandlers({
    element: ele,
    updateElement: updateElement,
    dataNamespace: DATA_NAMESPACE
  }),
      getUpdateValue = _useUpdateHandlers.getUpdateValue,
      getUpdatePreview = _useUpdateHandlers.getUpdatePreview;

  var initialValues = _objectSpread(_objectSpread({
    lineHeight: 1.5
  }, componentSettings), {}, {
    fontSize: String(fontSize).indexOf('px') > -1 ? fontSize.split('px')[0] : Number(fontSize)
  });

  var onFormChange = function onFormChange(obj) {
    Object.keys(obj).forEach(function (key) {
      var value = key === 'fontSize' ? "".concat(obj[key], "px") : Number(obj[key]);
      var newElement = set(ele, "".concat(DATA_NAMESPACE, ".").concat(key), value);
      updateElement({
        element: newElement
      });
    });
  };

  return /*#__PURE__*/React.createElement(FormContainer, null, /*#__PURE__*/React.createElement(Collapse, Object.assign({}, toolCollapseAttr, {
    defaultActiveKey: ['1', '2', '3']
  }), /*#__PURE__*/React.createElement(Panel, {
    header: i18n('PAGEBUIDER_SETTINGS'),
    key: "1"
  }, /*#__PURE__*/React.createElement(CommonStyleSettings, null))));
};

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

export default connect(function (state) {
  var element = getActiveElement(state);
  var ele = getElementWithChildren(state, element.id);
  return {
    element: element,
    ele: ele
  };
}, mapDispatchToProps)(HeaderCellSettings);
//# sourceMappingURL=Settings.js.map