import _extends from "@babel/runtime/helpers/extends";
import RadioGroup from "../../components/radio-group";
import * as React from "react";
import { intlLocal } from "./locale";
import StyleItemSetter from "../../components/style-item-setter";
import { useMemo } from "react";
var layoutConfig = intlLocal();
export default function LayoutDisplaySetter(props) {
  var display = layoutConfig.display,
    flexDirection = layoutConfig.flexDirection,
    justifyContent = layoutConfig.justifyContent,
    alignItems = layoutConfig.alignItems,
    flexWrap = layoutConfig.flexWrap;
  var showSub = useMemo(function () {
    return props.styleData["display"] == "flex";
  }, [props.styleData]);
  var subItem = /*#__PURE__*/React.createElement("div", {
    className: "style-item-sub"
  }, /*#__PURE__*/React.createElement(StyleItemSetter, {
    label: "主轴方向",
    dataInput: /*#__PURE__*/React.createElement(RadioGroup, _extends({
      styleKey: 'flexDirection',
      dataList: flexDirection.dataList
    }, props))
  }), /*#__PURE__*/React.createElement(StyleItemSetter, {
    label: "主轴对齐",
    dataInput: /*#__PURE__*/React.createElement(RadioGroup, _extends({
      styleKey: 'justifyContent',
      dataList: justifyContent.dataList
    }, props))
  }), /*#__PURE__*/React.createElement(StyleItemSetter, {
    label: "辅轴对齐",
    dataInput: /*#__PURE__*/React.createElement(RadioGroup, _extends({
      styleKey: 'alignItems',
      dataList: alignItems.dataList
    }, props))
  }), /*#__PURE__*/React.createElement(StyleItemSetter, {
    label: "换行",
    dataInput: /*#__PURE__*/React.createElement(RadioGroup, _extends({
      styleKey: 'flexWrap',
      dataList: flexWrap.dataList
    }, props))
  }));
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "style-item"
  }, /*#__PURE__*/React.createElement(RadioGroup, _extends({
    styleKey: 'display',
    dataList: display.dataList
  }, props))), showSub && subItem);
}