import _get from "lodash/get";
import React, { useMemo, useCallback } from "react";
import { connect } from "../../../redux";
import { set } from "dot-prop-immutable";
import { Tabs, Tab } from "@webiny/ui/Tabs";
import { getActiveElement } from "../../../selectors";
import Input from "../../elementSettings/components/Input";
import { ReactComponent as ImageIcon } from "@svgr/webpack!./round-image-24px.svg";

var ImageSettings = function ImageSettings(_ref) {
  var element = _ref.element,
      updateElement = _ref.updateElement;

  var _get2 = _get(element, "data", {}),
      _get2$image = _get2.image,
      image = _get2$image === void 0 ? {} : _get2$image;

  var setData = useMemo(function () {
    var historyUpdated = {};
    return function (name, value) {
      var attrKey = "data.image.".concat(name);
      var newElement = set(element, attrKey, value);

      if (historyUpdated[name] !== value) {
        historyUpdated[name] = value;
        updateElement({
          element: newElement
        });
      }
    };
  }, [element, updateElement]);
  var updateTitle = useCallback(function (value) {
    return setData("title", value);
  }, [setData]);
  var updateWidth = useCallback(function (value) {
    return setData("width", value);
  }, [setData]);
  var updateHeight = useCallback(function (value) {
    return setData("height", value);
  }, [setData]);
  return /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
    icon: /*#__PURE__*/React.createElement(ImageIcon, null),
    label: "Image"
  }, /*#__PURE__*/React.createElement(Input, {
    label: "Title",
    value: image.title || "",
    updateValue: updateTitle,
    inputWidth: "max-content"
  }), /*#__PURE__*/React.createElement(Input, {
    label: "Width",
    placeholder: "auto",
    description: "eg. 300 or 50%",
    value: image.width || "",
    updateValue: updateWidth,
    inputWidth: 80
  }), /*#__PURE__*/React.createElement(Input, {
    label: "Height",
    placeholder: "auto",
    description: "eg. 300 or 50%",
    value: image.height || "",
    updateValue: updateHeight,
    inputWidth: 80
  })));
};

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

export default connect(function (state) {
  return {
    element: getActiveElement(state)
  };
}, mapDispatchToProps)(ImageSettings);
//# sourceMappingURL=ImageSettings.js.map