import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { createVNode as _createVNode, Fragment as _Fragment, createTextVNode as _createTextVNode } from "vue";
import _extends from "@babel/runtime/helpers/esm/extends";
import { defineComponent, computed } from 'vue';
import classNames from '../_util/classNames';
import { isNumber } from '../_util/is';
import { toPx } from '../_util/util';
import '../_util/type';
// Visually hidden styles for screen readers
const VISUALLY_HIDDEN_STYLE = {
  position: 'absolute',
  width: '1px',
  height: '1px',
  padding: '0px',
  margin: '-1px',
  overflow: 'hidden',
  clip: 'rect(0, 0, 0, 0)',
  whiteSpace: 'nowrap',
  border: '0px'
};
export const progressProps = () => ({
  prefixCls: {
    type: String,
    required: true
  },
  percent: {
    type: Number,
    default: undefined
  },
  render: {
    type: Function,
    default: undefined
  },
  classNames: {
    type: Object,
    default: undefined
  },
  styles: {
    type: Object,
    default: undefined
  },
  rootClassName: {
    type: String,
    default: undefined
  },
  rootStyle: {
    type: Object,
    default: undefined
  },
  width: {
    type: [String, Number],
    default: undefined
  },
  height: {
    type: [String, Number],
    default: undefined
  }
});
const Progress = defineComponent({
  name: 'ImageProgress',
  props: progressProps(),
  setup(props) {
    // Check if percent is a valid finite number
    const hasPercent = computed(() => isNumber(props.percent) && Number.isFinite(props.percent));
    // Calculate percent value (clamped to 0-100 for progress bar width)
    const percentValue = computed(() => hasPercent.value ? Math.max(0, Math.min(100, Math.round(props.percent))) : 0);
    // ARIA attributes for accessibility
    const ariaProps = computed(() => hasPercent.value ? {
      role: 'progressbar',
      'aria-valuemin': 0,
      'aria-valuemax': 100,
      'aria-valuenow': percentValue.value,
      'aria-label': `${percentValue.value}%`
    } : {
      'aria-busy': true
    });
    return () => {
      const {
        prefixCls,
        classNames: progressClassNames,
        styles: progressStyles,
        rootClassName,
        rootStyle,
        width,
        height,
        render: progressRender
      } = props;
      // Render progress bar (rail with ::before pseudo for track)
      const progressBar = hasPercent.value ? _createVNode("div", {
        "class": classNames(`${prefixCls}-progress-rail`, progressClassNames === null || progressClassNames === void 0 ? void 0 : progressClassNames.rail),
        "style": _extends(_extends({}, progressStyles === null || progressStyles === void 0 ? void 0 : progressStyles.rail), {
          '--progress-percent': `${percentValue.value}%`
        })
      }, null) : null;
      // Render progress content
      const progressContent = progressRender ? progressRender(progressBar, percentValue.value) : _createVNode(_Fragment, null, [progressBar, hasPercent.value && _createVNode("div", {
        "class": classNames(`${prefixCls}-progress-indicator`, progressClassNames === null || progressClassNames === void 0 ? void 0 : progressClassNames.indicator),
        "style": progressStyles === null || progressStyles === void 0 ? void 0 : progressStyles.indicator
      }, [`${percentValue.value}%`])]);
      return _createVNode("div", _objectSpread({
        "class": classNames(prefixCls, `${prefixCls}-progress-wrapper`, progressClassNames === null || progressClassNames === void 0 ? void 0 : progressClassNames.root, rootClassName),
        "style": _extends(_extends({
          width: toPx(width),
          height: toPx(height)
        }, rootStyle), progressStyles === null || progressStyles === void 0 ? void 0 : progressStyles.root)
      }, ariaProps.value), [!hasPercent.value && _createVNode("span", {
        "role": "status",
        "aria-live": "polite",
        "style": VISUALLY_HIDDEN_STYLE
      }, [_createTextVNode("Loading")]), _createVNode("div", {
        "class": `${prefixCls}-progress-ink-1`
      }, null), _createVNode("div", {
        "class": `${prefixCls}-progress-ink-2`
      }, null), _createVNode("div", {
        "class": classNames(`${prefixCls}-progress-content`, progressClassNames === null || progressClassNames === void 0 ? void 0 : progressClassNames.content),
        "style": progressStyles === null || progressStyles === void 0 ? void 0 : progressStyles.content
      }, [progressContent])]);
    };
  }
});
export default Progress;