import * as React from "react";
import { useHandler } from "../../../../hooks/useHandler";
import { connect } from "../../../redux";
import { set, get } from "dot-prop-immutable";
import { i18n } from '@fishx/i18n';
import styled from "styled-components";
import { getActiveElementWithChildren } from "../../../selectors";
import { SimpleForm as Form, Radio } from '@whalecloud/fdx';
import { ReactComponent as AlignCenterIcon } from "@svgr/webpack!./icons/round-border_horizontal-24px.svg";
import { ReactComponent as AlignTopIcon } from "@svgr/webpack!./icons/round-border_top-24px.svg";
import { ReactComponent as AlignBottomIcon } from "@svgr/webpack!./icons/round-border_bottom-24px.svg";
import { toolFormAttr } from "../../../utils";
var FormContainer = /*#__PURE__*/styled("div", {
  target: "e1rdnud30",
  label: "FormContainer"
})({
  padding: 5,
  svg: {
    width: 18
  }
});
var root = 'data.settings';
var alignments = [{
  label: /*#__PURE__*/React.createElement(AlignTopIcon, null),
  value: 'start'
}, {
  label: /*#__PURE__*/React.createElement(AlignCenterIcon, null),
  value: 'center'
}, {
  label: /*#__PURE__*/React.createElement(AlignBottomIcon, null),
  value: 'end'
}];

var VerticalAlignAction = function VerticalAlignAction(props) {
  var element = props.element;
  var align = get(element, "data.settings.verticalAlign") || "start";
  var initialValues = {
    verticalAlign: align
  };
  var onFormChange = useHandler(props, function (_ref) {
    var element = _ref.element,
        updateElement = _ref.updateElement;
    return function (obj) {
      updateElement({
        element: set(element, "".concat(root, ".verticalAlign"), obj['verticalAlign'])
      });
    };
  });
  return /*#__PURE__*/React.createElement(FormContainer, null, /*#__PURE__*/React.createElement(Form, Object.assign({}, toolFormAttr, {
    initialValues: initialValues,
    onValuesChange: onFormChange
  }), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_HORIZONTAL_ALIGN'),
    name: "verticalAlign"
  }, /*#__PURE__*/React.createElement(Radio.Group, {
    size: "small"
  }, alignments.map(function (align) {
    return /*#__PURE__*/React.createElement(Radio.Button, {
      key: "horizontalAlign_".concat(align.value),
      value: align.value
    }, align.label);
  })))));
};

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

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