import { computed, defineComponent, ref, watch, createVNode as _createVNode } from 'vue';
import classNames from '../../_util/classNames';
const viewSize = 100;
const borderWidth = viewSize / 5;
const radius = viewSize / 2 - borderWidth / 2;
const circumference = radius * 2 * Math.PI;
const position = 50;
const CustomCircle = defineComponent({
  inheritAttrs: false,
  props: ['dotClassName', 'style', 'hasCircleCls'],
  setup(props) {
    return () => {
      const {
        dotClassName,
        style,
        hasCircleCls
      } = props;
      return _createVNode("circle", {
        "class": classNames(`${dotClassName}-circle`, {
          [`${dotClassName}-circle-bg`]: hasCircleCls
        }),
        "r": radius,
        "cx": position,
        "cy": position,
        "stroke-width": borderWidth,
        "style": style
      }, null);
    };
  }
});
export default defineComponent({
  inheritAttrs: false,
  props: ['prefixCls', 'percent'],
  setup(props) {
    const dotClassName = `${props.prefixCls}-dot`;
    const holderClassName = `${dotClassName}-holder`;
    const hideClassName = `${holderClassName}-hidden`;
    const render = ref(false);
    // ==================== Visible =====================
    watch(() => props.percent !== 0, isNotZero => {
      if (isNotZero) {
        render.value = true;
      }
    }, {
      immediate: true,
      flush: 'sync'
    });
    // ==================== Progress ====================
    const safePtg = computed(() => Math.max(Math.min(props.percent, 100), 0));
    return () => {
      if (!render.value) {
        return null;
      }
      const circleStyle = {
        strokeDashoffset: `${circumference / 4}`,
        strokeDasharray: `${circumference * safePtg.value / 100} ${circumference * (100 - safePtg.value) / 100}`
      };
      return _createVNode("span", {
        "class": classNames(holderClassName, `${dotClassName}-progress`, safePtg.value <= 0 && hideClassName)
      }, [_createVNode("svg", {
        "viewBox": `0 0 ${viewSize} ${viewSize}`,
        "role": "progressbar",
        "aria-valuemin": 0,
        "aria-valuemax": 100,
        "aria-valuenow": safePtg.value
      }, [_createVNode(CustomCircle, {
        "dotClassName": dotClassName,
        "hasCircleCls": true
      }, null), _createVNode(CustomCircle, {
        "dotClassName": dotClassName,
        "style": circleStyle
      }, null)])]);
    };
  }
});