import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _isEqual from "lodash/isEqual";
import _get from "lodash/get";
import React, { useMemo, useState } from "react";
import { connect } from "../../../redux";
import { useHandler } from "../../../../hooks/useHandler";
import { set, merge } from "dot-prop-immutable";
import { getActiveElementWithChildren } from "../../../selectors";
import { ReactComponent as BorderOuterIcon } from "@svgr/webpack!../../../assets/icons/border_outer.svg";
import { ReactComponent as BorderLeftIcon } from "@svgr/webpack!../../../assets/icons/border_left.svg";
import { ReactComponent as BorderRightIcon } from "@svgr/webpack!../../../assets/icons/border_right.svg";
import { ReactComponent as BorderTopIcon } from "@svgr/webpack!../../../assets/icons/border_top.svg";
import { ReactComponent as BorderBottomIcon } from "@svgr/webpack!../../../assets/icons/border_bottom.svg";
import SliderWithInput from "./SliderWithInput";
import Footer from "./Footer";
/**
 * PMSettings (Padding/Margin settings).
 * This component is reused in Padding and Margin plugins since the behavior of both CSS attributes is the same.
 */

var PMSettings = function PMSettings(props) {
  var advanced = props.advanced,
      valueKey = props.valueKey;

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      tabIndex = _useState2[0],
      setTabIndex = _useState2[1];

  var updateSettings = useHandler(props, function (_ref) {
    var element = _ref.element,
        updateElement = _ref.updateElement;
    return function (name, newValue) {
      var history = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
      var propName = "".concat(valueKey, ".").concat(name);

      if (name !== "advanced") {
        newValue = parseInt(newValue) || 0;
      }

      var newElement = set(element, propName, newValue); // Update all values in advanced settings

      if (propName.endsWith(".all")) {
        var prefix = propName.includes("desktop") ? "desktop" : "mobile";
        newElement = merge(newElement, "".concat(valueKey, ".").concat(prefix), {
          top: newValue,
          right: newValue,
          bottom: newValue,
          left: newValue
        });
      }

      updateElement({
        element: newElement,
        history: history,
        merge: true
      });
    };
  });
  var getUpdateValue = useMemo(function () {
    var handlers = {};
    return function (name) {
      if (!handlers[name]) {
        handlers[name] = function (value) {
          return updateSettings(name, value, true);
        };
      }

      return handlers[name];
    };
  }, [updateSettings]);
  var getUpdatePreview = useMemo(function () {
    var handlers = {};
    return function (name) {
      if (!handlers[name]) {
        handlers[name] = function (value) {
          return updateSettings(name, value, false);
        };
      }

      return handlers[name];
    };
  }, [updateSettings]);
  return tabIndex === 0 && /*#__PURE__*/React.createElement(React.Fragment, null, !advanced ? /*#__PURE__*/React.createElement(SliderWithInput, {
    className: "no-bottom-padding",
    icon: /*#__PURE__*/React.createElement(BorderOuterIcon, null),
    valueKey: valueKey + ".desktop.all",
    updateValue: getUpdateValue("desktop.all"),
    updatePreview: getUpdatePreview("desktop.all")
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SliderWithInput, {
    icon: /*#__PURE__*/React.createElement(BorderTopIcon, null),
    valueKey: valueKey + ".desktop.top",
    updateValue: getUpdateValue("desktop.top"),
    updatePreview: getUpdatePreview("desktop.top")
  }), /*#__PURE__*/React.createElement(SliderWithInput, {
    icon: /*#__PURE__*/React.createElement(BorderRightIcon, null),
    valueKey: valueKey + ".desktop.right",
    updateValue: getUpdateValue("desktop.right"),
    updatePreview: getUpdatePreview("desktop.right")
  }), /*#__PURE__*/React.createElement(SliderWithInput, {
    icon: /*#__PURE__*/React.createElement(BorderBottomIcon, null),
    valueKey: valueKey + ".desktop.bottom",
    updateValue: getUpdateValue("desktop.bottom"),
    updatePreview: getUpdatePreview("desktop.bottom")
  }), /*#__PURE__*/React.createElement(SliderWithInput, {
    className: "no-bottom-padding",
    icon: /*#__PURE__*/React.createElement(BorderLeftIcon, null),
    valueKey: valueKey + ".desktop.left",
    updateValue: getUpdateValue("desktop.left"),
    updatePreview: getUpdatePreview("desktop.left")
  })), /*#__PURE__*/React.createElement(Footer, {
    advanced: Boolean(advanced),
    toggleAdvanced: getUpdateValue("advanced")
  }));
};

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

export default connect(function (state, _ref2) {
  var styleAttribute = _ref2.styleAttribute;
  var valueKey = "data.settings." + styleAttribute;
  var element = getActiveElementWithChildren(state);
  return {
    valueKey: valueKey,
    advanced: _get(element, valueKey + ".advanced", false),
    element: element
  };
}, mapDispatchToProps, null, {
  areStatePropsEqual: _isEqual
})(PMSettings);
//# sourceMappingURL=PMSettings.js.map