import _NumberPicker from "@alifd/next/es/number-picker";
import _Select from "@alifd/next/es/select";
import * as React from 'react';
import { useEffect, useState, useMemo } from 'react';
import { addUnit, removeUnit, isEmptyValue, getPlaceholderPropertyValue, unifyStyle, getUnit, isCssVarBind } from '../../utils';
import './index.less';
export default (function (props) {
  var styleData = props.styleData,
    styleKey = props.styleKey,
    unit = props.unit,
    onStyleChange = props.onStyleChange,
    min = props.min,
    max = props.max,
    _props$style = props.style,
    style = _props$style === void 0 ? {} : _props$style,
    _props$className = props.className,
    className = _props$className === void 0 ? '' : _props$className,
    placeholderScale = props.placeholderScale,
    onChangeFunction = props.onChangeFunction,
    multiProp = props.multiProp,
    defaultPlaceholder = props.defaultPlaceholder;
  var _useState = useState(defaultPlaceholder),
    placeholder = _useState[0],
    setPlaceholder = _useState[1];
  var onNumberChange = function onNumberChange(styleKey, value, unit) {
    onStyleChange === null || onStyleChange === void 0 ? void 0 : onStyleChange([{
      styleKey: styleKey,
      value: unit ? addUnit(value, unit) : String(value)
    }]);
  };
  var initData = function initData(props) {
    var field = props.field,
      styleKey = props.styleKey,
      useComputedStyle = props.useComputedStyle;
    if (useComputedStyle) {
      var _placeholder = getPlaceholderPropertyValue(field, styleKey);
      // @ts-ignore
      if (_placeholder && !isNaN(_placeholder)) {
        // @ts-ignore
        setPlaceholder(_placeholder * (1 / placeholderScale));
      } else {
        setPlaceholder('auto');
      }
    }
  };
  useEffect(function () {
    initData(props);
  }, []);
  var value = unit ? removeUnit(styleData[styleKey]) : styleData[styleKey];
  var curUnit = unit ? getUnit(styleData[styleKey]) || 'px' : '';
  // 不加multiprop一样，加了单独处理
  if (typeof multiProp === 'number') {
    var _unifyStyle, _unifyStyle$split;
    value = (_unifyStyle = unifyStyle(styleData[styleKey])) === null || _unifyStyle === void 0 ? void 0 : (_unifyStyle$split = _unifyStyle.split(' ')) === null || _unifyStyle$split === void 0 ? void 0 : _unifyStyle$split[multiProp];
    if (value === null || value === undefined || value === 'auto') {
      value = null;
      curUnit = 'px';
    } else {
      curUnit = unit ? getUnit(value) || 'px' : '';
      value = unit ? removeUnit(value) : value;
    }
  }
  if (isNaN(value)) {
    value = 0;
  }
  var getInnerAfter = useMemo(function () {
    if (typeof unit === 'string') {
      return unit;
    }
    if (!unit) {
      return '';
    }
    var options = unit === null || unit === void 0 ? void 0 : unit.map(function (item) {
      return {
        value: item,
        label: item
      };
    });
    return /*#__PURE__*/React.createElement(_Select, {
      defaultValue: "px",
      style: {
        width: '24px'
      },
      value: curUnit || 'px',
      autoWidth: false,
      hasBorder: false,
      hasArrow: false,
      onChange: function onChange(val) {
        return onChangeFunction ? onChangeFunction(styleKey, value, val) : onNumberChange(styleKey, value, val);
      },
      dataSource: options
    });
  }, [unit]);
  var originValue = styleData[styleKey];
  if (isCssVarBind(originValue)) {
    return /*#__PURE__*/React.createElement("div", {
      className: "ext-css-variable-ghost",
      title: originValue
    }, originValue);
  }
  return /*#__PURE__*/React.createElement(_NumberPicker, {
    style: style,
    className: "style-number-setter" + className,
    value: value,
    min: isEmptyValue(min) ? Number.MIN_SAFE_INTEGER : min,
    max: isEmptyValue(max) ? Number.MAX_SAFE_INTEGER : max,
    onChange: function onChange(val) {
      return onChangeFunction ? onChangeFunction(styleKey, val, curUnit) : onNumberChange(styleKey, val, curUnit);
    },
    innerAfter: getInnerAfter,
    placeholder: placeholder
  });
});