"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _type = require("../../_util/type");
const calcThumbStyle = (targetElement, vertical) => {
  if (!targetElement) {
    return null;
  }
  const style = {
    left: targetElement.offsetLeft,
    right: targetElement.parentElement.clientWidth - targetElement.clientWidth - targetElement.offsetLeft,
    width: targetElement.clientWidth,
    top: targetElement.offsetTop,
    bottom: targetElement.parentElement.clientHeight - targetElement.clientHeight - targetElement.offsetTop,
    height: targetElement.clientHeight
  };
  if (vertical) {
    return {
      left: 0,
      right: 0,
      width: 0,
      top: style.top,
      bottom: style.bottom,
      height: style.height
    };
  }
  return {
    left: style.left,
    right: style.right,
    width: style.width,
    top: 0,
    bottom: 0,
    height: 0
  };
};
const toPX = value => value !== undefined ? `${value}px` : undefined;
const MotionThumb = (0, _vue.defineComponent)({
  props: {
    value: (0, _type.anyType)(),
    getValueIndex: (0, _type.anyType)(),
    prefixCls: (0, _type.anyType)(),
    motionName: (0, _type.anyType)(),
    onMotionStart: (0, _type.anyType)(),
    onMotionEnd: (0, _type.anyType)(),
    direction: (0, _type.anyType)(),
    containerRef: (0, _type.anyType)(),
    vertical: (0, _type.anyType)()
  },
  emits: ['motionStart', 'motionEnd'],
  setup(props, _ref) {
    let {
      emit
    } = _ref;
    const thumbRef = (0, _vue.ref)();
    // =========================== Effect ===========================
    const findValueElement = val => {
      var _a;
      const index = props.getValueIndex(val);
      const ele = (_a = props.containerRef.value) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.${props.prefixCls}-item`)[index];
      return (ele === null || ele === void 0 ? void 0 : ele.offsetParent) && ele;
    };
    const prevStyle = (0, _vue.ref)(null);
    const nextStyle = (0, _vue.ref)(null);
    const thumbStart = (0, _vue.computed)(() => {
      var _a, _b, _c, _d;
      if (props.vertical) {
        return toPX((_b = (_a = prevStyle.value) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : 0);
      }
      if (props.direction === 'rtl') {
        return toPX(-((_c = prevStyle.value) === null || _c === void 0 ? void 0 : _c.right));
      }
      return toPX((_d = prevStyle.value) === null || _d === void 0 ? void 0 : _d.left);
    });
    const thumbActive = (0, _vue.computed)(() => {
      var _a, _b, _c, _d;
      if (props.vertical) {
        return toPX((_b = (_a = nextStyle.value) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : 0);
      }
      if (props.direction === 'rtl') {
        return toPX(-((_c = nextStyle.value) === null || _c === void 0 ? void 0 : _c.right));
      }
      return toPX((_d = nextStyle.value) === null || _d === void 0 ? void 0 : _d.left);
    });
    const mergedStyle = (0, _vue.computed)(() => {
      var _a, _b, _c, _d;
      return {
        '--thumb-start-left': thumbStart.value,
        '--thumb-start-width': toPX((_a = prevStyle.value) === null || _a === void 0 ? void 0 : _a.width),
        '--thumb-active-left': thumbActive.value,
        '--thumb-active-width': toPX((_b = nextStyle.value) === null || _b === void 0 ? void 0 : _b.width),
        '--thumb-start-top': thumbStart.value,
        '--thumb-start-height': toPX((_c = prevStyle.value) === null || _c === void 0 ? void 0 : _c.height),
        '--thumb-active-top': thumbActive.value,
        '--thumb-active-height': toPX((_d = nextStyle.value) === null || _d === void 0 ? void 0 : _d.height)
      };
    });
    // 监听过渡结束
    const onTransitionEnd = e => {
      if (e.propertyName !== 'transform' && e.propertyName !== 'width') return;
      if (thumbRef.value) {
        thumbRef.value.removeEventListener('transitionend', onTransitionEnd);
      }
      prevStyle.value = null;
      nextStyle.value = null;
      emit('motionEnd');
    };
    (0, _vue.watch)(() => props.value, (value, prevValue) => {
      const prev = findValueElement(prevValue);
      const next = findValueElement(value);
      const calcPrevStyle = calcThumbStyle(prev, props.vertical);
      const calcNextStyle = calcThumbStyle(next, props.vertical);
      prevStyle.value = calcPrevStyle;
      nextStyle.value = calcNextStyle;
      (0, _vue.nextTick)(() => {
        if (prev && next) {
          if (thumbRef.value) {
            // 使用 CSS 变量设置初始位置
            if (props.vertical) {
              thumbRef.value.style.transform = `translateY(var(--thumb-start-top))`;
              thumbRef.value.style.height = `var(--thumb-start-height)`;
            } else {
              thumbRef.value.style.transform = `translateX(var(--thumb-start-left))`;
              thumbRef.value.style.width = `var(--thumb-start-width)`;
            }
            // 强制重排
            thumbRef.value.offsetHeight;
            if (props.vertical) {
              thumbRef.value.style.transform = `translateY(var(--thumb-active-top))`;
              thumbRef.value.style.height = `var(--thumb-active-height)`;
            } else {
              thumbRef.value.style.transform = `translateX(var(--thumb-active-left))`;
              thumbRef.value.style.width = `var(--thumb-active-width)`;
            }
            emit('motionStart');
            thumbRef.value.addEventListener('transitionend', onTransitionEnd);
          }
        } else {
          emit('motionEnd');
        }
      });
    }, {
      flush: 'post'
    });
    // 清理事件监听
    (0, _vue.onBeforeUnmount)(() => {
      var _a;
      (_a = thumbRef.value) === null || _a === void 0 ? void 0 : _a.removeEventListener('transitionend', onTransitionEnd);
    });
    return () => {
      // It's little ugly which should be refactor when @umi/test update to latest jsdom
      const motionProps = {
        ref: thumbRef,
        style: mergedStyle.value,
        class: [`${props.prefixCls}-thumb`]
      };
      if (process.env.NODE_ENV === 'test') {
        motionProps['data-test-style'] = JSON.stringify(mergedStyle.value);
      }
      return !prevStyle.value || !nextStyle.value ? null : (0, _vue.createVNode)("div", motionProps, null);
    };
  }
});
var _default = exports.default = MotionThumb;