var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

var _a;

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import classNames from 'classnames';
import { InputNumber } from "../input";
import Select from "../select";
import { LinkButton, IconButton } from "../button";
import Popconfirm from "../popconfirm";
import CreateFilter from "./CreateFilter";
import "./style/number-filter.css";
import { map, size, isNumber } from 'lodash';
import { useMemoizedFn, useSetState, useCreation } from 'ahooks';
import { BaseContext, LocaleEnum } from "./..";
import en from "./languages/en-US";
import zh from "./languages/zh-CN";
var prefixCls = 'dmc-number-filter';
var useCallback = React.useCallback;
var localeMap = (_a = {}, _a[LocaleEnum.en] = en.numberFilterLocale, _a[LocaleEnum.zh] = zh.numberFilterLocale, _a);
export var NumberFilterTypeSet;

(function (NumberFilterTypeSet) {
  NumberFilterTypeSet["interval"] = "interval";
  NumberFilterTypeSet["segment"] = "segment";
})(NumberFilterTypeSet || (NumberFilterTypeSet = {}));

var NumberItem = /*#__PURE__*/React.memo(function (_a) {
  var defaultValue = _a.defaultValue,
      statistic = _a.statistic,
      onChange = _a.onChange,
      label = _a.label,
      placeholder = _a.placeholder;
  return _jsxs("div", __assign({
    className: prefixCls + "-item"
  }, {
    children: [_jsxs("div", __assign({
      className: prefixCls + "-label"
    }, {
      children: [label, ' ', _jsxs("span", __assign({
        title: "" + (statistic || ''),
        className: prefixCls + "-statistic"
      }, {
        children: ["(", statistic, ")"]
      }), void 0)]
    }), void 0), _jsx(InputNumber, {
      type: "menu-bg",
      size: "compact",
      onChange: onChange,
      placeholder: placeholder,
      visibilityHandler: true,
      defaultValue: defaultValue,
      className: prefixCls + "-input"
    }, void 0)]
  }), void 0);
});

var Content = function Content(props) {
  var _a = React.useContext(BaseContext).locale,
      locale = _a === void 0 ? LocaleEnum.zh : _a;
  var type = props.type,
      placeholder = props.placeholder,
      labelMin = props.labelMin,
      statisticMin = props.statisticMin,
      min = props.min,
      labelMax = props.labelMax,
      statisticMax = props.statisticMax,
      max = props.max,
      changeMax = props.changeMax,
      changeMin = props.changeMin,
      segmentation = props.segmentation,
      pushSegmentation = props.pushSegmentation,
      deleteSegmentation = props.deleteSegmentation;
  var newRef = React.useRef({
    max: '',
    min: ''
  });
  var ref = React.useRef(null);

  var _b = React.useState(type),
      _type = _b[0],
      setType = _b[1];

  var _confirm = function _confirm() {
    var _a = newRef.current,
        min = _a.min,
        max = _a.max;

    if (isNumber(Number(min)) && isNumber(Number(max))) {
      pushSegmentation === null || pushSegmentation === void 0 ? void 0 : pushSegmentation({
        min: Number(min),
        max: Number(max)
      });
    }
  };

  var options = useCreation(function () {
    return [{
      kay: localeMap[locale].intervalScreening,
      label: localeMap[locale].intervalScreening,
      value: localeMap[locale].intervalScreening
    }, {
      kay: localeMap[locale].segmentScreening,
      label: localeMap[locale].segmentScreening,
      value: localeMap[locale].segmentScreening
    }];
  }, []);
  return _jsxs("div", __assign({
    ref: ref
  }, {
    children: [_type && _jsxs("div", __assign({
      style: {
        display: 'flex',
        marginBottom: 8
      }
    }, {
      children: [_jsx(Select, {
        className: prefixCls + "-select",
        size: "mini",
        type: "menu-bg",
        value: _type === NumberFilterTypeSet.segment ? localeMap[locale].segmentScreening : localeMap[locale].intervalScreening,
        options: options,
        getPopupContainer: function getPopupContainer() {
          return ref.current;
        },
        onChange: function onChange(value) {
          var _value = NumberFilterTypeSet.interval;

          if (value === localeMap[locale].segmentScreening) {
            _value = NumberFilterTypeSet.segment;
          }

          setType(_value);
        }
      }, void 0), _type === NumberFilterTypeSet.segment && _jsx(Popconfirm, __assign({
        description: _jsxs("div", __assign({
          style: {
            display: 'flex'
          }
        }, {
          children: [_jsx(NumberItem, {
            placeholder: placeholder,
            label: labelMin,
            statistic: statisticMin,
            onChange: function onChange(e) {
              newRef.current.min = e;
            }
          }, void 0), _jsx("div", __assign({
            className: prefixCls + "-split"
          }, {
            children: "-"
          }), void 0), _jsx(NumberItem, {
            label: labelMax,
            statistic: statisticMax,
            onChange: function onChange(e) {
              newRef.current.max = e;
            },
            placeholder: placeholder
          }, void 0)]
        }), void 0),
        onConfirm: function onConfirm() {
          _confirm();
        },
        okText: localeMap[locale].ok,
        cancelText: localeMap[locale].cancel,
        message: localeMap[locale].addSegment,
        emotion: 'info',
        placement: "bottom",
        trigger: "click",
        getPopupContainer: function getPopupContainer() {
          return ref.current;
        }
      }, {
        children: _jsx(IconButton, {
          icon: "add",
          type: "only-icon"
        }, void 0)
      }), void 0)]
    }), void 0), (_type === NumberFilterTypeSet.interval || _type === undefined) && _jsxs("div", __assign({
      className: prefixCls + "-content"
    }, {
      children: [_jsx(NumberItem, {
        placeholder: placeholder,
        label: labelMin,
        statistic: statisticMin,
        defaultValue: min,
        onChange: changeMin
      }, void 0), _jsx("div", __assign({
        className: prefixCls + "-split"
      }, {
        children: "-"
      }), void 0), _jsx(NumberItem, {
        label: labelMax,
        statistic: statisticMax,
        defaultValue: max,
        onChange: changeMax,
        placeholder: placeholder
      }, void 0)]
    }), void 0), _type === NumberFilterTypeSet.segment && _jsxs("div", __assign({
      className: prefixCls + "-content",
      style: {
        display: 'block'
      }
    }, {
      children: [size(segmentation) === 0 && _jsxs("div", __assign({
        className: prefixCls + "-none-text"
      }, {
        children: [_jsx("div", {
          children: localeMap[locale].noContent
        }, void 0), _jsxs("div", {
          children: [localeMap[locale].please, _jsxs("span", {
            children: [statisticMin, "-", statisticMax, localeMap[locale].between]
          }, void 0), localeMap[locale].addSegment]
        }, void 0)]
      }), void 0), map(segmentation, function (seg, index) {
        return _jsxs("div", __assign({
          className: prefixCls + "-content-item"
        }, {
          children: [_jsxs("div", {
            children: [seg.min, "-", seg.max]
          }, void 0), _jsx(LinkButton, __assign({
            onClick: function onClick() {
              deleteSegmentation === null || deleteSegmentation === void 0 ? void 0 : deleteSegmentation(index);
            }
          }, {
            children: localeMap[locale]["delete"]
          }), void 0)]
        }), index);
      })]
    }), void 0)]
  }), void 0);
};

