import { jsx, jsxs } from "react/jsx-runtime";
import { Fragment, useRef, useState } from "react";
import { RecursionField, observer, toArr, useFieldSchema } from "@tachybase/schema";
import { WithoutTableFieldResource } from "../../../block-provider/index.mjs";
import { BlockAssociationContext } from "../../../block-provider/BlockProvider.mjs";
import { CollectionProvider_deprecated, useCollectionManager_deprecated, useCollection_deprecated } from "../../../collection-manager/index.mjs";
import { RecordProvider, useRecord } from "../../../record-provider/index.mjs";
import { FormProvider } from "../../core/index.mjs";
import { useCompile } from "../../hooks/index.mjs";
import { ActionContextProvider, OpenMode, useActionContext } from "../action/index.mjs";
import { EllipsisWithTooltip } from "../input/EllipsisWithTooltip.mjs";
import { Preview } from "../preview/index.mjs";
import { isShowFilePicker } from "./InputRecordPicker.mjs";
import { useFieldNames } from "./useFieldNames.mjs";
import { getLabelFormatValue, useLabelUiSchema } from "./util.mjs";
const toValue = (value, placeholder)=>{
    if (null == value) return placeholder;
    return value;
};
const ReadPrettyRecordPicker = observer((props)=>{
    var _fieldSchema_xcomponentprops;
    const { ellipsis } = props;
    const fieldSchema = useFieldSchema();
    const recordCtx = useRecord();
    const { getCollectionJoinField } = useCollectionManager_deprecated();
    const fieldNames = useFieldNames(props);
    const [visible, setVisible] = useState(false);
    const { getField } = useCollection_deprecated();
    const collectionField = getField(fieldSchema.name) || getCollectionJoinField(null == fieldSchema ? void 0 : fieldSchema['x-collection-field']);
    const [record, setRecord] = useState({});
    const compile = useCompile();
    const labelUiSchema = useLabelUiSchema(collectionField, (null == fieldNames ? void 0 : fieldNames.label) || 'label');
    const showFilePicker = isShowFilePicker(labelUiSchema);
    const { snapshot } = useActionContext();
    const isTagsMode = (null == (_fieldSchema_xcomponentprops = fieldSchema['x-component-props']) ? void 0 : _fieldSchema_xcomponentprops.mode) === 'tags';
    const ellipsisWithTooltipRef = useRef();
    if (showFilePicker) return collectionField ? /*#__PURE__*/ jsx(Preview, {
        ...props
    }) : null;
    const renderRecords = ()=>toArr(props.value).map((record, index, arr)=>{
            const val = toValue(compile(null == record ? void 0 : record[(null == fieldNames ? void 0 : fieldNames.label) || 'label']), 'N/A');
            const text = getLabelFormatValue(labelUiSchema, val, true);
            return /*#__PURE__*/ jsxs(Fragment, {
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: "test-record-picker-read-pretty-item",
                        children: snapshot || isTagsMode ? text : /*#__PURE__*/ jsx("a", {
                            onClick: (e)=>{
                                var _ellipsisWithTooltipRef_current;
                                e.stopPropagation();
                                e.preventDefault();
                                setVisible(true);
                                setRecord(record);
                                null == ellipsisWithTooltipRef || null == (_ellipsisWithTooltipRef_current = ellipsisWithTooltipRef.current) || _ellipsisWithTooltipRef_current.setPopoverVisible(false);
                            },
                            children: text
                        })
                    }),
                    index < arr.length - 1 ? /*#__PURE__*/ jsx("span", {
                        style: {
                            marginRight: 4,
                            color: '#aaa'
                        },
                        children: ","
                    }) : null
                ]
            }, "".concat(record[fieldNames.value], "_").concat(index));
        });
    const renderWithoutTableFieldResourceProvider = ()=>/*#__PURE__*/ jsx(WithoutTableFieldResource.Provider, {
            value: true,
            children: /*#__PURE__*/ jsx(FormProvider, {
                children: /*#__PURE__*/ jsx(RecursionField, {
                    schema: fieldSchema,
                    onlyRenderProperties: true,
                    filterProperties: (s)=>'RecordPicker.Viewer' === s['x-component']
                })
            })
        });
    const renderRecordProvider = ()=>{
        var _fieldSchema_xcollectionfield;
        const collectionFieldNames = null == fieldSchema ? void 0 : null == (_fieldSchema_xcollectionfield = fieldSchema['x-collection-field']) ? void 0 : _fieldSchema_xcollectionfield.split('.');
        return collectionFieldNames && collectionFieldNames.length > 2 ? /*#__PURE__*/ jsx(RecordProvider, {
            record: record,
            parent: recordCtx[collectionFieldNames[1]],
            children: renderWithoutTableFieldResourceProvider()
        }) : /*#__PURE__*/ jsx(RecordProvider, {
            record: record,
            parent: recordCtx,
            children: renderWithoutTableFieldResourceProvider()
        });
    };
    var _collectionField_target;
    return collectionField ? /*#__PURE__*/ jsx("div", {
        children: /*#__PURE__*/ jsx(BlockAssociationContext.Provider, {
            value: "".concat(collectionField.collectionName, ".").concat(collectionField.name),
            children: /*#__PURE__*/ jsxs(CollectionProvider_deprecated, {
                name: null != (_collectionField_target = collectionField.target) ? _collectionField_target : collectionField.targetCollection,
                children: [
                    /*#__PURE__*/ jsx(EllipsisWithTooltip, {
                        ellipsis: ellipsis,
                        ref: ellipsisWithTooltipRef,
                        children: renderRecords()
                    }),
                    /*#__PURE__*/ jsx(ActionContextProvider, {
                        value: {
                            visible,
                            setVisible,
                            openMode: OpenMode.DEFAULT,
                            snapshot: 'snapshot' === collectionField.interface
                        },
                        children: renderRecordProvider()
                    })
                ]
            })
        })
    }) : null;
}, {
    displayName: 'ReadPrettyRecordPicker'
});
export { ReadPrettyRecordPicker };
