import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _cloneDeep from "lodash/cloneDeep";
import React, { useState, useEffect } from "react";
import { i18n } from '@fishx/i18n';
import { connect } from "../../../../../redux";
import styled from "styled-components";
import { set } from "dot-prop-immutable";
import { Typography } from "@webiny/ui/Typography";
import { Collapse, Button, SimpleForm as Form, Select, Radio, Row, Col, InputNumber, Input } from '@whalecloud/fdx';
import { toolFormAttr, toolCollapseAttr, createStyleSettingCode, isGroupInput, imgUrlToPath, matchCodePrefix } from "../../../../../utils";
import { ReactComponent as AlignLeftIcon } from "@svgr/webpack!../../../../../assets/icons/align-left.svg";
import { ReactComponent as AlignRightIcon } from "@svgr/webpack!../../../../../assets/icons/align-right.svg";
import { ReactComponent as AlignCenterIcon } from "@svgr/webpack!../../../../../assets/icons/align-center.svg";
import { getActiveElementWithChildren } from "../../../../../selectors";
import ColorPicker from "../../../components/ColorPicker";
import { getAssetSrc } from "../../../../../../utils/common";
import { getContent } from "../../../../../selectors";
import { buildCSSToString } from "../../../../../utils";
import BackgroundImg from "../BackgroundImg";
import LinkButton from "../LinkButton";
import "../../index.module.less";
var Panel = Collapse.Panel;
var Option = Select.Option;
var FormContainer = /*#__PURE__*/styled("div", {
  target: "ebzd49o0",
  label: "FormContainer"
})({
  padding: 5
});

var random = function random(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
};

