import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { createVNode as _createVNode } from "vue";
import _extends from "@babel/runtime/helpers/esm/extends";
import { computed, defineComponent, shallowRef } from 'vue';
import { useInjectSlider } from '../context';
import '../../_util/EventInterface';
import KeyCode from '../../_util/KeyCode';
import classnames from '../../_util/classNames';
import { getDirectionStyle, getIndex } from '../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 = defineComponent({
  name: 'Handle',
  inheritAttrs: false,
  props: handleProps(),
  setup(props, {
    expose,
    attrs
  }) {
    const handleRef = shallowRef();
    expose(handleRef);
    const handlePrefixCls = computed(() => `${props.prefixCls}-handle`);
    const 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.LEFT:
            offset = direction === 'ltr' || direction === 'btt' ? -1 : 1;
            break;
          case KeyCode.RIGHT:
            offset = direction === 'ltr' || direction === 'btt' ? 1 : -1;
            break;
          // Up is plus
          case KeyCode.UP:
            offset = direction !== 'ttb' ? 1 : -1;
            break;
          // Down is minus
          case KeyCode.DOWN:
            offset = direction !== 'ttb' ? -1 : 1;
            break;
          case KeyCode.HOME:
            offset = 'min';
            break;
          case KeyCode.END:
            offset = 'max';
            break;
          case KeyCode.PAGE_UP:
            offset = 2;
            break;
          case KeyCode.PAGE_DOWN:
            offset = -2;
            break;
          case KeyCode.BACKSPACE:
          case KeyCode.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.LEFT:
        case KeyCode.RIGHT:
        case KeyCode.UP:
        case KeyCode.DOWN:
        case KeyCode.HOME:
        case KeyCode.END:
        case KeyCode.PAGE_UP:
        case KeyCode.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 = getDirectionStyle(direction, value, min, max);
      let divProps = {};
      if (valueIndex !== null) {
        divProps = {
          tabindex: disabled ? null : getIndex(tabIndex, valueIndex),
          role: 'slider',
          'aria-valuemin': min,
          'aria-valuemax': max,
          'aria-valuenow': value,
          'aria-disabled': disabled,
          'aria-label': getIndex(ariaLabelForHandle, valueIndex),
          'aria-labelledby': getIndex(ariaLabelledByForHandle, valueIndex),
          'aria-required': getIndex(ariaRequired, valueIndex),
          'aria-valuetext': (_a = 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 = _createVNode("div", _objectSpread(_objectSpread({
        "ref": handleRef,
        "class": classnames(handlePrefixCls.value, {
          [`${handlePrefixCls.value}-${valueIndex + 1}`]: valueIndex !== null && range,
          [`${handlePrefixCls.value}-dragging`]: dragging,
          [`${handlePrefixCls.value}-dragging-delete`]: draggingDelete
        }, classNames.handle),
        "style": _extends(_extends(_extends({}, positionStyle), style || {}), styles.handle)
      }, divProps), attrs), null);
      if (render) {
        handleNode = render(handleNode, {
          index: valueIndex,
          prefixCls,
          value,
          dragging,
          draggingDelete
        });
      }
      return handleNode;
    };
  }
});
export default Handle;