import { ref, watchEffect } from 'vue';
import { unrefElement } from '../../_util/hooks/_vueuse/unrefElement';
const DEFAULT_BORDER_INFO = {
  borderWidth: [0, 0, 0, 0],
  borderRadius: '0px'
};
const parseBorderWidth = value => {
  const size = Number.parseFloat(value);
  return Number.isFinite(size) ? size : 0;
};
const useBorderSize = domNode => {
  const borderInfo = ref(DEFAULT_BORDER_INFO);
  watchEffect(() => {
    const node = unrefElement(domNode.value);
    if (!node) {
      borderInfo.value = DEFAULT_BORDER_INFO;
      return;
    }
    const {
      borderTopWidth,
      borderRightWidth,
      borderBottomWidth,
      borderLeftWidth,
      borderRadius
    } = getComputedStyle(node);
    borderInfo.value = {
      borderWidth: [parseBorderWidth(borderTopWidth), parseBorderWidth(borderRightWidth), parseBorderWidth(borderBottomWidth), parseBorderWidth(borderLeftWidth)],
      borderRadius
    };
  });
  return borderInfo;
};
export default useBorderSize;