var NumberFilter = function NumberFilter(props) {
  var _a = props,
      min = _a.min,
      max = _a.max,
      onOk = _a.onOk,
      onClose = _a.onClose,
      children = _a.children,
      className = _a.className,
      labelMax = _a.labelMax,
      labelMin = _a.labelMin,
      statisticMin = _a.statisticMin,
      statisticMax = _a.statisticMax,
      placeholder = _a.placeholder,
      type = _a.type,
      // 区间｜分段  不传，就是老版本区间
  segmentation = _a.segmentation,
      restProps = __rest(_a, ["min", "max", "onOk", "onClose", "children", "className", "labelMax", "labelMin", "statisticMin", "statisticMax", "placeholder", "type", "segmentation"]);

  var _b = useSetState({
    min: min,
    max: max,
    segmentation: segmentation || []
  }),
      state = _b[0],
      setState = _b[1];

  React.useEffect(function () {
    setState({
      segmentation: segmentation
    });
  }, [segmentation, setState]);
  var changeMin = useMemoizedFn(function (v) {
    setState({
      min: v
    });
  });
  var changeMax = useMemoizedFn(function (v) {
    setState({
      max: v
    });
  });
  var pushSegmentation = useMemoizedFn(function (seg) {
    var segmentation = state.segmentation;
    segmentation === null || segmentation === void 0 ? void 0 : segmentation.push(seg);
    setState({
      segmentation: segmentation
    });
  });
  var deleteSegmentation = useMemoizedFn(function (index) {
    var segmentation = state.segmentation;
    segmentation === null || segmentation === void 0 ? void 0 : segmentation.splice(index, 1);
    setState({
      segmentation: segmentation
    });
  });
  var handleConfirm = useCallback(function () {
    if (onOk) {
      var current = state;
      var result = {
        min: current.min,
        max: current.max,
        segmentation: current.segmentation
      };
      onOk(result);
    }
  }, [onOk, state]);
  var handleClose = useCallback(function () {
    if (onClose) {
      onClose();
    }

    setState({
      min: min,
      max: max
    });
  }, [onClose, min, max, setState]);
  return _jsx(CreateFilter, __assign({
    onClose: handleClose,
    onOk: handleConfirm,
    overlay: _jsx(Content, {
      type: type,
      placeholder: placeholder,
      labelMin: labelMin,
      statisticMin: statisticMin,
      min: min,
      changeMin: changeMin,
      labelMax: labelMax,
      statisticMax: statisticMax,
      max: max,
      changeMax: changeMax,
      segmentation: state.segmentation,
      pushSegmentation: pushSegmentation,
      deleteSegmentation: deleteSegmentation
    }, void 0),
    footerClassName: prefixCls + "-footer",
    className: classNames(prefixCls, className)
  }, restProps, {
    children: children
  }), void 0);
};

NumberFilter.displayName = 'NumberFilter';
export default NumberFilter;
var defaultProps = {
  placement: 'bottomLeft'
};
NumberFilter.defaultProps = defaultProps;
var NumberFilterMemo = /*#__PURE__*/React.memo(NumberFilter);
NumberFilterMemo.displayName = 'NumberFilterMemo';
export { NumberFilterMemo };

