import { defineComponent, shallowRef, computed, createVNode } from 'vue';
import '../../../utils/index.mjs';
import useConfigInject from '../../config-provider/src/hooks/useConfigInject.mjs';
import useStyle from '../style/index.mjs';
import MotionThumb from './MotionThumb.mjs';
import SegmentedOption from './Options.mjs';
import { segmentedProps } from './props.mjs';
import { initDefaultProps } from '../../../utils/vue/initDefaultProps.mjs';
import { classNames } from '../../../utils/dom/class.mjs';

function normalizeOptions(options) {
  return options.map((option) => {
    if (typeof option === "object" && option !== null)
      return option;
    return {
      label: option == null ? void 0 : option.toString(),
      title: option == null ? void 0 : option.toString(),
      value: option
    };
  });
}
var ASegmented = /* @__PURE__ */ defineComponent({
  name: "ASegmented",
  inheritAttrs: false,
  props: initDefaultProps(segmentedProps(), {
    options: [],
    motionName: "thumb-motion"
  }),
  slots: Object,
  setup(props, {
    emit,
    slots,
    attrs
  }) {
    const {
      prefixCls,
      direction,
      size
    } = useConfigInject("segmented", props);
    const [wrapSSR, hashId] = useStyle(prefixCls);
    const rootRef = shallowRef();
    const thumbShow = shallowRef(false);
    const segmentedOptions = computed(() => normalizeOptions(props.options));
    const handleChange = (_event, val) => {
      if (props.disabled)
        return;
      emit("update:value", val);
      emit("change", val);
    };
    return () => {
      const pre = prefixCls.value;
      return wrapSSR(createVNode("div", {
        ...attrs,
        "class": classNames(pre, {
          [hashId.value]: true,
          [`${pre}-block`]: props.block,
          [`${pre}-disabled`]: props.disabled,
          [`${pre}-lg`]: size.value === "large",
          [`${pre}-sm`]: size.value === "small",
          [`${pre}-rtl`]: direction.value === "rtl"
        }, attrs.class),
        "ref": rootRef
      }, [createVNode("div", {
        "class": `${pre}-group`
      }, [createVNode(MotionThumb, {
        "containerRef": rootRef,
        "prefixCls": pre,
        "value": props.value,
        "motionName": `${pre}-${props.motionName}`,
        "direction": direction.value,
        "getValueIndex": (val) => segmentedOptions.value.findIndex((n) => n.value === val),
        "onMotionStart": () => {
          thumbShow.value = true;
        },
        "onMotionEnd": () => {
          thumbShow.value = false;
        }
      }, null), segmentedOptions.value.map((segmentedOption) => createVNode(SegmentedOption, {
        "key": segmentedOption.value,
        "prefixCls": pre,
        "checked": segmentedOption.value === props.value,
        "onChange": handleChange,
        ...segmentedOption,
        "className": classNames(segmentedOption.className, `${pre}-item`, {
          [`${pre}-item-selected`]: segmentedOption.value === props.value && !thumbShow.value
        }),
        "disabled": !!props.disabled || !!segmentedOption.disabled
      }, slots))])]));
    };
  }
});

export { ASegmented as default };
//# sourceMappingURL=Segmented.mjs.map
