import { jsx } from "react/jsx-runtime";
import "react";
import { isArrayField, isValid, observer, useField } from "@tachybase/schema";
import { Tag } from "antd";
import { useCollectionField } from "../../../data-source/collection-field/CollectionFieldProvider.mjs";
import { EllipsisWithTooltip } from "../input/EllipsisWithTooltip.mjs";
import { defaultFieldNames, getCurrentOptions } from "./utils.mjs";
const ReadPretty = observer((props)=>{
    var _field_value;
    const fieldNames = {
        ...defaultFieldNames,
        ...props.fieldNames
    };
    const field = useField();
    if (!isValid(props.value)) return /*#__PURE__*/ jsx("div", {});
    if (isArrayField(field) && (null == field ? void 0 : null == (_field_value = field.value) ? void 0 : _field_value.length) === 0) return /*#__PURE__*/ jsx("div", {});
    const collectionField = useCollectionField();
    const dataSource = field.dataSource || props.options || (null == collectionField ? void 0 : collectionField.uiSchema.enum) || [];
    const currentOptions = getCurrentOptions(field.value, dataSource, fieldNames);
    return /*#__PURE__*/ jsx("div", {
        children: /*#__PURE__*/ jsx(EllipsisWithTooltip, {
            ellipsis: props.ellipsis,
            children: currentOptions.map((option, key)=>/*#__PURE__*/ jsx(Tag, {
                    color: option[fieldNames.color],
                    icon: option.icon,
                    children: option[fieldNames.label]
                }, key))
        })
    });
}, {
    displayName: 'ReadPretty'
});
export { ReadPretty };
