"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useIndicator = void 0;
var _vue = require("vue");
require("../interface");
var _raf = _interopRequireDefault(require("../../../_util/raf"));
var _util = require("../../../_util/util");
const useIndicator = (props, activeTabOffset, horizontal) => {
  const inkStyle = (0, _vue.ref)();
  const inkBarRafRef = (0, _vue.shallowRef)();
  const cleanInkBarRaf = () => {
    _raf.default.cancel(inkBarRafRef.value);
  };
  const getLength = (origin, indicator) => {
    if (typeof indicator.size === 'function') {
      return indicator.size(origin);
    }
    if (typeof indicator.size === 'number') {
      return indicator.size;
    }
    return origin;
  };
  (0, _vue.watch)([activeTabOffset, horizontal, () => props.rtl, () => props.indicator], () => {
    const newInkStyle = {};
    const {
      indicator,
      rtl
    } = props;
    const align = (indicator === null || indicator === void 0 ? void 0 : indicator.align) || 'center';
    const _activeTabOffset = activeTabOffset.value;
    if (_activeTabOffset) {
      if (horizontal.value) {
        newInkStyle.width = (0, _util.toPx)(getLength(_activeTabOffset.width, indicator || {}));
        const key = rtl ? 'right' : 'left';
        if (align === 'start') {
          newInkStyle[key] = (0, _util.toPx)(_activeTabOffset[key]);
        } else if (align === 'center') {
          newInkStyle[key] = (0, _util.toPx)(_activeTabOffset[key] + _activeTabOffset.width / 2);
          newInkStyle.transform = rtl ? 'translateX(50%)' : 'translateX(-50%)';
        } else {
          newInkStyle[key] = (0, _util.toPx)(_activeTabOffset[key] + _activeTabOffset.width);
          newInkStyle.transform = 'translateX(-100%)';
        }
      } else {
        newInkStyle.height = (0, _util.toPx)(getLength(_activeTabOffset.height, indicator || {}));
        if (align === 'start') {
          newInkStyle.top = (0, _util.toPx)(_activeTabOffset.top);
        } else if (align === 'center') {
          newInkStyle.top = (0, _util.toPx)(_activeTabOffset.top + _activeTabOffset.height / 2);
          newInkStyle.transform = 'translateY(-50%)';
        } else {
          newInkStyle.top = (0, _util.toPx)(_activeTabOffset.top + _activeTabOffset.height);
          newInkStyle.transform = 'translateY(-100%)';
        }
      }
    }
    cleanInkBarRaf();
    inkBarRafRef.value = (0, _raf.default)(() => {
      // Avoid jitter caused by tiny numerical differences
      // fix https://github.com/ant-design/ant-design/issues/53378
      const isEqual = inkStyle.value && newInkStyle && Object.keys(newInkStyle).every(key => {
        const newValue = newInkStyle[key];
        const oldValue = inkStyle[key];
        return typeof newValue === 'number' && typeof oldValue === 'number' ? Math.round(newValue) === Math.round(oldValue) : newValue === oldValue;
      });
      if (!isEqual) {
        inkStyle.value = newInkStyle;
      }
    });
  });
  (0, _vue.onBeforeMount)(() => {
    cleanInkBarRaf();
  });
  return {
    style: inkStyle
  };
};
exports.useIndicator = useIndicator;