"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _isMobile = _interopRequireDefault(require("../../vc-util/isMobile"));
var _classNames = _interopRequireDefault(require("../../_util/classNames"));
/**
 * When click and hold on a button - the speed of auto changing the value.
 */
const STEP_INTERVAL = 200;
/**
 * When click and hold on a button - the delay before auto changing the value.
 */
const STEP_DELAY = 600;
const stepHandlerProps = () => ({
  prefixCls: String,
  action: String,
  disabled: Boolean,
  className: String,
  style: Object,
  onStep: Function
});
var _default = exports.default = (0, _vue.defineComponent)({
  compatConfig: {
    MODE: 3
  },
  name: 'StepHandler',
  inheritAttrs: false,
  props: stepHandlerProps(),
  slots: Object,
  setup(props, {
    slots
  }) {
    const isUpAction = (0, _vue.computed)(() => props.action === 'up');
    const stepTimeoutRef = (0, _vue.ref)();
    const onStopStep = () => {
      clearTimeout(stepTimeoutRef.value);
    };
    // We will interval update step when hold mouse down
    const onStepMouseDown = e => {
      e.preventDefault();
      onStopStep();
      props.onStep(isUpAction.value, 'handler');
      // Loop step for interval
      function loopStep() {
        props.onStep(isUpAction.value, 'handler');
        stepTimeoutRef.value = setTimeout(loopStep, STEP_INTERVAL);
      }
      // First time press will wait some time to trigger loop step update
      stepTimeoutRef.value = setTimeout(loopStep, STEP_DELAY);
    };
    (0, _vue.onBeforeUnmount)(() => {
      onStopStep();
    });
    return () => {
      var _a;
      if ((0, _isMobile.default)()) {
        return null;
      }
      const {
        prefixCls,
        action,
        className,
        disabled,
        style
      } = props;
      const actionClassName = `${prefixCls}-action`;
      const mergedClassName = (0, _classNames.default)(actionClassName, `${actionClassName}-${action}`, {
        [`${actionClassName}-${action}-disabled`]: disabled
      }, className);
      return (0, _vue.createVNode)("span", {
        "unselectable": "on",
        "role": "button",
        "onMouseup": onStopStep,
        "onMouseleave": onStopStep,
        "onMousedown": e => {
          onStepMouseDown(e);
        },
        "aria-label": isUpAction.value ? 'Increase Value' : 'Decrease Value',
        "aria-disabled": disabled,
        "class": mergedClassName,
        "style": style
      }, [((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) || (0, _vue.createVNode)("span", {
        "unselectable": "on",
        "class": `${prefixCls}-action-${action}-inner`
      }, null)]);
    };
  }
});