import 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!../../../assets/icons/format_align_center.svg";
import { ReactComponent as AlignLeftIcon } from "@svgr/webpack!../../../assets/icons/format_align_left.svg";
import { ReactComponent as AlignRightIcon } from "@svgr/webpack!../../../assets/icons/format_align_right.svg";
import { toolFormAttr } from "../../../utils";
var root = 'data.settings';
var alignments = [{
  label: /*#__PURE__*/React.createElement(AlignLeftIcon, null),
  value: 'flex-start'
}, {
  label: /*#__PURE__*/React.createElement(AlignCenterIcon, null),
  value: 'center'
}, {
  label: /*#__PURE__*/React.createElement(AlignRightIcon, null),
  value: 'flex-end'
}];
var FormContainer = /*#__PURE__*/styled("div", {
  target: "e4ndf3h0",
  label: "FormContainer"
})({
  padding: 5,
  svg: {
    width: 18
  }
});

var HorizontalAlignActionFlex = function HorizontalAlignActionFlex(props) {
  var element = props.element;
  var horizontalAlignFlex = get(element, "data.settings.horizontalAlignFlex") || "flex-start";
  var initialValues = {
    horizontalAlignFlex: horizontalAlignFlex
  };
  var onFormChange = useHandler(props, function (_ref) {
    var element = _ref.element,
        updateElement = _ref.updateElement;
    return function (obj) {
      updateElement({
        element: set(element, "".concat(root, ".horizontalAlignFlex"), obj['horizontalAlignFlex'])
      });
    };
  });
  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: "horizontalAlignFlex"
  }, /*#__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)(HorizontalAlignActionFlex);
//# sourceMappingURL=HorizontalAlignFlex.js.map