import { createVNode, defineComponent, shallowRef, computed, mergeProps } from 'vue';
import useStyle from '../style/index.mjs';
import classNames from '../../_util/classNames.mjs';
import useConfigInject from '../../config-provider/hooks/useConfigInject.mjs';
import '../../_util/props-util/index.mjs';
import { arrayType, booleanType, stringType, someType, functionType } from '../../_util/type.mjs';
import MotionThumb from './MotionThumb.mjs';
import initDefaultProps from '../../_util/props-util/initDefaultProps.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
    };
  });
}
const segmentedProps = () => {
  return {
    "prefixCls": String,
    "options": arrayType(),
    "block": booleanType(),
    "disabled": booleanType(),
    "size": stringType(),
    "value": {
      ...someType([String, Number]),
      required: true
    },
    "motionName": String,
    "onChange": functionType(),
    "onUpdate:value": functionType()
  };
};
const SegmentedOption = (props, {
  slots,
  emit
}) => {
  const {
    value,
    disabled,
    payload,
    title,
    prefixCls,
    label = slots.label,
    checked,
    className
  } = props;
  const handleChange = (event) => {
    if (disabled)
      return;
    emit("change", event, value);
  };
  return createVNode("label", {
    "class": classNames({
      [`${prefixCls}-item-disabled`]: disabled
    }, className)
  }, [createVNode("input", {
    "class": `${prefixCls}-item-input`,
    "type": "radio",
    "disabled": disabled,
    "checked": checked,
    "onChange": handleChange
  }, null), createVNode("div", {
    "class": `${prefixCls}-item-label`,
    "title": typeof title === "string" ? title : ""
  }, [typeof label === "function" ? label({
    value,
    disabled,
    payload,
    title
  }) : label != null ? label : value])]);
};
SegmentedOption.inheritAttrs = false;
var Segmented = /* @__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", mergeProps(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, mergeProps({
        "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 { Segmented as default, segmentedProps };
//# sourceMappingURL=segmented.mjs.map
