"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _vue = require("vue");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _context = require("../context");
require("../../_util/EventInterface");
var _KeyCode = _interopRequireDefault(require("../../_util/KeyCode"));
var _classNames = _interopRequireDefault(require("../../_util/classNames"));
var _util = require("../util");
const handleProps = () => ({
  prefixCls: String,
  style: Object,
  value: Number,
  valueIndex: Number,
  dragging: {
    type: Boolean,
    default: undefined
  },
  draggingDelete: {
    type: Boolean,
    default: undefined
  },
  onStartMove: Function,
  onDelete: Function,
  onOffsetChange: Function,
  onFocus: Function,
  onMouseEnter: Function,
  render: Function,
  onChangeComplete: Function,
  mock: {
    type: Boolean,
    default: undefined
  }
});
const Handle = (0, _vue.defineComponent)({
  name: 'Handle',
  inheritAttrs: false,
  props: handleProps(),
  setup(props, {
    expose,
    attrs
  }) {
    const handleRef = (0, _vue.shallowRef)();
    expose(handleRef);
    const handlePrefixCls = (0, _vue.computed)(() => `${props.prefixCls}-handle`);
    const context = (0, _context.useInjectSlider)();
    // ============================ Events ============================
    const onInternalStartMove = e => {
      if (!context.value.disabled) {
        props.onStartMove(e, props.valueIndex);
      }
    };
    const onInternalFocus = e => {
      var _a;
      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e, props.valueIndex);
    };
    const onInternalMouseEnter = e => {
      props.onMouseEnter(e, props.valueIndex);
    };
    // =========================== Keyboard ===========================
    const onKeyDown = e => {
      const {
        disabled,
        keyboard,
        direction
      } = context.value;
      const {
        onDelete,
        valueIndex,
        onOffsetChange
      } = props;
      if (!disabled && keyboard) {
        let offset = null;
        // Change the value
        switch (e.which || e.keyCode) {
          case _KeyCode.default.LEFT:
            offset = direction === 'ltr' || direction === 'btt' ? -1 : 1;
            break;
          case _KeyCode.default.RIGHT:
            offset = direction === 'ltr' || direction === 'btt' ? 1 : -1;
            break;
          // Up is plus
          case _KeyCode.default.UP:
            offset = direction !== 'ttb' ? 1 : -1;
            break;
          // Down is minus
          case _KeyCode.default.DOWN:
            offset = direction !== 'ttb' ? -1 : 1;
            break;
          case _KeyCode.default.HOME:
            offset = 'min';
            break;
          case _KeyCode.default.END:
            offset = 'max';
            break;
          case _KeyCode.default.PAGE_UP:
            offset = 2;
            break;
          case _KeyCode.default.PAGE_DOWN:
            offset = -2;
            break;
          case _KeyCode.default.BACKSPACE:
          case _KeyCode.default.DELETE:
            onDelete === null || onDelete === void 0 ? void 0 : onDelete(valueIndex);
            break;
        }
        if (offset !== null) {
          e.preventDefault();
          onOffsetChange(offset, valueIndex);
        }
      }
    };
    const handleKeyUp = e => {
      var _a;
      switch (e.which || e.keyCode) {
        case _KeyCode.default.LEFT:
        case _KeyCode.default.RIGHT:
        case _KeyCode.default.UP:
        case _KeyCode.default.DOWN:
        case _KeyCode.default.HOME:
        case _KeyCode.default.END:
        case _KeyCode.default.PAGE_UP:
        case _KeyCode.default.PAGE_DOWN:
          (_a = props.onChangeComplete) === null || _a === void 0 ? void 0 : _a.call(props);
          break;
      }
    };
    return () => {
      var _a;
      const {
        direction,
        min,
        max,
        disabled,
        tabIndex,
        ariaLabelForHandle,
        ariaLabelledByForHandle,
        ariaRequired,
        ariaValueTextFormatterForHandle,
        range,
        classNames,
        styles
      } = context.value;
      const {
        value,
        valueIndex,
        dragging,
        draggingDelete,
        style,
        render,
        prefixCls
      } = props;
      const positionStyle = (0, _util.getDirectionStyle)(direction, value, min, max);
      let divProps = {};
      if (valueIndex !== null) {
        divProps = {
          tabindex: disabled ? null : (0, _util.getIndex)(tabIndex, valueIndex),
          role: 'slider',
          'aria-valuemin': min,
          'aria-valuemax': max,
          'aria-valuenow': value,
          'aria-disabled': disabled,
          'aria-label': (0, _util.getIndex)(ariaLabelForHandle, valueIndex),
          'aria-labelledby': (0, _util.getIndex)(ariaLabelledByForHandle, valueIndex),
          'aria-required': (0, _util.getIndex)(ariaRequired, valueIndex),
          'aria-valuetext': (_a = (0, _util.getIndex)(ariaValueTextFormatterForHandle, valueIndex)) === null || _a === void 0 ? void 0 : _a(value),
          'aria-orientation': direction === 'ltr' || direction === 'rtl' ? 'horizontal' : 'vertical',
          onMousedown: onInternalStartMove,
          onTouchstart: onInternalStartMove,
          onFocus: onInternalFocus,
          onMouseenter: onInternalMouseEnter,
          onKeydown: onKeyDown,
          onKeyup: handleKeyUp
        };
      }
      let handleNode = (0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
        "ref": handleRef,
        "class": (0, _classNames.default)(handlePrefixCls.value, {
          [`${handlePrefixCls.value}-${valueIndex + 1}`]: valueIndex !== null && range,
          [`${handlePrefixCls.value}-dragging`]: dragging,
          [`${handlePrefixCls.value}-dragging-delete`]: draggingDelete
        }, classNames.handle),
        "style": (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, positionStyle), style || {}), styles.handle)
      }, divProps), attrs), null);
      if (render) {
        handleNode = render(handleNode, {
          index: valueIndex,
          prefixCls,
          value,
          dragging,
          draggingDelete
        });
      }
      return handleNode;
    };
  }
});
var _default = exports.default = Handle;