import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _isEqual from "lodash/isEqual";
import _get from "lodash/get";
import * as React from "react";
import { connect } from "react-redux";
import { css } from "emotion";
import { Typography } from "@webiny/ui/Typography";
import { Grid, Cell } from "@webiny/ui/Grid";
import { IconButton } from "@webiny/ui/Button";
import { getActiveElement } from "../../../selectors";
import { ReactComponent as TopIcon } from "@svgr/webpack!./icons/round-border_top-24px.svg";
import { ReactComponent as RightIcon } from "@svgr/webpack!./icons/round-border_right-24px.svg";
import { ReactComponent as BottomIcon } from "@svgr/webpack!./icons/round-border_bottom-24px.svg";
import { ReactComponent as LeftIcon } from "@svgr/webpack!./icons/round-border_left-24px.svg";
var enabled = /*#__PURE__*/css({
  color: "var(--mdc-theme-primary, #fa5723) !important"
}, "label:enabled;");
var cellStyle = {
  marginBottom: 0
};

var getValue = function getValue(value, side) {
  var enabled = value[side];
  return typeof enabled === "undefined" ? true : enabled;
};

var Selector = /*#__PURE__*/React.memo(function (_ref) {
  var label = _ref.label,
      value = _ref.value,
      updateValue = _ref.updateValue;
  var top = getValue(value, "top");
  var right = getValue(value, "right");
  var bottom = getValue(value, "bottom");
  var left = getValue(value, "left");
  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
    span: 4
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, label)), /*#__PURE__*/React.createElement(Cell, {
    span: 8
  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
    span: 3,
    style: cellStyle
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: function onClick() {
      return updateValue(_objectSpread(_objectSpread({}, value), {}, {
        top: !top
      }));
    },
    className: top && enabled,
    icon: /*#__PURE__*/React.createElement(TopIcon, null)
  })), /*#__PURE__*/React.createElement(Cell, {
    span: 3,
    style: cellStyle
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: function onClick() {
      return updateValue(_objectSpread(_objectSpread({}, value), {}, {
        right: !right
      }));
    },
    className: right && enabled,
    icon: /*#__PURE__*/React.createElement(RightIcon, null)
  })), /*#__PURE__*/React.createElement(Cell, {
    span: 3,
    style: cellStyle
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: function onClick() {
      return updateValue(_objectSpread(_objectSpread({}, value), {}, {
        bottom: !bottom
      }));
    },
    className: bottom && enabled,
    icon: /*#__PURE__*/React.createElement(BottomIcon, null)
  })), /*#__PURE__*/React.createElement(Cell, {
    span: 3,
    style: cellStyle
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: function onClick() {
      return updateValue(_objectSpread(_objectSpread({}, value), {}, {
        left: !left
      }));
    },
    className: left && enabled,
    icon: /*#__PURE__*/React.createElement(LeftIcon, null)
  })))));
});
Selector.displayName = "Selector";
export default connect(function (state, _ref2) {
  var valueKey = _ref2.valueKey;
  return {
    value: _get(getActiveElement(state), valueKey, 0)
  };
}, null, null, {
  areStatePropsEqual: _isEqual
})(Selector);
//# sourceMappingURL=Selector.js.map