import _NumberPicker from "@alifd/next/es/number-picker";
import _Range from "@alifd/next/es/range";
import _Input from "@alifd/next/es/input";
import _extends from "@babel/runtime/helpers/extends";
import _Collapse from "@alifd/next/es/collapse";
import React, { 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 { addUnit, isCssVarBind, isEmptyValue, unifyStyle } from '../../utils';
import { intlLocal } from './locale';
import './index.less';
import { backgroundSizeMap } from './constant';
var backgroundConfig = intlLocal();
var Panel = _Collapse.Panel;
export default (function (props) {
  var onStyleChange = props.onStyleChange,
    styleData = props.styleData;
  var backgroundType = backgroundConfig.backgroundType,
    backgroundSize = backgroundConfig.backgroundSize,
    backgroundPosition = backgroundConfig.backgroundPosition,
    backgroundRepeat = backgroundConfig.backgroundRepeat;
  var _useState = useState(null),
    bgType = _useState[0],
    setBgType = _useState[1];
  var _useState2 = useState(null),
    bgSizeType = _useState2[0],
    setBgSizeType = _useState2[1];
  var _useState3 = useState(null),
    bgRepeatType = _useState3[0],
    setBgRepeatType = _useState3[1];
  var _useState4 = useState(''),
    bgPositionType = _useState4[0],
    setBgPositionType = _useState4[1];
  // 背景类型切换
  var onBgTypeChange = function onBgTypeChange(styleDataList) {
    if (styleDataList) {
      setBgType(styleDataList[0].value);
    }
  };
  // 背景图片切换
  var onBgImageChange = function onBgImageChange(value) {
    onStyleChange([{
      styleKey: 'backgroundImage',
      value: formatBgImgUrl(value)
    }]);
  };
  // backgroundSize类型切换
  var onBgSizeTypeChange = function onBgSizeTypeChange(styleDataList) {
    var backgroundSize = 'backgroundSize';
    onStyleChange([{
      styleKey: backgroundSize,
      value: null
    }]);
    if (styleDataList) {
      var _styleDataList$;
      var value = (_styleDataList$ = styleDataList[0]) === null || _styleDataList$ === void 0 ? void 0 : _styleDataList$.value;
      setBgSizeType(value);
      if (value != backgroundSizeMap["default"]) {
        onStyleChange([{
          styleKey: backgroundSize,
          value: value
        }]);
      }
    }
  };
  // backgroundSize值切换
  var onBgSizeChange = function onBgSizeChange(styleKey, value, unit, styleData, direction) {
    var _unifyStyle;
    var bgSizeArray = styleData[styleKey] ? (_unifyStyle = unifyStyle(styleData[styleKey])) === null || _unifyStyle === void 0 ? void 0 : _unifyStyle.split(' ') : ['auto', 'auto'];
    var _bgSizeArray$ = bgSizeArray[0],
      width = _bgSizeArray$ === void 0 ? 'auto' : _bgSizeArray$,
      _bgSizeArray$2 = bgSizeArray[1],
      height = _bgSizeArray$2 === void 0 ? 'auto' : _bgSizeArray$2;
    var styleDataList;
    if (styleData) {
      var unifiedValue = unit ? addUnit(value, unit) : value;
      if (unifiedValue === null || unifiedValue === undefined) unifiedValue = 'auto'; // 空样式默认为auto
      if (direction === 'width') {
        styleDataList = [{
          styleKey: styleKey,
          value: unifiedValue !== 'auto' || height !== 'auto' ? unifiedValue + " " + height : null // 都为auto则删除样式
        }];
      } else {
        styleDataList = [{
          styleKey: styleKey,
          value: unifiedValue !== 'auto' || width !== 'auto' ? width + " " + unifiedValue : null
        }];
      }
      onStyleChange(styleDataList);
    }
  };
  // backgroundRepeat切换
  var onBgRepeatChange = function onBgRepeatChange(styleDataList) {
    if (styleDataList) {
      var _styleDataList$2;
      var value = (_styleDataList$2 = styleDataList[0]) === null || _styleDataList$2 === void 0 ? void 0 : _styleDataList$2.value;
      setBgRepeatType(value);
      onStyleChange([{
        styleKey: 'backgroundRepeat',
        value: value
      }]);
    }
  };

  // backgroundPosition切换
  var onBgPositionChange = function onBgPositionChange(styleKey, value, unit, styleData, direction) {
    var bgSizeArray = styleData[styleKey] ? unifyStyle(styleData[styleKey]).split(' ') : ['auto', 'auto'];
    var _bgSizeArray$3 = bgSizeArray[0],
      width = _bgSizeArray$3 === void 0 ? 'auto' : _bgSizeArray$3,
      _bgSizeArray$4 = bgSizeArray[1],
      height = _bgSizeArray$4 === void 0 ? 'auto' : _bgSizeArray$4;
    var styleDataList;
    if (styleData) {
      var unifiedValue = /^-?[0-9]\d*$/.test(value) ? value + unit : value; // 正则匹配非0数字并加单位
      if (unifiedValue === null || unifiedValue === undefined || unifiedValue.replace(/\s*/g, '') === '' // 空格和空字符串也为空值
      ) {
        unifiedValue = 'auto';
      }
      if (direction === 'horizontal') {
        styleDataList = [{
          styleKey: styleKey,
          value: unifiedValue !== 'auto' || height !== 'auto' ? unifiedValue + " " + height : null
        }];
      } else {
        styleDataList = [{
          styleKey: styleKey,
          value: unifiedValue !== 'auto' || width !== 'auto' ? width + " " + unifiedValue : null
        }];
      }
      onStyleChange(styleDataList);
    }
  };
  // 透明度切换
  var onOpacityChange = function onOpacityChange(styleKey, value, unit) {
    onStyleChange([{
      styleKey: styleKey,
      value: unit ? addUnit(value, unit) : value
    }]);
  };
  var initData = function initData() {
    if (styleData.backgroundColor) {
      setBgType('color');
    } else if (styleData.backgroundImage) {
      setBgType('bgImg');
    } else {
      setBgType(null);
    }
    setBgRepeatType(styleData.backgroundRepeat);
    var bgSizeType = styleData.backgroundSize === backgroundSizeMap.contain || styleData.backgroundSize === backgroundSizeMap.cover ? styleData.backgroundSize : backgroundSizeMap["default"];
    setBgSizeType(bgSizeType);
    var chosenItem = backgroundPosition.dataList.find(function (item) {
      return item.position === styleData.backgroundPosition;
    });
    setBgPositionType(chosenItem === null || chosenItem === void 0 ? void 0 : chosenItem.title);
  };
  useEffect(function () {
    initData();
  }, [styleData]);
  var formatBgImgUrl = function formatBgImgUrl(url) {
    if (url && url != '') {
      return "url(" + url + ")";
    } else {
      return null;
    }
  };
  var backToBgImgUrl = function backToBgImgUrl(styleUrl) {
    if (styleUrl) {
      // const reg = /^url\(.*\)/;
      // var result = styleUrl.match(reg);
      var newUrl = styleUrl.substring(styleUrl.indexOf('(') + 1, styleUrl.indexOf(')'));
      return newUrl;
      // return styleUrl.substring(
      //   styleUrl.indexOf("(") + 1,
      //   styleUrl.indexOf(")") - 1
      // );
    } else {
      return '';
    }
  };
  return /*#__PURE__*/React.createElement(_Collapse, {
    defaultExpandedKeys: ['0']
  }, /*#__PURE__*/React.createElement(Panel, {
    title: backgroundConfig.title,
    className: "font-style-container"
  }, /*#__PURE__*/React.createElement(Row, _extends({
    title: backgroundType.title,
    dataList: backgroundType.dataList,
    styleKey: ""
  }, props, {
    onStyleChange: onBgTypeChange,
    value: bgType
  })), bgType == 'color' && /*#__PURE__*/React.createElement(Row, _extends({
    title: ' ',
    styleKey: ""
  }, props), /*#__PURE__*/React.createElement(ColorInput, _extends({
    styleKey: 'backgroundColor'
  }, props, {
    inputWidth: "100%"
  }))), bgType == 'bgImg' && /*#__PURE__*/React.createElement(Row, _extends({
    title: ' ',
    styleKey: ""
  }, props), /*#__PURE__*/React.createElement(_Input, {
    innerBefore: /*#__PURE__*/React.createElement(Icon, {
      type: "icon-suffix-url",
      style: {
        margin: 4
      }
    }),
    placeholder: backgroundConfig.inputPlaceholder,
    style: {
      width: '100%'
    },
    value: backToBgImgUrl(styleData.backgroundImage),
    onChange: onBgImageChange
  })), bgType == 'bgImg' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Row, _extends({
    title: backgroundSize.title,
    dataList: backgroundSize.dataList
  }, props, {
    onStyleChange: onBgSizeTypeChange,
    value: bgSizeType
  })), bgSizeType == backgroundSizeMap["default"] && /*#__PURE__*/React.createElement("div", {
    className: "inner-row-contaienr-bgsize"
  }, /*#__PURE__*/React.createElement("div", {
    className: "row-item"
  }, /*#__PURE__*/React.createElement("span", {
    className: "row-item-title"
  }, backgroundConfig.width), /*#__PURE__*/React.createElement(Number, _extends({
    style: {
      marginRight: '4px'
    },
    min: 0,
    styleKey: "backgroundSize"
  }, props, {
    unit: ['px', '%'],
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onBgSizeChange(styleKey, val, unit, styleData, 'width');
    },
    multiProp: 0,
    defaultPlaceholder: 'auto'
  }))), /*#__PURE__*/React.createElement("div", {
    className: "row-item"
  }, /*#__PURE__*/React.createElement("span", {
    className: "row-item-title"
  }, backgroundConfig.height), /*#__PURE__*/React.createElement(Number, _extends({
    styleKey: "backgroundSize",
    min: 0
  }, props, {
    unit: ['px', '%'],
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onBgSizeChange(styleKey, val, unit, styleData, 'height');
    },
    multiProp: 1,
    defaultPlaceholder: 'auto'
  })))), /*#__PURE__*/React.createElement(Row, _extends({
    title: backgroundPosition.title,
    styleKey: "border"
  }, props), /*#__PURE__*/React.createElement("div", {
    className: "background-position-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "background-position-container-left"
  }, backgroundPosition.dataList.map(function (item) {
    return /*#__PURE__*/React.createElement("div", {
      className: bgPositionType === item.title ? 'sel-icon' : '',
      onClick: function onClick() {
        setBgPositionType(item.title);
        onStyleChange([{
          styleKey: 'backgroundPosition',
          value: item.position
        }]);
      }
    }, /*#__PURE__*/React.createElement(Icon, {
      className: "background-position-icon",
      type: item.icon
    }));
  })), /*#__PURE__*/React.createElement("div", {
    className: "background-position-container-right"
  }, /*#__PURE__*/React.createElement("div", {
    className: "background-position-left"
  }, /*#__PURE__*/React.createElement("span", null, backgroundConfig.left), /*#__PURE__*/React.createElement(Number, _extends({
    style: {
      marginLeft: '10px'
    },
    styleKey: "backgroundPosition"
  }, props, {
    unit: ['px', '%'],
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onBgPositionChange(styleKey, val, unit, styleData, 'horizontal');
    },
    multiProp: 0,
    defaultPlaceholder: 'auto'
  }))), /*#__PURE__*/React.createElement("div", {
    className: "background-position-top"
  }, /*#__PURE__*/React.createElement("span", null, backgroundConfig.top), /*#__PURE__*/React.createElement(Number, _extends({
    style: {
      marginLeft: '10px'
    },
    min: -10,
    styleKey: "backgroundPosition"
  }, props, {
    unit: ['px', '%'],
    onChangeFunction: function onChangeFunction(styleKey, val, unit) {
      return onBgPositionChange(styleKey, val, unit, styleData, 'verticle');
    },
    multiProp: 1,
    defaultPlaceholder: 'auto'
  })))))), /*#__PURE__*/React.createElement(Row, _extends({
    title: backgroundRepeat.title,
    dataList: backgroundRepeat.dataList,
    styleKey: ""
  }, props, {
    onStyleChange: onBgRepeatChange,
    value: bgRepeatType
  }))), /*#__PURE__*/React.createElement(Row, _extends({
    title: backgroundConfig.opacity,
    styleKey: "opacity"
  }, props), /*#__PURE__*/React.createElement("div", {
    className: "opacity-container"
  }, /*#__PURE__*/React.createElement(_Range, {
    disabled: isCssVarBind(styleData.opacity),
    style: {
      marginLeft: '10px',
      marginRight: '10px',
      width: '104px'
    },
    value: !isEmptyValue(styleData.opacity) ? styleData.opacity * 100 : 0,
    onChange: function onChange(val) {
      return onOpacityChange('opacity', parseInt(val) / 100);
    }
  }), /*#__PURE__*/React.createElement(_NumberPicker, {
    value: !isEmptyValue(styleData.opacity) && !isCssVarBind(styleData.opacity) ? Math.floor(styleData.opacity * 100) : undefined,
    disabled: isCssVarBind(styleData.opacity),
    max: 100,
    min: 0,
    onChange: function onChange(val) {
      return onOpacityChange('opacity', isEmptyValue(val) ? null : val / 100);
    },
    innerAfter: '%'
  })))));
});