var gridWidth = [];
new Array(24).fill(1).map(function (v, index) {
  var num = index + 1;
  gridWidth.push({
    value: num,
    name: "".concat(num === 24 ? 'full' : num, " col")
  });
});
var shadowValue = {
  0: {
    x: 4,
    y: 4,
    blur: 15,
    spread: 0,
    shadowColor: '#d2d7de'
  },
  1: {
    x: 2,
    y: 2,
    blur: 10,
    spread: 0,
    shadowColor: '#d2d7de'
  },
  2: {
    x: 1,
    y: 1,
    blur: 4,
    spread: 0,
    shadowColor: '#d2d7de'
  },
  3: 'none',
  4: {
    x: 0,
    y: 0,
    blur: 0,
    spread: 0,
    shadowColor: '#d2d7de'
  },
  5: {
    x: 0,
    y: 0,
    blur: 0,
    spread: 0,
    shadowColor: '#d2d7de'
  }
};
var noGridColumnType = ['text', 'button'];
var rowColumnType = ['row', 'column'];
var propertyArr = ['font-size', 'line-height', 'width', 'height', 'text-align', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'];
var colorArr = ['color', 'background-color', 'border-color'];

var SettingStyle = function SettingStyle(props) {
  var updateElement = props.updateElement,
      element = props.element,
      _props$updateCustomSt = props.updateCustomStyle,
      updateCustomStyle = _props$updateCustomSt === void 0 ? function () {} : _props$updateCustomSt,
      _props$updateTemporar = props.updateTemporaryStyle,
      updateTemporaryStyle = _props$updateTemporar === void 0 ? function () {} : _props$updateTemporar,
      themeStyle = props.themeStyle,
      updateThemeClass = props.updateThemeClass,
      updateCSSCode = props.updateCSSCode,
      _props$updateElementS = props.updateElementStyle,
      updateElementStyle = _props$updateElementS === void 0 ? function () {} : _props$updateElementS,
      mode = props.mode,
      _props$currentClass = props.currentClass,
      currentClass = _props$currentClass === void 0 ? '' : _props$currentClass,
      _props$pageCurrentCla = props.pageCurrentClass,
      pageCurrentClass = _props$pageCurrentCla === void 0 ? '' : _props$pageCurrentCla,
      dataSource = props.dataSource,
      customStyle = props.customStyle,
      pageStyle = props.pageStyle,
      temporaryStyle = props.temporaryStyle,
      _props$tempClass = props.tempClass,
      tempClass = _props$tempClass === void 0 ? '' : _props$tempClass,
      previewDevice = props.previewDevice,
      contentElement = props.contentElement,
      updatePageStyle = props.updatePageStyle;
  var rootState = dataSource.rootState,
      cssDefaultCodeRoot = dataSource.cssDefaultCodeRoot,
      cssDefaultCodeRootHover = dataSource.cssDefaultCodeRootHover,
      cssDefaultCodeRootFocus = dataSource.cssDefaultCodeRootFocus,
      cssDefaultCodeRootActive = dataSource.cssDefaultCodeRootActive,
      setCSSDefaultCodeRoot = dataSource.setCSSDefaultCodeRoot,
      setCSSDefaultCodeRootHover = dataSource.setCSSDefaultCodeRootHover,
      setCSSDefaultCodeRootFocus = dataSource.setCSSDefaultCodeRootFocus,
      setCSSDefaultCodeRootActive = dataSource.setCSSDefaultCodeRootActive;
  var primaryColor = themeStyle.primaryColor,
      primaryDarkColor = themeStyle.primaryDarkColor;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      fontWeight = _useState2[0],
      setFontWeight = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      italic = _useState4[0],
      setItalic = _useState4[1];

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      textDecoration = _useState6[0],
      setTextDecoration = _useState6[1];

  var _useState7 = useState(''),
      _useState8 = _slicedToArray(_useState7, 2),
      temporaryClassName = _useState8[0],
      setTemporaryClassName = _useState8[1];

  var _Form$useForm = Form.useForm(),
      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
      form = _Form$useForm2[0];

  var _Form$useForm3 = Form.useForm(),
      _Form$useForm4 = _slicedToArray(_Form$useForm3, 1),
      formShadow = _Form$useForm4[0];

  var _useState9 = useState({}),
      _useState10 = _slicedToArray(_useState9, 2),
      initialValues = _useState10[0],
      setInitialValues = _useState10[1];

  var _useState11 = useState(true),
      _useState12 = _slicedToArray(_useState11, 2),
      marginLinkState = _useState12[0],
      setMarginLinkState = _useState12[1];

  var _useState13 = useState(true),
      _useState14 = _slicedToArray(_useState13, 2),
      paddingLinkState = _useState14[0],
      setPaddingLinkState = _useState14[1];

  var _useState15 = useState(false),
      _useState16 = _slicedToArray(_useState15, 2),
      borderLinkState = _useState16[0],
      setBorderLinkState = _useState16[1];

  var _useState17 = useState(false),
      _useState18 = _slicedToArray(_useState17, 2),
      cornerLinkState = _useState18[0],
      setCornerLinkState = _useState18[1];

  var _useState19 = useState('#fff'),
      _useState20 = _slicedToArray(_useState19, 2),
      borderColor = _useState20[0],
      setBorderColor = _useState20[1];

  var _useState21 = useState('#fff'),
      _useState22 = _slicedToArray(_useState21, 2),
      backgroundColor = _useState22[0],
      setBackgroundColor = _useState22[1];

  var _useState23 = useState('#fff'),
      _useState24 = _slicedToArray(_useState23, 2),
      color = _useState24[0],
      setColor = _useState24[1];

  var _useState25 = useState(shadowValue[4].shadowColor),
      _useState26 = _slicedToArray(_useState25, 2),
      shadowColor = _useState26[0],
      setShadowColor = _useState26[1];

  var _useState27 = useState(true),
      _useState28 = _slicedToArray(_useState27, 2),
      shadowColorState = _useState28[0],
      setShadowColorState = _useState28[1];

  var _useState29 = useState(''),
      _useState30 = _slicedToArray(_useState29, 2),
      eleWidth = _useState30[0],
      setEleWidth = _useState30[1];

  var _useState31 = useState(24),
      _useState32 = _slicedToArray(_useState31, 2),
      eleWidthColumn = _useState32[0],
      setEleWidthColumn = _useState32[1];

  var _useState33 = useState(''),
      _useState34 = _slicedToArray(_useState33, 2),
      bgImg = _useState34[0],
      setBgImg = _useState34[1];

  var _useState35 = useState(0),
      _useState36 = _slicedToArray(_useState35, 2),
      numberX = _useState36[0],
      setNumberX = _useState36[1];

  var _useState37 = useState(0),
      _useState38 = _slicedToArray(_useState37, 2),
      numberY = _useState38[0],
      setNumberY = _useState38[1];

  var _useState39 = useState(0),
      _useState40 = _slicedToArray(_useState39, 2),
      numberBlur = _useState40[0],
      setNumberBlur = _useState40[1];

  var _useState41 = useState(0),
      _useState42 = _slicedToArray(_useState41, 2),
      numberSpread = _useState42[0],
      setNumberSpread = _useState42[1];

  var marginPaddingValue = {
    'margin-top': 0,
    'margin-right': 0,
    'margin-bottom': 0,
    'margin-left': 0,
    'padding-top': 0,
    'padding-right': 0,
    'padding-bottom': 0,
    'padding-left': 0,
    'border-top-width': 0,
    'border-right-width': 0,
    'border-bottom-width': 0,
    'border-left-width': 0,
    'border-top-left-radius': 0,
    'border-top-right-radius': 0,
    'border-bottom-left-radius': 0,
    'border-bottom-right-radius': 0
  };

  var elementCSSValue = _objectSpread({
    'box-shadow': '3',
    width: '100%',
    height: 100,
    'font-size': 14,
    'text-align': 'left'
  }, marginPaddingValue);

  var styleSheetDefaultValue = _objectSpread({
    'box-shadow': '3',
    width: '100%',
    'font-size': 14,
    'text-align': 'left'
  }, marginPaddingValue);

  useEffect(function () {
    setTemporaryClassName("_css_".concat(element.id));
    elementStyleToSetting();
    return function () {
      form.resetFields();
      formShadow.resetFields();
    };
  }, []); // state change(default/hover/focus/active), useEffect变化, element变化，

  useEffect(function () {
    handleDefaultValue();
  }, [rootState, currentClass, tempClass]);
  useEffect(function () {
    if (currentClass) {
      elementStyleToSetting();
    }
  }, [currentClass, customStyle]);
  useEffect(function () {
    if (pageCurrentClass) {
      elementStyleToSetting();
    }
  }, [pageCurrentClass, pageStyle]);
  useEffect(function () {
    handleDefaultValue(true);
  }, [previewDevice]);
  useEffect(function () {
    if (currentClass && mode === 'styleSheet') {
      handleDefaultValue();
    }
  }, [cssDefaultCodeRoot]); // 临时样式赋值
  // 从modal里临时更新数据，设置时存到modal，值会自动变化

  useEffect(function () {
    if (tempClass) {
      elementStyleToSetting();
    }
  }, [tempClass, temporaryStyle]); // modal样式变化时更新到document

  useEffect(function () {
    var buldCSSCode = buildCSSToString(customStyle, temporaryStyle, pageStyle);
    var newElement = set(contentElement, 'css', buldCSSCode);
    updateElement({
      element: newElement
    });
  }, [temporaryStyle, customStyle, pageStyle]);

  var handleShadowChildren = function handleShadowChildren(flag) {
    var childrenValue = {};
    var arr = ['0', '1', '2', '3', '4', '5'];

    if (flag['box-shadow'] === '3') {
      childrenValue = shadowValue[4];
    } else if (!arr.includes(flag['box-shadow'])) {
      childrenValue = flag['box-shadow'];
    } else {
      childrenValue = shadowValue[flag['box-shadow']];
    }

    return childrenValue;
  }; // 获取组件margin, padding, border, corner值, 赋值给setting


  var elementStyleToSetting = function elementStyleToSetting() {
    // default value
    if (mode === 'element' && !tempClass) {
      getElementStyle();
    } else {
      handleDefaultValue();
    }
  };

  var getElementStyle = function getElementStyle() {
    var elementDomWrap = document.getElementById(element.id);
    if (!elementDomWrap) return;
    var elementDom;

    if (element.type === 'text') {
      elementDom = elementDomWrap.firstChild.lastChild.lastChild;
    } else if (element.type === 'button') {
      elementDom = elementDomWrap.firstChild.lastChild.lastChild;
    } else {
      elementDom = elementDomWrap.firstChild.lastChild;
    }

    var style = window.getComputedStyle(elementDom, null);

    var handleFlexValue = function handleFlexValue(flag) {
      if (flag === 'start') {
        return 'left';
      } else if (flag === 'end') {
        return 'end';
      } else {
        return flag;
      }
    };

    var getInitialValues = {
      'font-size': parseInt(style.fontSize, 10),
      width: '100%',
      height: parseInt(style.height, 10),
      'text-align': handleFlexValue(style.textAlign),
      color: style.color,
      'border-color': style.borderColor,
      'background-color': style.backgroundColor,
      'line-height': parseInt(style.lineHeight, 10) > 1 ? parseInt(style.lineHeight, 10) / parseInt(style.fontSize, 10) : parseInt(style.lineHeight, 10),
      'margin-top': parseInt(style.marginTop, 10),
      'margin-right': parseInt(style.marginRight, 10),
      'margin-bottom': parseInt(style.marginBottom, 10),
      'margin-left': parseInt(style.marginLeft, 10),
      'padding-top': parseInt(style.paddingTop, 10),
      'padding-right': parseInt(style.paddingRight, 10),
      'padding-bottom': parseInt(style.paddingBottom, 10),
      'padding-left': parseInt(style.paddingLeft, 10),
      'border-top-width': parseInt(style.borderTopWidth, 10),
      'border-right-width': parseInt(style.borderRightWidth, 10),
      'border-bottom-width': parseInt(style.borderBottomWidth, 10),
      'border-left-width': parseInt(style.borderLeftWidth, 10),
      'border-top-left-radius': parseInt(style.borderTopLeftRadius, 10),
      'border-top-right-radius': parseInt(style.borderTopRightRadius, 10),
      'border-bottom-left-radius': parseInt(style.borderBottomLeftRadius, 10),
      'border-bottom-right-radius': parseInt(style.borderBottomRightRadius, 10)
    }; // color

    setBorderColor(style.borderColor);
    setBackgroundColor(style.backgroundColor);
    setColor(style.color); // bg img

    setBgImg(imgUrlToPath(style.backgroundImage)); // font

    if (style.fontWeight === 'bold' || style.fontWeight > 500) setFontWeight(true);
    if (style.fontStyle === 'italic') setItalic(true);
    if (style.textDecoration === 'underline') setTextDecoration(true); // shadow

    var shadow = style.boxShadow ? handleShadow(style.boxShadow) : {};
    var childValue = handleShadowChildren(shadow);
    getInitialValues = _objectSpread(_objectSpread({}, getInitialValues), {
      'box-shadow': typeof shadow['box-shadow'] !== 'string' ? '5' : shadow['box-shadow']
    });
    setShadowColorState(true);
    setInitialValues(getInitialValues);
    elementCSSValue = _cloneDeep(_objectSpread(_objectSpread({}, getInitialValues), childValue));
    setShadowValue(childValue);
  };

  var handleShadow = function handleShadow(flag) {
    var shadow = {};
    Object.values(shadowValue).map(function (v, index) {
      var condition = "".concat(v.x, "px ").concat(v.y, "px ").concat(v.blur, "px ").concat(v.spread, "px ").concat(v.shadowColor) === flag;

      if (index !== 3 && condition && index !== 5 && JSON.stringify(shadow) === '{}') {
        shadow = {
          'box-shadow': index === 4 && !shadowColorState ? '5' : index.toString()
        };
        return;
      }

      if (index === 3 && flag === 'none' && JSON.stringify(shadow) === '{}') {
        shadow = {
          'box-shadow': '3'
        };
        return;
      }

      if (index === 5 && flag !== 'none' && flag && JSON.stringify(shadow) === '{}') {
        if (typeof flag !== 'object') {
          var rgba = flag ? "rgba".concat(_cloneDeep(flag).match(/\((.+)\)/g)) : null;
          var xybsValue = flag ? flag.replace('rgba', '').replace(/\([^\)]*\)/g, '').trim().split(' ') : [];
          shadow = {
            'box-shadow': {
              x: parseInt(xybsValue[0], 10),
              y: parseInt(xybsValue[1]),
              blur: parseInt(xybsValue[2], 10),
              spread: parseInt(xybsValue[3], 10),
              shadowColor: flag.includes('rgba') ? rgba : xybsValue[4]
            }
          };
        } else {
          shadow = {
            'box-shadow': flag
          };
        }

        return;
      }
    });
    return shadow;
  };

  var handleDefaultValue = function handleDefaultValue() {
    var flag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
    var valueObj = {};
    var valueData = {};
    var mapMode = {
      element: elementCSSValue,
      styleSheet: styleSheetDefaultValue
    };
    form.resetFields();
    formShadow.resetFields();

    var setValue = function setValue() {
      valueObj = {};
      propertyArr.map(function (vl) {
        if (valueData[vl]) {
          if (typeof valueData[vl] === 'string' && vl !== 'width' && vl !== 'text-align' && valueData[vl].includes('px') && !valueData[vl].includes('px !important')) {
            valueObj[vl] = parseInt(valueData[vl], 10);
          } else if (vl === 'width') {
            valueObj[vl] = '100%';
          } else {
            valueObj[vl] = valueData[vl];
          }
        }
      }); // box-shadow

      if (valueData['box-shadow']) {
        valueObj['box-shadow'] = typeof valueData['box-shadow'] !== 'string' ? '5' : valueData['box-shadow'];
      }

      if (valueObj['box-shadow'] === '5') {
        setShadowColorState(false);
      } else {
        setShadowColorState(true);
      }

      var getValue = _objectSpread(_objectSpread({}, mapMode[mode]), valueObj);

      form.setFieldsValue(_objectSpread({}, getValue));
    };

    var mapCSSDefaultCode = {
      0: cssDefaultCodeRoot,
      1: cssDefaultCodeRootHover,
      2: cssDefaultCodeRootFocus,
      3: cssDefaultCodeRootActive
    };

    if (flag) {
      mapCSSDefaultCode = {
        0: {},
        1: {},
        2: {},
        3: {}
      };
    }

    valueData = _objectSpread(_objectSpread({}, mapMode[mode]), mapCSSDefaultCode[rootState]); // 默认值

    var rootArr = Object.keys(valueData); // font

    if (rootArr.length > 0) {
      if (rootArr.includes('font-weight') && valueData['font-weight'] === 'bold') {
        setFontWeight(true);
      } else {
        setFontWeight(false);
      }

      if (rootArr.includes('font-style') && valueData['font-style'] === 'italic') {
        setItalic(true);
      } else {
        setItalic(false);
      }

      if (rootArr.includes('text-decoration') && valueData['text-decoration'] === 'underline') {
        setTextDecoration(true);
      } else {
        setTextDecoration(false);
      }
    } else {
      setFontWeight(false);
      setItalic(false);
      setTextDecoration(false);
    } // img


    setBgImg(imgUrlToPath(valueData['background-image'])); // color

    setBorderColor(valueData['border-color'] || borderColor);
    setBackgroundColor(valueData['background-color'] || backgroundColor);
    setColor(valueData['color'] || color);
    var childValue = {};
    var shadows = {}; // shadowcolor是否需要转KEY(值为数字或string)

    var isClude = Object.keys(shadowValue).includes(valueData['box-shadow']);

    if (isClude) {
      shadows['box-shadow'] = valueData['box-shadow'];
    } else {
      // 需要转为对象
      shadows = valueData['box-shadow'] ? handleShadow(valueData['box-shadow']) : {};
    }

    if (isClude) {
      var _shadowValue$valueDat = shadowValue[valueData['box-shadow']],
          x = _shadowValue$valueDat.x,
          y = _shadowValue$valueDat.y,
          blur = _shadowValue$valueDat.blur,
          spread = _shadowValue$valueDat.spread;
      childValue = {
        x: x,
        y: y,
        blur: blur,
        spread: spread
      };
    } else {
      childValue = handleShadowChildren(shadows);
    }

    setShadowValue(childValue);

    if (isClude) {
      valueData = _objectSpread(_objectSpread({}, valueData), shadows);
    } else {
      valueData = _objectSpread(_objectSpread({}, valueData), shadows);
    }

    setValue();
  }; // set shadow value


  var setShadowValue = function setShadowValue(record) {
    var _ref = record || {},
        _ref$x = _ref.x,
        x = _ref$x === void 0 ? 0 : _ref$x,
        _ref$y = _ref.y,
        y = _ref$y === void 0 ? 0 : _ref$y,
        _ref$blur = _ref.blur,
        blur = _ref$blur === void 0 ? 0 : _ref$blur,
        _ref$spread = _ref.spread,
        spread = _ref$spread === void 0 ? 0 : _ref$spread,
        _ref$shadowColor = _ref.shadowColor,
        shadowColor = _ref$shadowColor === void 0 ? '' : _ref$shadowColor;

    setNumberX(x);
    setNumberY(y);
    setNumberBlur(blur);
    setNumberSpread(spread);
    setShadowColor(shadowColor);
  }; // input setting


  var onInputChange = function onInputChange(obj) {
    var flag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
    var keyObj = {};
    var baseProperty = ['height', 'font-size'];
    Object.keys(obj).forEach(function (key) {
      if (baseProperty.includes(key)) {
        keyObj[key] = obj[key] ? "".concat(obj[key], "px") : '';

        if ((element.type === 'inputNumber' || element.type === 'spacer') && (key === 'width' || key === 'height')) {
          keyObj[key] = obj[key] ? "".concat(obj[key], "px !important") : '';
        }
      } else if (key === 'text-align' || key === 'line-height' || key === 'width') {
        keyObj = _defineProperty({}, key, (key === 'text-align' ? "".concat(obj[key], " !important") : obj[key]) || '');
      }

      if (flag) {
        keyObj[key] = element.type === 'text' ? "".concat(obj[key], "px !important") : "".concat(obj[key], "px");
      }
    });

    if (flag) {
      var newObj = obj;

      var handleStyleObj = function handleStyleObj(arr) {
        var otherObj = {};
        var otherObjUnit = {};
        var otherDefault = {};
        arr.map(function (v, index) {
          if (index !== 0) {
            var itemIndex = arr[index];
            otherObj[itemIndex] = obj[arr[0]];
            otherObjUnit[itemIndex] = element.type === 'text' ? "".concat(obj[arr[0]], "px !important") : "".concat(obj[arr[0]], "px");
          }
        });

        if (arr.includes('border-top-width') && element.type === 'text') {
          otherDefault['border-style'] = 'solid';
        }

        newObj = _objectSpread(_objectSpread(_objectSpread({}, newObj), otherObj), otherDefault);
        keyObj = _objectSpread(_objectSpread(_objectSpread({}, keyObj), otherObjUnit), otherDefault);
      };

      var marginArr = ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'];
      var paddingArr = ['padding-top', 'padding-right', 'padding-bottom', 'padding-left'];
      var borderArr = ['border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'];
      var cornerArr = ['border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'];

      if (!marginLinkState && marginArr.includes(Object.keys(obj)[0])) {
        handleStyleObj(marginArr);
      }

      if (!paddingLinkState && paddingArr.includes(Object.keys(obj)[0])) {
        handleStyleObj(paddingArr);
      }

      if (!borderLinkState && borderArr.includes(Object.keys(obj)[0])) {
        handleStyleObj(borderArr);
      }

      if (!cornerLinkState && cornerArr.includes(Object.keys(obj)[0])) {
        handleStyleObj(cornerArr);
      }

      form.setFieldsValue(_objectSpread({}, newObj));
    }

    handleSettingValue(keyObj);
  }; // color change


  var handleColorChange = function handleColorChange(obj) {
    var themeColors = [primaryColor, primaryDarkColor];
    Object.keys(obj).forEach(function (key) {
      if (themeColors.includes(obj[key])) {
        var selectThemeClass;

        if (primaryColor === obj[key]) {
          if (key === 'color') selectThemeClass = 'text-primary';
          if (key === 'background-color') selectThemeClass = 'bg-primary';
          if (key === 'border-color') selectThemeClass = 'border-primary';
        }

        if (primaryDarkColor === obj[key]) {
          if (key === 'color') selectThemeClass = 'text-primaryDark';
          if (key === 'background-color') selectThemeClass = 'bg-primaryDark';
          if (key === 'border-color') selectThemeClass = 'border-primaryDark';
        }

        updateThemeClass(selectThemeClass);
      }

      handleSettingValue(obj);
    });
  };

  var CreateInputNumber = function CreateInputNumber(props) {
    var className = props.className,
        name = props.name,
        restProps = _objectWithoutProperties(props, ["className", "name"]);

    return /*#__PURE__*/React.createElement("div", {
      className: className
    }, /*#__PURE__*/React.createElement(Form, Object.assign({}, toolFormAttr, {
      initialValues: initialValues,
      layout: "vertical",
      form: form
    }), /*#__PURE__*/React.createElement(Form.Item, {
      label: '',
      name: name
    }, /*#__PURE__*/React.createElement(InputNumber, Object.assign({}, restProps, {
      onChange: function onChange(value) {
        return onInputChange(_defineProperty({}, name, value), true);
      },
      className: "formbuild-style-inputNumberStyle",
      defaultValue: 0,
      style: {
        width: 40
      }
    })))));
  }; // setting value


  var handleSettingValue = function handleSettingValue() {
    var flag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    // 编译后的code
    var codeClass = currentClass ? ".".concat(currentClass) : ':root'; // const otherGroup = ['upload', 'popEdit', 'table', 'headerCell', 'treeSelect'];

    var eleType = isGroupInput(element.type) ? 'input' : '';

    if (!currentClass && !pageCurrentClass) {
      // 编译后的临时样式更新到element
      var temporaryCode = createStyleSettingCode(eleType, dataSource, flag, ".".concat(matchCodePrefix[previewDevice], " .").concat(temporaryClassName), temporaryClassName);
      updateElementStyle(temporaryCode, temporaryClassName);
      updateValueToModal(".".concat(matchCodePrefix[previewDevice], " .").concat(temporaryClassName, " ").concat(eleType), flag, temporaryStyle, updateTemporaryStyle);
    } else if (currentClass) {
      updateValueToModal(currentClass, flag, customStyle, updateCustomStyle);
    } else if (pageCurrentClass) {
      updateValueToModal(pageCurrentClass, flag, pageStyle, updatePageStyle);
    }
  }; // update modal


  var updateValueToModal = function updateValueToModal(className, flag, style, updateStyle) {
    var newFlag = style[className] || {};
    Object.keys(flag).map(function (vl) {
      if (flag[vl]) {
        newFlag = _objectSpread(_objectSpread({}, newFlag), flag);
      } else {
        delete newFlag[vl];
      }
    });
    updateStyle(_defineProperty({}, className, _objectSpread(_objectSpread({}, style[className]), newFlag)));
  }; // 以下是字体、斜体、下划线点击事件


  var styleClick = function styleClick(flag) {
    var valueObj = {};

    switch (flag) {
      case 'font-weight':
        setFontWeight(!fontWeight);
        valueObj = {
          'font-weight': !fontWeight ? 'bold' : ''
        };
        handleSettingValue(valueObj);
        break;

      case 'font-style':
        setItalic(!italic);
        valueObj = {
          'font-style': !italic ? 'italic' : ''
        };
        handleSettingValue(valueObj);
        break;

      case 'text-decoration':
        setTextDecoration(!textDecoration);
        valueObj = {
          'text-decoration': !textDecoration ? 'underline' : ''
        };
        handleSettingValue(valueObj);
        break;

      default:
        break;
    }
  }; // background img


  var onImageChange = function onImageChange(value) {
    handleSettingValue({
      'background-image': "url(".concat(getAssetSrc(value.path), ")"),
      'background-position': 'left top',
      'background-repeat': 'no-repeat',
      'background-size': '100% 100%'
    });
  }; // shadowcolortostring


  var shadowColorToString = function shadowColorToString(flag) {
    var x = flag.x,
        y = flag.y,
        blur = flag.blur,
        spread = flag.spread,
        shadowColor = flag.shadowColor;
    return "".concat(x, "px ").concat(y, "px ").concat(blur, "px ").concat(spread, "px ").concat(shadowColor);
  }; // shadow


  var shadowChange = function shadowChange(value) {
    // 编译CSS
    switch (value) {
      case '0':
      case '1':
      case '2':
      case '4':
        handleSettingValue({
          'box-shadow': shadowColorToString(shadowValue[value])
        });
        setShadowValue(shadowValue[value]);
        setShadowColorState(true);
        break;

      case '3':
        handleSettingValue({
          'box-shadow': 'none'
        });
        setShadowValue(shadowValue[4]);
        setShadowColorState(true);
        break;

      case '5':
        handleSettingValue({
          'box-shadow': shadowColorToString(shadowValue[value])
        });
        setShadowValue(shadowValue[value]);
        setShadowColorState(false);
        break;

      default:
        break;
    }
  };

  var selectEleWidth = function selectEleWidth(value) {
    setEleWidthColumn(value);
    var newElement = set(element, 'data.settings.cols.span', value);
    updateElement({
      element: newElement
    });
  };

  var FormInputGroup = function FormInputGroup(_ref2) {
    var name = _ref2.name,
        title = _ref2.title;
    return /*#__PURE__*/React.createElement(Form, Object.assign({}, toolFormAttr, {
      layout: "vertical",
      form: form,
      initialValues: initialValues,
      style: {
        paddingTop: 32
      }
    }), /*#__PURE__*/React.createElement(Form.Item, {
      label: '',
      name: name
    }, /*#__PURE__*/React.createElement(InputNumber, {
      style: {
        width: 60
      },
      onChange: function onChange(value) {
        return onInputChange(_defineProperty({}, name, value));
      }
    })), /*#__PURE__*/React.createElement("div", {
      className: "formbuild-style-formLabel"
    }, /*#__PURE__*/React.createElement(Typography, {
      use: "overline"
    }, title)));
  };

  var onShadowChange = function onShadowChange(value) {
    var newValue = _objectSpread(_objectSpread(_objectSpread({}, shadowValue[5]), {
      x: numberX,
      y: numberY,
      blur: numberBlur,
      spread: numberSpread,
      shadowColor: shadowColor || shadowValue[5].shadowColor
    }), value);

    handleSettingValue({
      'box-shadow': shadowColorToString(newValue)
    });
  }; // handleColor


  var handleStyleColor = function handleStyleColor(value) {
    setColor(value);
    handleColorChange({
      color: value
    });
  };

  var handleBackgroundColor = function handleBackgroundColor(value) {
    setBackgroundColor(value);
    handleColorChange({
      'background-color': value
    });
  };

  var handleBorderColor = function handleBorderColor(value) {
    setBorderColor(value);
    handleColorChange({
      'border-color': value
    });
  };

  var handleShadowColor = function handleShadowColor(value) {
    setShadowColor(value);
    onShadowChange({
      shadowColor: value
    });
  };

  return /*#__PURE__*/React.createElement(FormContainer, null, /*#__PURE__*/React.createElement(Collapse, Object.assign({}, toolCollapseAttr, {
    defaultActiveKey: ['1', '2', '3', '4'],
    className: "formbuild-style-collapse"
  }), /*#__PURE__*/React.createElement(Panel, {
    header: i18n('PAGEBUIDER_SETTINGS_STYLE_FONT'),
    key: "1"
  }, /*#__PURE__*/React.createElement(Row, {
    style: {
      overflow: 'visible'
    }
  }, /*#__PURE__*/React.createElement(Col, {
    span: "6"
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE')), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-btnGroupStyle"
  }, /*#__PURE__*/React.createElement(Button, {
    className: fontWeight ? "active" : '',
    onClick: function onClick() {
      return styleClick('font-weight');
    }
  }, "B"), /*#__PURE__*/React.createElement(Button, {
    className: italic ? "active" : '',
    style: {
      fontStyle: 'italic'
    },
    onClick: function onClick() {
      return styleClick('font-style');
    }
  }, "I"), /*#__PURE__*/React.createElement(Button, {
    className: "formbuild-style-textDecoration ".concat(textDecoration ? "active" : ''),
    onClick: function onClick() {
      return styleClick('text-decoration');
    }
  }, "U"))), /*#__PURE__*/React.createElement(Col, {
    span: "6"
  }, /*#__PURE__*/React.createElement(FormInputGroup, {
    name: 'font-size',
    title: "".concat(i18n('PAGEBUIDER_SETTINGS_STYLE_FONTSIZE'), "(px)")
  })), /*#__PURE__*/React.createElement(Col, {
    span: "6",
    className: "formbuild-style-colorPickerWrap"
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_COLOR')), /*#__PURE__*/React.createElement(ColorPicker, {
    value: color,
    valueChange: function valueChange(value) {
      return handleStyleColor(value);
    },
    updateValue: function updateValue(value) {
      return handleStyleColor(value);
    }
  })), element.type === 'text' && /*#__PURE__*/React.createElement(Col, {
    span: "6"
  }, /*#__PURE__*/React.createElement(FormInputGroup, {
    name: 'line-height',
    title: i18n('PAGEBUIDER_SETTINGS_STYLE_LINEHEIGHT')
  })))), /*#__PURE__*/React.createElement(Panel, {
    header: i18n('PAGEBUIDER_SETTINGS_STYLE_LAYOUT'),
    key: "2"
  }, /*#__PURE__*/React.createElement(Row, {
    style: {
      overflow: 'visible'
    }
  }, !noGridColumnType.includes(element.type) ? /*#__PURE__*/React.createElement(Col, {
    span: "6",
    style: {
      paddingTop: 0,
      paddingRight: 2
    }
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_WIDTH')), /*#__PURE__*/React.createElement(Select, {
    value: eleWidthColumn,
    onChange: selectEleWidth,
    style: {
      width: 60
    }
  }, gridWidth.map(function (v) {
    return /*#__PURE__*/React.createElement(Option, {
      key: v.value,
      value: v.value
    }, v.name);
  }))) : /*#__PURE__*/React.createElement(Col, {
    span: "6"
  }, /*#__PURE__*/React.createElement(Form, Object.assign({}, toolFormAttr, {
    layout: "vertical",
    wrapperCol: {
      span: 24
    },
    form: form,
    initialValues: initialValues,
    style: {
      paddingTop: 32
    }
  }), /*#__PURE__*/React.createElement(Form.Item, {
    label: '',
    name: "width"
  }, /*#__PURE__*/React.createElement(Input, {
    style: {
      width: 60
    },
    value: "100%",
    onChange: function onChange(e) {
      return onInputChange({
        width: e.target.value
      });
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-formLabel"
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, "".concat(i18n('PAGEBUIDER_SETTINGS_STYLE_WIDTH'), "(px)"))))), /*#__PURE__*/React.createElement(Col, {
    span: "6"
  }, /*#__PURE__*/React.createElement(FormInputGroup, {
    name: 'height',
    title: "".concat(i18n('PAGEBUIDER_SETTINGS_STYLE_HEIGHT'), "(px)")
  })), /*#__PURE__*/React.createElement(Col, {
    span: "6"
  }, /*#__PURE__*/React.createElement(Form, Object.assign({}, toolFormAttr, {
    layout: "vertical",
    wrapperCol: {
      span: 24
    },
    form: form,
    initialValues: initialValues,
    style: {
      paddingTop: 32
    }
  }), /*#__PURE__*/React.createElement(Form.Item, {
    label: "",
    name: "text-align"
  }, /*#__PURE__*/React.createElement(Radio.Group, {
    size: "small",
    className: "formbuild-style-radioGroupStyle",
    onChange: function onChange(e) {
      return onInputChange({
        'text-align': e.target.value
      });
    }
  }, /*#__PURE__*/React.createElement(Radio.Button, {
    value: "left"
  }, /*#__PURE__*/React.createElement(AlignLeftIcon, {
    className: "formbuild-style-alignIcon"
  })), /*#__PURE__*/React.createElement(Radio.Button, {
    value: "center"
  }, /*#__PURE__*/React.createElement(AlignCenterIcon, {
    className: "formbuild-style-alignIcon"
  })), /*#__PURE__*/React.createElement(Radio.Button, {
    value: "right"
  }, /*#__PURE__*/React.createElement(AlignRightIcon, {
    className: "formbuild-style-alignIcon"
  })))), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-formLabel"
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_TEXTALIGN'))))), /*#__PURE__*/React.createElement(Col, {
    span: "6"
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_BACKGROUND')), /*#__PURE__*/React.createElement(ColorPicker, {
    value: backgroundColor,
    valueChange: function valueChange(value) {
      return handleBackgroundColor(value);
    },
    updateValue: function updateValue(value) {
      return handleBackgroundColor(value);
    }
  })), rowColumnType.includes(element.type) && /*#__PURE__*/React.createElement(Col, {
    span: "24"
  }, /*#__PURE__*/React.createElement(BackgroundImg, {
    defaultValue: bgImg,
    dependentVar: temporaryClassName,
    onChange: onImageChange
  }))), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-cssBoxWrap"
  }, /*#__PURE__*/React.createElement("span", null, i18n('PAGEBUIDER_SETTINGS_STYLE_MARGIN'), "(px)", /*#__PURE__*/React.createElement(LinkButton, {
    defaultValue: true,
    onChange: function onChange(value) {
      return setMarginLinkState(value);
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-marginTopBox"
  }, /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleLeft"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-rectangleTop"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleRight"
  })), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-marginRightBox"
  }, /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleTop"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-rectangleRight"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleBottom"
  })), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-marginBottomBox"
  }, /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleLeft"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-rectangleBottom"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleRight"
  })), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-marginLeftBox"
  }, /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleTop"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-rectangleLeft"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleBottom"
  })), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-innerBox"
  }, /*#__PURE__*/React.createElement("span", null, i18n('PAGEBUIDER_SETTINGS_STYLE_PADDING'), "(px)", /*#__PURE__*/React.createElement(LinkButton, {
    defaultValue: true,
    onChange: function onChange(value) {
      return setPaddingLinkState(value);
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-marginTopBox"
  }, /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleLeft"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-rectangleTop"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleRight"
  })), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-marginRightBox"
  }, /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleTop"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-rectangleRight"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleBottom"
  })), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-marginBottomBox"
  }, /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleLeft"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-rectangleBottom"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleRight"
  })), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-marginLeftBox"
  }, /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleTop"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-rectangleLeft"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-triangleBottom"
  }))), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-inputMarginTop",
    name: "margin-top"
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-inputMarginBottom",
    name: "margin-bottom",
    disabled: !marginLinkState
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-inputMarginLeft",
    name: "margin-left",
    disabled: !marginLinkState
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-inputMarginRight",
    name: "margin-right",
    disabled: !marginLinkState
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-inputPaddingTop",
    name: "padding-top"
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-inputPaddingBottom",
    name: "padding-bottom",
    disabled: !paddingLinkState
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-inputPaddingLeft",
    name: "padding-left",
    disabled: !paddingLinkState
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-inputPaddingRight",
    name: "padding-right",
    disabled: !paddingLinkState
  }))), /*#__PURE__*/React.createElement(Panel, {
    header: i18n('PAGEBUIDER_SETTINGS_STYLE_BORDER'),
    key: "3"
  }, /*#__PURE__*/React.createElement(Row, {
    style: {
      overflow: 'visible'
    }
  }, /*#__PURE__*/React.createElement(Col, {
    span: "12"
  }, /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-cssLineBoxWrap"
  }, /*#__PURE__*/React.createElement("span", null, i18n('PAGEBUIDER_SETTINGS_STYLE_LINES'), "(px)", /*#__PURE__*/React.createElement(LinkButton, {
    defaultValue: false,
    onChange: function onChange(value) {
      return setBorderLinkState(value);
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-cssLineBox"
  }, /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-lineTop"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-lineRight"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-lineBottom"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-lineLeft"
  }), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-borderColorWrap"
  }, /*#__PURE__*/React.createElement(ColorPicker, {
    value: borderColor,
    valueChange: function valueChange(value) {
      return handleBorderColor(value);
    },
    updateValue: function updateValue(value) {
      return handleBorderColor(value);
    }
  })), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-borderTop",
    name: "border-top-width"
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-borderRight",
    name: "border-right-width",
    disabled: !borderLinkState
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-borderBottom",
    name: "border-bottom-width",
    disabled: !borderLinkState
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-borderLeft",
    name: "border-left-width",
    disabled: !borderLinkState
  })))), /*#__PURE__*/React.createElement(Col, {
    span: "12"
  }, /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-cssCornerBoxWrap"
  }, /*#__PURE__*/React.createElement("span", null, i18n('PAGEBUIDER_SETTINGS_STYLE_RADIUS'), "(px)", /*#__PURE__*/React.createElement(LinkButton, {
    defaultValue: false,
    onChange: function onChange(value) {
      return setCornerLinkState(value);
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-cssCornerBox"
  }, /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-cornerRightTop"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-cornerRightBottom"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-cornerLeftTop"
  }), /*#__PURE__*/React.createElement("span", {
    className: "formbuild-style-cornerLeftBottom"
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-cornerTop",
    name: "border-top-left-radius"
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-cornerRight",
    name: "border-top-right-radius",
    disabled: !cornerLinkState
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-cornerBottom",
    name: "border-bottom-right-radius",
    disabled: !cornerLinkState
  }), /*#__PURE__*/React.createElement(CreateInputNumber, {
    className: "formbuild-style-cornerLeft",
    name: "border-bottom-left-radius",
    disabled: !cornerLinkState
  })))))), /*#__PURE__*/React.createElement(Panel, {
    header: i18n('PAGEBUIDER_SETTINGS_STYLE_BOXSHADOW'),
    key: "4",
    style: {
      height: 240
    }
  }, /*#__PURE__*/React.createElement(Row, {
    style: {
      height: 28
    }
  }, /*#__PURE__*/React.createElement(Col, {
    span: "4"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_SIZE'), "\uFF1A"), /*#__PURE__*/React.createElement(Col, {
    span: "16"
  }, /*#__PURE__*/React.createElement(Form, Object.assign({}, toolFormAttr, {
    layout: "vertical",
    wrapperCol: {
      span: 24
    },
    form: form,
    initialValues: initialValues
  }), /*#__PURE__*/React.createElement(Form.Item, {
    label: '',
    name: "box-shadow"
  }, /*#__PURE__*/React.createElement(Select, {
    style: {
      width: 100
    },
    onChange: shadowChange
  }, /*#__PURE__*/React.createElement(Option, {
    value: "0"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_SIZE_LG')), /*#__PURE__*/React.createElement(Option, {
    value: "1"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_SIZE_MD')), /*#__PURE__*/React.createElement(Option, {
    value: "2"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_SIZE_SM')), /*#__PURE__*/React.createElement(Option, {
    value: "3"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_SIZE_NONE')), /*#__PURE__*/React.createElement(Option, {
    value: "4"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_SIZE_DEFAULT')), /*#__PURE__*/React.createElement(Option, {
    value: "5"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_SIZE_CUSTOM'))))))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
    span: 6,
    style: {
      paddingTop: 32
    }
  }, /*#__PURE__*/React.createElement(InputNumber, {
    disabled: shadowColorState,
    value: numberX,
    onChange: function onChange(value) {
      setNumberX(value);
      onShadowChange({
        x: value
      });
    },
    style: {
      width: 60
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-formLabel"
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_SIZE_HORIZONTAL'), "(px)"))), /*#__PURE__*/React.createElement(Col, {
    span: 6,
    style: {
      paddingTop: 32
    }
  }, /*#__PURE__*/React.createElement(InputNumber, {
    disabled: shadowColorState,
    value: numberY,
    onChange: function onChange(value) {
      setNumberY(value);
      onShadowChange({
        y: value
      });
    },
    style: {
      width: 60
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-formLabel"
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_SIZE_VERTICAL'), "(px)"))), /*#__PURE__*/React.createElement(Col, {
    span: 6,
    style: {
      paddingTop: 32
    }
  }, /*#__PURE__*/React.createElement(InputNumber, {
    disabled: shadowColorState,
    value: numberBlur,
    onChange: function onChange(value) {
      setNumberBlur(value);
      onShadowChange({
        blur: value
      });
    },
    style: {
      width: 60
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-formLabel"
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_SIZE_BLUR'), "(px)"))), /*#__PURE__*/React.createElement(Col, {
    span: 6,
    style: {
      paddingTop: 32
    }
  }, /*#__PURE__*/React.createElement(InputNumber, {
    disabled: shadowColorState,
    value: numberSpread,
    onChange: function onChange(value) {
      setNumberSpread(value);
      onShadowChange({
        spread: value
      });
    },
    style: {
      width: 60
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "formbuild-style-formLabel"
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_SIZE_SHADOW'), "(px)")))), /*#__PURE__*/React.createElement(Col, {
    span: "6",
    className: "formbuild-style-colorPickerBox"
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, i18n('PAGEBUIDER_SETTINGS_STYLE_SIZE_COLOR')), /*#__PURE__*/React.createElement(ColorPicker, {
    disabled: shadowColorState,
    value: shadowColor,
    valueChange: function valueChange(value) {
      return handleShadowColor(value);
    },
    updateValue: function updateValue(value) {
      return handleShadowColor(value);
    }
  })))));
};

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

export default connect(function (state) {
  return {
    element: getActiveElementWithChildren(state),
    themeStyle: state.style.themeStyle,
    customStyle: state.style.customStyle,
    temporaryStyle: state.style.temporaryStyle,
    pageStyle: state.style.pageStyle,
    previewDevice: state.ui.previewDevice,
    contentElement: getContent(state)
  };
}, mapDispatchToProps)(SettingStyle);
//# sourceMappingURL=index.js.map