import _Range from "@alifd/next/es/range";
import _extends from "@babel/runtime/helpers/extends";
import _Collapse from "@alifd/next/es/collapse";
import _Select from "@alifd/next/es/select";
import * as React from 'react';
import { useState, useEffect } from 'react';
import Row from '../../components/row';
import Icon from '../../components/icon';
import Number from '../../components/number';
import ColorInput from '../../components/color-input';
import { intlLocal } from './locale';
import { addUnit, removeUnit, unifyStyle } from '../../utils';
import './index.less';
var Option = _Select.Option;
var Panel = _Collapse.Panel;
var borderConfig = intlLocal();
var BORDER_MAX = 30;
var BorderRadiusType = /*#__PURE__*/function (BorderRadiusType) {
  BorderRadiusType["fixedBorder"] = "fixedBorder";
  BorderRadiusType["partBorder"] = "partBorder";
  return BorderRadiusType;
}(BorderRadiusType || {});
var BorderDirectionMap = {
  borderLeft: 'borderLeft',
  borderRight: 'borderRight',
  borderTop: 'borderTop',
  borderBottom: 'borderBottom'
  // border:'border'
};
var borderRadiusMap = {
  borderRadius: 'borderRadius',
  borderTopLeftRadius: 'borderTopLeftRadius',
  borderTopRightRadius: 'borderTopRightRadius',
  borderBottomLeftRadius: 'borderBottomLeftRadius',
  borderBottomRightRadius: 'borderBottomRightRadius'
};
export default (function (props) {
  var _styleData$boxShadow, _styleData$boxShadow$;
  var styleData = props.styleData,
    onStyleChange = props.onStyleChange,
    unit = props.unit;
  var borderType = borderConfig.borderType,
    borderStyle = borderConfig.borderStyle,
    shadowType = borderConfig.shadowType;
  var _useState = useState(null),
    selBorderType = _useState[0],
    setSelBorderType = _useState[1];
  var _useState2 = useState(null),
    borderDirection = _useState2[0],
    setBorderDirection = _useState2[1];
  var _useState3 = useState(''),
    shadow = _useState3[0],
    setShadow = _useState3[1];
  useEffect(function () {
    if (!borderDirection) {
      for (var key in styleData) {
        for (var borderDirectionKey in BorderDirectionMap) {
          if (key.indexOf(borderDirectionKey) >= 0) {
            setBorderDirection(borderDirectionKey);
            break;
          }
          if (styleData['border']) {
            setBorderDirection('border');
            break;
          }
        }
      }
    }

    // 判断圆角类型
    if (styleData[borderRadiusMap.borderRadius]) {
      setSelBorderType(BorderRadiusType.fixedBorder);
    } else if (styleData[borderRadiusMap.borderBottomLeftRadius] || styleData[borderRadiusMap.borderBottomRightRadius] || styleData[borderRadiusMap.borderTopLeftRadius] || styleData[borderRadiusMap.borderTopRightRadius]) {
      setSelBorderType(BorderRadiusType.partBorder);
    }
    // 初始绑定样式
    if (styleData['boxShadow']) {
      var _unifyStyle;
      var bgSizeArray = (_unifyStyle = unifyStyle(styleData['boxShadow'])) === null || _unifyStyle === void 0 ? void 0 : _unifyStyle.split(' ');
      if ((bgSizeArray === null || bgSizeArray === void 0 ? void 0 : bgSizeArray[0]) === 'inset') {
        setShadow('insetShadow');
      } else {
        setShadow('outerShadow');
      }
    } else {
      setShadow('');
    }
  }, [styleData]);
  var onChangeBorderType = function onChangeBorderType(styleDataList) {
    if (styleDataList) {
      var styleKey = styleDataList[0].value;
      setSelBorderType(styleKey);
    }
  };
  var onRangeChange = function onRangeChange(styleKey, value, unit) {
    // 需要清除partBorder的圆角设置，不然会冲突，容易遗漏

    onStyleChange([{
      styleKey: styleKey,
      value: unit ? addUnit(value, unit) : value
    }, {
      styleKey: borderRadiusMap.borderBottomLeftRadius,
      value: null
    }, {
      styleKey: borderRadiusMap.borderBottomRightRadius,
      value: null
    }, {
      styleKey: borderRadiusMap.borderTopLeftRadius,
      value: null
    }, {
      styleKey: borderRadiusMap.borderTopRightRadius,
      value: null
    }]);
  };
  var onIconClick = function onIconClick(styleKey) {
    setBorderDirection(styleKey);
  };
  var onPartBorderRadiusChange = function onPartBorderRadiusChange(styleKey, value, unit, styleData) {
    var styleDataList = [{
      styleKey: styleKey,
      value: unit ? addUnit(value, unit) : value
    }];
    if (styleData['borderRadius']) {
      styleDataList.push({
        styleKey: 'borderRadius',
        value: null
      });
    }
    onStyleChange(styleDataList);
  };
  var onBorderTypeChange = function onBorderTypeChange(styleKey, value) {
    onStyleChange([{
      styleKey: styleKey,
      value: value
    }]);
  };
  var onBoxShadowChange = function onBoxShadowChange(styleKey, value, index, unit, shadowPosition, isColor) {
    var _unifyStyle2;
    var bgSizeArray = styleData[styleKey] ? (_unifyStyle2 = unifyStyle(styleData[styleKey])) === null || _unifyStyle2 === void 0 ? void 0 : _unifyStyle2.split(' ') : ['0', '0', '0', '0', '#000'];
    if (shadowPosition === 'outerShadow') {
      if ((bgSizeArray === null || bgSizeArray === void 0 ? void 0 : bgSizeArray[0]) === 'inset') {
        bgSizeArray.shift();
      }
    } else if (shadowPosition === 'insetShadow') {
      if ((bgSizeArray === null || bgSizeArray === void 0 ? void 0 : bgSizeArray[0]) !== 'inset') {
        bgSizeArray === null || bgSizeArray === void 0 ? void 0 : bgSizeArray.unshift('inset');
      }
    }
    if ((bgSizeArray === null || bgSizeArray === void 0 ? void 0 : bgSizeArray[0]) === 'inset') {
      setShadow('insetShadow');
    } else {
      setShadow('outerShadow');
    }
    var unifiedValue = value;
    if (!value && isColor) {
      unifiedValue = '#000';
    }
    if (unifiedValue === null || unifiedValue === undefined || !bgSizeArray) return;
    unifiedValue = unit ? addUnit(unifiedValue, unit) : String(unifiedValue);
    if (index !== undefined && index !== null) {
      bgSizeArray[index] = unifiedValue;
    }
    var curValue = '';
    bgSizeArray.forEach(function (item) {
      curValue = curValue + item + ' ';
    });
    curValue = curValue.substring(0, curValue.length - 1);
    var styleDataList = [{
      styleKey: styleKey,
      value: curValue
    }];
    onStyleChange(styleDataList);
  };
  //insetShadow会在第一位插入inset字符串，使所有阴影样式的序号+1
  var insetBoxShadowShift = shadow === 'insetShadow' ? 1 : 0;
  return /*#__PURE__*/React.createElement(_Collapse, {
    defaultExpandedKeys: ['0']
  }, /*#__PURE__*/React.createElement(Panel, {
    title: borderConfig.title,
    className: "border-style-container"
  }, /*#__PURE__*/React.createElement(Row, _extends({
    title: borderType.title,
    dataList: borderType.dataList,
    styleKey: 'borderType'
  }, props, {
    onStyleChange: onChangeBorderType,
    value: selBorderType
  })), selBorderType == 'fixedBorder' && /*#__PURE__*/React.createElement(Row, _extends({
    title: ' ',
    styleKey: "borderRadius"
  }, props), /*#__PURE__*/React.createElement("div", {
    className: "radius-container"
  }, /*#__PURE__*/React.createElement(_Range, {
    max: BORDER_MAX,
    value: removeUnit(styleData.borderRadius),
    onChange: function onChange(val) {
      return onRangeChange('borderRadius', val, unit);
    }
  }), /*#__PURE__*/React.createElement(Number, _extends({
    styleKey: "borderRadius",
    style: {
      minWidth: '80px',
      marginLeft: '5px'
    }
  }, props, {
    max: BORDER_MAX
  })))), selBorderType == 'partBorder' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, _extends({
    title: ' ',
    styleKey: "borderRadius"
  }, props, {
    contentStyle: {
      justifyContent: 'space-between'
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "row-item"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "icon-radius-upleft",
    className: "radius-icon"
  }), /*#__PURE__*/React.createElement(Number, _extends({
    max: BORDER_MAX,
    min: 0,
    styleKey: borderRadiusMap.borderTopLeftRadius
  }, props, {
    style: {
      width: '68px'
    },
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onPartBorderRadiusChange(styleKey, val, unit, styleData);
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: "row-item"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "icon-radius-upright",
    className: "radius-icon"
  }), /*#__PURE__*/React.createElement(Number, _extends({
    max: BORDER_MAX,
    styleKey: borderRadiusMap.borderTopRightRadius
  }, props, {
    style: {
      width: '68px'
    },
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onPartBorderRadiusChange(styleKey, val, unit, styleData);
    }
  })))), /*#__PURE__*/React.createElement(Row, _extends({
    title: ' ',
    styleKey: "borderRadius"
  }, props, {
    contentStyle: {
      justifyContent: 'space-between'
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "row-item"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "icon-radius-bottomleft",
    className: "radius-icon"
  }), /*#__PURE__*/React.createElement(Number, _extends({
    max: BORDER_MAX,
    styleKey: borderRadiusMap.borderBottomLeftRadius
  }, props, {
    style: {
      width: '68px'
    },
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onPartBorderRadiusChange(styleKey, val, unit, styleData);
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: "row-item"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "icon-radius-bottomright",
    className: "radius-icon"
  }), /*#__PURE__*/React.createElement(Number, _extends({
    max: BORDER_MAX,
    styleKey: borderRadiusMap.borderBottomRightRadius
  }, props, {
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onPartBorderRadiusChange(styleKey, val, unit, styleData);
    },
    style: {
      width: '68px'
    }
  }))))), /*#__PURE__*/React.createElement(Row, _extends({
    title: borderConfig.title,
    styleKey: "border"
  }, props), /*#__PURE__*/React.createElement("div", {
    className: "border-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "border-icon-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "top-icon-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: borderDirection === BorderDirectionMap.borderTop ? 'sel-icon icon-container' : 'icon-container',
    onClick: function onClick() {
      return onIconClick('borderTop');
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "icon--shangbiankuang"
  }))), /*#__PURE__*/React.createElement("div", {
    className: "center-icon-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: borderDirection === BorderDirectionMap.borderLeft ? 'sel-icon icon-container' : 'icon-container',
    onClick: function onClick() {
      return onIconClick('borderLeft');
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "icon--zuobiankuang"
  })), /*#__PURE__*/React.createElement("div", {
    className: borderDirection === 'border' ? 'sel-icon icon-container' : 'icon-container',
    onClick: function onClick() {
      return onIconClick('border');
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "icon--quanbubiankuang"
  })), /*#__PURE__*/React.createElement("div", {
    className: borderDirection === BorderDirectionMap.borderRight ? 'sel-icon icon-container' : 'icon-container',
    onClick: function onClick() {
      return onIconClick('borderRight');
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "icon--youbiankuang"
  }))), /*#__PURE__*/React.createElement("div", {
    className: "bottom-icon-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: borderDirection === BorderDirectionMap.borderBottom ? 'sel-icon icon-container' : 'icon-container',
    onClick: function onClick() {
      return onIconClick('borderBottom');
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "icon--xiabiankuang"
  })))), /*#__PURE__*/React.createElement("div", {
    className: "border-right-container"
  }, borderDirection && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Number, _extends({
    min: 0,
    max: 30,
    className: "border-width",
    styleKey: borderDirection + 'Width'
  }, props)), /*#__PURE__*/React.createElement(ColorInput, _extends({
    styleKey: borderDirection + 'Color'
  }, props)), /*#__PURE__*/React.createElement(_Select, {
    hasClear: true,
    style: {
      marginTop: '10px'
    },
    value: styleData[borderDirection + 'Style'],
    onChange: function onChange(value) {
      onBorderTypeChange(borderDirection + 'Style', value);
    }
  }, /*#__PURE__*/React.createElement(Option, {
    value: "solid"
  }, "solid"), /*#__PURE__*/React.createElement(Option, {
    value: "dashed"
  }, "dashed"), /*#__PURE__*/React.createElement(Option, {
    value: "dotted"
  }, "dotted")))))), /*#__PURE__*/React.createElement(Row, _extends({
    title: shadowType.title,
    dataList: shadowType.dataList,
    styleKey: 'shadowType'
  }, props, {
    onStyleChange: function onStyleChange(type) {
      onBoxShadowChange('boxShadow', type === null || type === void 0 ? void 0 : type[0].value, undefined, undefined, type === null || type === void 0 ? void 0 : type[0].value);
    },
    value: shadow
  })), /*#__PURE__*/React.createElement("div", {
    className: "shadow-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "shadow-color-container"
  }, /*#__PURE__*/React.createElement("span", {
    className: "shadow-color-title"
  }, borderConfig.shadowColor), /*#__PURE__*/React.createElement(ColorInput, _extends({}, props, {
    color: (_styleData$boxShadow = styleData['boxShadow']) === null || _styleData$boxShadow === void 0 ? void 0 : (_styleData$boxShadow$ = _styleData$boxShadow.split(' ')) === null || _styleData$boxShadow$ === void 0 ? void 0 : _styleData$boxShadow$[insetBoxShadowShift + 4],
    onStyleChange: function onStyleChange(color) {
      onBoxShadowChange('boxShadow', color === null || color === void 0 ? void 0 : color[0].value, insetBoxShadowShift + 4, undefined, undefined, true);
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: "shadow-size-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "shadow-size-x"
  }, /*#__PURE__*/React.createElement("span", {
    className: "shadow-size-x-title"
  }, "x"), /*#__PURE__*/React.createElement(Number, _extends({
    style: {
      marginRight: '4px'
    },
    styleKey: "boxShadow"
  }, props, {
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onBoxShadowChange(styleKey, val, insetBoxShadowShift + 0, unit);
    },
    multiProp: insetBoxShadowShift + 0,
    defaultPlaceholder: '0'
  }))), /*#__PURE__*/React.createElement("div", {
    className: "shadow-size-y"
  }, /*#__PURE__*/React.createElement("span", {
    className: "shadow-size-y-title"
  }, "y"), /*#__PURE__*/React.createElement(Number, _extends({
    styleKey: "boxShadow"
  }, props, {
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onBoxShadowChange(styleKey, val, insetBoxShadowShift + 1, unit);
    },
    multiProp: insetBoxShadowShift + 1,
    defaultPlaceholder: '0'
  })))), /*#__PURE__*/React.createElement("div", {
    className: "shadow-config-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "shadow-blur-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "shadow-blur-container-title"
  }, borderConfig.blur), /*#__PURE__*/React.createElement(Number, _extends({
    style: {
      marginRight: '4px'
    },
    min: 2,
    styleKey: "boxShadow"
  }, props, {
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onBoxShadowChange(styleKey, val, insetBoxShadowShift + 2, unit);
    },
    multiProp: insetBoxShadowShift + 2,
    defaultPlaceholder: '0'
  }))), /*#__PURE__*/React.createElement("div", {
    className: "shadow-extend-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "shadow-extend-container-title"
  }, borderConfig.spread), /*#__PURE__*/React.createElement(Number, _extends({
    styleKey: "boxShadow",
    min: 3
  }, props, {
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onBoxShadowChange(styleKey, val, insetBoxShadowShift + 3, unit);
    },
    multiProp: insetBoxShadowShift + 3,
    defaultPlaceholder: '0'
  })))))));
});