'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { dequal } from 'dequal/lite';
import { formatAdminURL, wordBoundariesRegex } from 'payload/shared';
import * as qs from 'qs-esm';
import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
import { AddNewRelation } from '../../elements/AddNewRelation/index.js';
import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js';
import { useListDrawer } from '../../elements/ListDrawer/index.js';
import { ReactSelect } from '../../elements/ReactSelect/index.js';
import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
import { FieldDescription } from '../../fields/FieldDescription/index.js';
import { FieldError } from '../../fields/FieldError/index.js';
import { FieldLabel } from '../../fields/FieldLabel/index.js';
import { useDebouncedCallback } from '../../hooks/useDebouncedCallback.js';
import { useEffectEvent } from '../../hooks/useEffectEvent.js';
import { useQueue } from '../../hooks/useQueue.js';
import { useAuth } from '../../providers/Auth/index.js';
import { useConfig } from '../../providers/Config/index.js';
import { useDocumentEvents } from '../../providers/DocumentEvents/index.js';
import { useLocale } from '../../providers/Locale/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { sanitizeFilterOptionsQuery } from '../../utilities/sanitizeFilterOptionsQuery.js';
import { fieldBaseClass } from '../shared/index.js';
import { createRelationMap } from './createRelationMap.js';
import { findOptionsByValue } from './findOptionsByValue.js';
import { optionsReducer } from './optionsReducer.js';
import './index.scss';
import { MultiValueLabel } from './select-components/MultiValueLabel/index.js';
import { SingleValue } from './select-components/SingleValue/index.js';
const baseClass = 'relationship';
export const RelationshipInput = (props)=>{
    const { AfterInput, allowCreate = true, allowEdit = true, appearance = 'select', BeforeInput, className, description, Description, Error, filterOptions, formatDisplayedOptions, hasMany, initialValue, isSortable = true, label, Label, localized, maxResultsPerRequest = 10, onChange, path, placeholder, readOnly, relationTo, required, showError, sortOptions, style, value } = props;
    const { config, getEntityConfig } = useConfig();
    const { routes: { api }, serverURL } = config;
    const { i18n, t } = useTranslation();
    const { permissions } = useAuth();
    const { code: locale } = useLocale();
    const [currentlyOpenRelationship, setCurrentlyOpenRelationship] = useState({
        id: undefined,
        collectionSlug: undefined,
        hasReadPermission: false
    });
    const [lastFullyLoadedRelation, setLastFullyLoadedRelation] = useState(-1);
    const [lastLoadedPage, setLastLoadedPage] = useState({});
    const [errorLoading, setErrorLoading] = useState('');
    const [search, setSearch] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [enableWordBoundarySearch, setEnableWordBoundarySearch] = useState(false);
    const [menuIsOpen, setMenuIsOpen] = useState(false);
    const hasLoadedFirstPageRef = useRef(false);
    const { queueTask } = useQueue();
    const [options, dispatchOptions] = useReducer(optionsReducer, []);
    const valueRef = useRef(value);
    const [DocumentDrawer, , { drawerSlug, isDrawerOpen, openDrawer }] = useDocumentDrawer({
        id: currentlyOpenRelationship.id,
        collectionSlug: currentlyOpenRelationship.collectionSlug
    });
    // Filter selected values from displaying in the list drawer
    const listDrawerFilterOptions = useMemo(()=>{
        let newFilterOptions = filterOptions;
        if (value) {
            const valuesByRelation = (hasMany === false ? [
                value
            ] : value).reduce((acc, val)=>{
                if (!acc[val.relationTo]) {
                    acc[val.relationTo] = [];
                }
                acc[val.relationTo].push(val.value);
                return acc;
            }, {});
            (Array.isArray(relationTo) ? relationTo : [
                relationTo
            ]).forEach((relation)=>{
                newFilterOptions = {
                    ...newFilterOptions || {},
                    [relation]: {
                        ...typeof filterOptions?.[relation] === 'object' ? filterOptions[relation] : {},
                        ...valuesByRelation[relation] ? {
                            id: {
                                not_in: valuesByRelation[relation]
                            }
                        } : {}
                    }
                };
            });
        }
        return newFilterOptions;
    }, [
        filterOptions,
        value,
        hasMany,
        relationTo
    ]);
    const [ListDrawer, , { closeDrawer: closeListDrawer, isDrawerOpen: isListDrawerOpen, openDrawer: openListDrawer }] = useListDrawer({
        collectionSlugs: relationTo,
        filterOptions: listDrawerFilterOptions
    });
    const onListSelect = useCallback(({ collectionSlug, doc })=>{
        if (hasMany) {
            onChange([
                ...Array.isArray(value) ? value : [],
                {
                    relationTo: collectionSlug,
                    value: doc.id
                }
            ]);
        } else if (hasMany === false) {
            onChange({
                relationTo: collectionSlug,
                value: doc.id
            });
        }
        closeListDrawer();
    }, [
        hasMany,
        onChange,
        closeListDrawer,
        value
    ]);
    const openDrawerWhenRelationChanges = useRef(false);
    const updateResults = useCallback(({ filterOptions, hasMany: hasManyArg, lastFullyLoadedRelation: lastFullyLoadedRelationArg, lastLoadedPage: lastLoadedPageArg, onSuccess, search: searchArg, sort, value: valueArg })=>{
        if (!permissions) {
            return;
        }
        queueTask(async ()=>{
            const lastFullyLoadedRelationToUse = typeof lastFullyLoadedRelationArg !== 'undefined' ? lastFullyLoadedRelationArg : -1;
            const relations = Array.isArray(relationTo) ? relationTo : [
                relationTo
            ];
            const relationsToFetch = lastFullyLoadedRelationToUse === -1 ? relations : relations.slice(lastFullyLoadedRelationToUse + 1);
            let resultsFetched = 0;
            const relationMap = createRelationMap(hasManyArg === true ? {
                hasMany: true,
                relationTo,
                value: valueArg
            } : {
                hasMany: false,
                relationTo,
                value: valueArg
            });
            if (!errorLoading) {
                await relationsToFetch.reduce(async (priorRelation, relation)=>{
                    const relationFilterOption = filterOptions?.[relation];
                    let lastLoadedPageToUse;
                    if (search !== searchArg) {
                        lastLoadedPageToUse = 1;
                    } else {
                        lastLoadedPageToUse = (lastLoadedPageArg[relation] || 0) + 1;
                    }
                    await priorRelation;
                    if (relationFilterOption === false) {
                        setLastFullyLoadedRelation(relations.indexOf(relation));
                        return Promise.resolve();
                    }
                    if (resultsFetched < 10) {
                        const collection = getEntityConfig({
                            collectionSlug: relation
                        });
                        const fieldToSearch = collection?.admin?.useAsTitle || 'id';
                        let fieldToSort = collection?.defaultSort || 'id';
                        if (typeof sortOptions === 'string') {
                            fieldToSort = sortOptions;
                        } else if (sortOptions?.[relation]) {
                            fieldToSort = sortOptions[relation];
                        }
                        const query = {
                            depth: 0,
                            draft: true,
                            limit: maxResultsPerRequest,
                            locale,
                            page: lastLoadedPageToUse,
                            select: {
                                [fieldToSearch]: true
                            },
                            sort: fieldToSort,
                            where: {
                                and: [
                                    {
                                        id: {
                                            not_in: relationMap[relation]
                                        }
                                    }
                                ]
                            }
                        };
                        if (searchArg) {
                            query.where.and.push({
                                [fieldToSearch]: {
                                    like: searchArg
                                }
                            });
                        }
                        if (relationFilterOption && typeof relationFilterOption !== 'boolean') {
                            query.where.and.push(relationFilterOption);
                        }
                        sanitizeFilterOptionsQuery(query.where);
                        const response = await fetch(formatAdminURL({
                            apiRoute: api,
                            path: `/${relation}`
                        }), {
                            body: qs.stringify(query),
                            credentials: 'include',
                            headers: {
                                'Accept-Language': i18n.language,
                                'Content-Type': 'application/x-www-form-urlencoded',
                                'X-Payload-HTTP-Method-Override': 'GET'
                            },
                            method: 'POST'
                        });
                        if (response.ok) {
                            const data = await response.json();
                            setLastLoadedPage((prevState)=>{
                                return {
                                    ...prevState,
                                    [relation]: lastLoadedPageToUse
                                };
                            });
                            if (!data.nextPage) {
                                setLastFullyLoadedRelation(relations.indexOf(relation));
                            }
                            if (data.docs.length > 0) {
                                resultsFetched += data.docs.length;
                                dispatchOptions({
                                    type: 'ADD',
                                    collection,
                                    config,
                                    docs: data.docs,
                                    i18n,
                                    sort
                                });
                            }
                        } else if (response.status === 403) {
                            setLastFullyLoadedRelation(relations.indexOf(relation));
                            dispatchOptions({
                                type: 'ADD',
                                collection,
                                config,
                                docs: [],
                                i18n,
                                ids: relationMap[relation],
                                sort
                            });
                        } else {
                            setErrorLoading(t('error:unspecific'));
                        }
                    }
                }, Promise.resolve());
                if (typeof onSuccess === 'function') {
                    onSuccess();
                }
            }
        });
    }, [
        permissions,
        queueTask,
        relationTo,
        errorLoading,
        search,
        getEntityConfig,
        sortOptions,
        maxResultsPerRequest,
        locale,
        api,
        i18n,
        config,
        t
    ]);
    const updateSearch = useDebouncedCallback(({ hasMany: hasManyArg, search: searchArg, value })=>{
        updateResultsEffectEvent({
            filterOptions,
            lastLoadedPage: {},
            onSuccess: ()=>{
                setIsLoading(false);
            },
            search: searchArg,
            sort: true,
            ...hasManyArg === true ? {
                hasMany: hasManyArg,
                value
            } : {
                hasMany: hasManyArg,
                value
            }
        });
        setSearch(searchArg);
    }, 300);
    const handleInputChange = useCallback((options)=>{
        if (search !== options.search) {
            setIsLoading(true);
            setLastLoadedPage({});
            updateSearch(options);
        }
    }, [
        search,
        updateSearch
    ]);
    const handleValueChange = useEffectEvent(({ hasMany: hasManyArg, value })=>{
        const relationMap = createRelationMap(hasManyArg === true ? {
            hasMany: hasManyArg,
            relationTo,
            value
        } : {
            hasMany: hasManyArg,
            relationTo,
            value
        });
        void Object.entries(relationMap).reduce(async (priorRelation, [relation, ids])=>{
            await priorRelation;
            const idsToLoad = ids.filter((id)=>{
                return !options.find((optionGroup)=>optionGroup?.options?.find((option)=>option.value === id && option.relationTo === relation));
            });
            if (idsToLoad.length > 0) {
                const collection = getEntityConfig({
                    collectionSlug: relation
                });
                const fieldToSelect = collection?.admin?.useAsTitle || 'id';
                const query = {
                    depth: 0,
                    draft: true,
                    limit: idsToLoad.length,
                    locale,
                    select: {
                        [fieldToSelect]: true
                    },
                    where: {
                        id: {
                            in: idsToLoad
                        }
                    }
                };
                if (!errorLoading) {
                    const response = await fetch(formatAdminURL({
                        apiRoute: api,
                        path: `/${relation}`
                    }), {
                        body: qs.stringify(query),
                        credentials: 'include',
                        headers: {
                            'Accept-Language': i18n.language,
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'X-Payload-HTTP-Method-Override': 'GET'
                        },
                        method: 'POST'
                    });
                    let docs = [];
                    if (response.ok) {
                        const data = await response.json();
                        docs = data.docs;
                    }
                    dispatchOptions({
                        type: 'ADD',
                        collection,
                        config,
                        docs,
                        i18n,
                        ids: idsToLoad,
                        sort: true
                    });
                }
            }
        }, Promise.resolve());
    });
    const { mostRecentUpdate } = useDocumentEvents();
    const handleDocumentUpdateEvent = useEffectEvent((mostRecentUpdate)=>{
        if (!value) {
            return false;
        }
        const docID = mostRecentUpdate.doc.id;
        let isMatchingUpdate = false;
        if (mostRecentUpdate.operation === 'update') {
            if (hasMany === true) {
                const currentValue = Array.isArray(value) ? value : [
                    value
                ];
                isMatchingUpdate = currentValue.some((option)=>{
                    return option.value === docID && option.relationTo === mostRecentUpdate.entitySlug;
                });
            } else if (hasMany === false) {
                isMatchingUpdate = value?.value === docID && value?.relationTo === mostRecentUpdate.entitySlug;
            }
        } else if (mostRecentUpdate.operation === 'create') {
            // "Create New" drawer operations on the same level as this drawer should
            // set the value to the newly created document.
            // See test "should create document within document drawer > has one"
            isMatchingUpdate = mostRecentUpdate.drawerSlug === drawerSlug;
        }
        if (!isMatchingUpdate) {
            return;
        }
        const collectionConfig = getEntityConfig({
            collectionSlug: mostRecentUpdate.entitySlug
        });
        dispatchOptions({
            type: 'UPDATE',
            collection: collectionConfig,
            config,
            doc: mostRecentUpdate.doc,
            i18n
        });
        if (hasMany) {
            const currentValue = value ? Array.isArray(value) ? value : [
                value
            ] : [];
            const valuesToSet = currentValue.map((option)=>{
                return {
                    relationTo: option.value === docID ? mostRecentUpdate.entitySlug : option.relationTo,
                    value: option.value
                };
            });
            onChange(valuesToSet);
        } else if (hasMany === false) {
            onChange({
                relationTo: mostRecentUpdate.entitySlug,
                value: docID
            });
        }
    });
    /**
   * Listen to document update events. If you edit a related document from a drawer and save it, this event
   * will be triggered. We then need up update the label of this relationship input, as the useAsLabel field could have changed.
   *
   * We listen to this event instead of using the onSave callback on the document drawer, as the onSave callback is not triggered
   * when you save a document from a drawer opened by a *different* relationship (or any other) field.
   */ useEffect(()=>{
        if (mostRecentUpdate) {
            handleDocumentUpdateEvent(mostRecentUpdate);
        }
    }, [
        mostRecentUpdate
    ]);
    const onDuplicate = useCallback((args)=>{
        dispatchOptions({
            type: 'ADD',
            collection: args.collectionConfig,
            config,
            docs: [
                args.doc
            ],
            i18n,
            sort: true
        });
        if (hasMany) {
            onChange(value ? value.concat({
                relationTo: args.collectionConfig.slug,
                value: args.doc.id
            }) : null);
        } else if (hasMany === false) {
            onChange({
                relationTo: args.collectionConfig.slug,
                value: args.doc.id
            });
        }
    }, [
        i18n,
        config,
        hasMany,
        onChange,
        value
    ]);
    const onDelete = useCallback((args)=>{
        dispatchOptions({
            id: args.id,
            type: 'REMOVE',
            collection: args.collectionConfig,
            config,
            i18n
        });
        if (hasMany) {
            onChange(value ? value.filter((option)=>{
                return option.value !== args.id;
            }) : null);
        } else {
            onChange(null);
        }
        return;
    }, [
        i18n,
        config,
        hasMany,
        onChange,
        value
    ]);
    const filterOption = useCallback((item, searchFilter)=>{
        if (!searchFilter) {
            return true;
        }
        const r = wordBoundariesRegex(searchFilter || '');
        // breaking the labels to search into smaller parts increases performance
        const breakApartThreshold = 250;
        let labelString = String(item.label);
        // strings less than breakApartThreshold length won't be chunked
        while(labelString.length > breakApartThreshold){
            // slicing by the next space after the length of the search input prevents slicing the string up by partial words
            const indexOfSpace = labelString.indexOf(' ', searchFilter.length);
            if (r.test(labelString.slice(0, indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1))) {
                return true;
            }
            labelString = labelString.slice(indexOfSpace === -1 ? searchFilter.length : indexOfSpace + 1);
        }
        return r.test(labelString.slice(-breakApartThreshold));
    }, []);
    const onDocumentOpen = useCallback(({ id, collectionSlug, hasReadPermission, openInNewTab })=>{
        if (openInNewTab) {
            if (hasReadPermission && id && collectionSlug) {
                const docUrl = formatAdminURL({
                    adminRoute: config.routes.admin,
                    path: `/collections/${collectionSlug}/${id}`,
                    serverURL
                });
                window.open(docUrl, '_blank');
            }
        } else {
            openDrawerWhenRelationChanges.current = true;
            setCurrentlyOpenRelationship({
                id,
                collectionSlug,
                hasReadPermission
            });
        }
    }, [
        config.routes.admin,
        serverURL
    ]);
    const updateResultsEffectEvent = useEffectEvent((args)=>{
        return updateResults(args);
    });
    // When (`relationTo` || `filterOptions` || `locale`) changes, reset component
    // Note - effect should not run on first run
    useEffect(()=>{
        // If the menu is open while filterOptions changes
        // due to latency of form state and fast clicking into this field,
        // re-fetch options
        if (hasLoadedFirstPageRef.current && menuIsOpen) {
            setIsLoading(true);
            void updateResultsEffectEvent({
                filterOptions,
                lastLoadedPage: {},
                onSuccess: ()=>{
                    hasLoadedFirstPageRef.current = true;
                    setIsLoading(false);
                },
                ...hasMany === true ? {
                    hasMany,
                    value: valueRef.current
                } : {
                    hasMany,
                    value: valueRef.current
                }
            });
        }
        // If the menu is not open, still reset the field state
        // because we need to get new options next time the menu opens
        dispatchOptions({
            type: 'CLEAR',
            exemptValues: valueRef.current
        });
        setLastFullyLoadedRelation(-1);
        setLastLoadedPage({});
    }, [
        relationTo,
        filterOptions,
        locale,
        path,
        menuIsOpen,
        hasMany
    ]);
    const prevValue = useRef(value);
    const isFirstRenderRef = useRef(true);
    // ///////////////////////////////////
    // Ensure we have an option for each value
    // ///////////////////////////////////
    useEffect(()=>{
        if (isFirstRenderRef.current || !dequal(value, prevValue.current)) {
            handleValueChange(hasMany === true ? {
                hasMany,
                value
            } : {
                hasMany,
                value
            });
        }
        isFirstRenderRef.current = false;
        prevValue.current = value;
    }, [
        value,
        hasMany
    ]);
    // Determine if we should switch to word boundary search
    useEffect(()=>{
        const relations = Array.isArray(relationTo) ? relationTo : [
            relationTo
        ];
        const isIdOnly = relations.reduce((idOnly, relation)=>{
            const collection = getEntityConfig({
                collectionSlug: relation
            });
            const fieldToSearch = collection?.admin?.useAsTitle || 'id';
            return fieldToSearch === 'id' && idOnly;
        }, true);
        setEnableWordBoundarySearch(!isIdOnly);
    }, [
        relationTo,
        getEntityConfig
    ]);
    useEffect(()=>{
        if (openDrawerWhenRelationChanges.current) {
            openDrawer();
            openDrawerWhenRelationChanges.current = false;
        }
    }, [
        openDrawer,
        currentlyOpenRelationship
    ]);
    useEffect(()=>{
        // needed to sync the ref value when other fields influence the value
        // i.e. when a drawer is opened and the value is set
        valueRef.current = value;
    }, [
        value
    ]);
    const valueToRender = findOptionsByValue({
        allowEdit,
        options,
        value
    });
    if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') {
        valueToRender.value = null;
    }
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            fieldBaseClass,
            baseClass,
            className,
            showError && 'error',
            errorLoading && 'error-loading',
            readOnly && `${baseClass}--read-only`,
            !readOnly && allowCreate && `${baseClass}--allow-create`
        ].filter(Boolean).join(' '),
        id: `field-${path.replace(/\./g, '__')}`,
        style: style,
        children: [
            /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                CustomComponent: Label,
                Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
                    label: label,
                    localized: localized,
                    path: path,
                    required: required
                }, void 0, false, {
                    fileName: "src/fields/Relationship/Input.tsx",
                    lineNumber: 767,
                    columnNumber: 11
                }, void 0)
            }, void 0, false, {
                fileName: "src/fields/Relationship/Input.tsx",
                lineNumber: 764,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${fieldBaseClass}__wrap`,
                children: [
                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                        CustomComponent: Error,
                        Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
                            path: path,
                            showError: showError
                        }, void 0, false, {
                            fileName: "src/fields/Relationship/Input.tsx",
                            lineNumber: 773,
                            columnNumber: 21
                        }, void 0)
                    }, void 0, false, {
                        fileName: "src/fields/Relationship/Input.tsx",
                        lineNumber: 771,
                        columnNumber: 9
                    }, this),
                    BeforeInput,
                    errorLoading ? /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__error-loading`,
                        children: errorLoading
                    }, void 0, false, {
                        fileName: "src/fields/Relationship/Input.tsx",
                        lineNumber: 777,
                        columnNumber: 11
                    }, this) : /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__wrap`,
                        children: [
                            /*#__PURE__*/ _jsxDEV(ReactSelect, {
                                backspaceRemovesValue: !(isDrawerOpen || isListDrawerOpen),
                                components: {
                                    MultiValueLabel,
                                    SingleValue,
                                    ...appearance !== 'select' && {
                                        DropdownIndicator: null
                                    }
                                },
                                customProps: {
                                    disableKeyDown: isDrawerOpen || isListDrawerOpen,
                                    disableMouseDown: isDrawerOpen || isListDrawerOpen,
                                    onDocumentOpen
                                },
                                disabled: readOnly || isDrawerOpen || isListDrawerOpen,
                                filterOption: enableWordBoundarySearch ? filterOption : undefined,
                                getOptionValue: (option)=>{
                                    if (!option) {
                                        return undefined;
                                    }
                                    return hasMany && Array.isArray(relationTo) ? `${option.relationTo}_${option.value}` : option.value;
                                },
                                isLoading: appearance === 'select' && isLoading,
                                isMulti: hasMany,
                                isSearchable: appearance === 'select',
                                isSortable: isSortable,
                                menuIsOpen: appearance === 'select' ? menuIsOpen : false,
                                onChange: !readOnly ? (selected)=>{
                                    if (hasMany) {
                                        if (selected === null) {
                                            valueRef.current = [];
                                            onChange([]);
                                        } else {
                                            valueRef.current = selected;
                                            onChange(selected);
                                        }
                                    } else if (hasMany === false) {
                                        if (selected === null) {
                                            valueRef.current = null;
                                            onChange(null);
                                        } else {
                                            valueRef.current = selected;
                                            onChange(selected);
                                        }
                                    }
                                } : undefined,
                                onInputChange: (newSearch)=>handleInputChange({
                                        search: newSearch,
                                        ...hasMany === true ? {
                                            hasMany,
                                            value
                                        } : {
                                            hasMany,
                                            value
                                        }
                                    }),
                                onMenuClose: ()=>{
                                    setMenuIsOpen(false);
                                },
                                onMenuOpen: ()=>{
                                    if (appearance === 'drawer') {
                                        openListDrawer();
                                    } else if (appearance === 'select') {
                                        setMenuIsOpen(true);
                                        if (!hasLoadedFirstPageRef.current) {
                                            setIsLoading(true);
                                            updateResultsEffectEvent({
                                                filterOptions,
                                                lastLoadedPage: {},
                                                onSuccess: ()=>{
                                                    hasLoadedFirstPageRef.current = true;
                                                    setIsLoading(false);
                                                },
                                                ...hasMany === true ? {
                                                    hasMany,
                                                    value
                                                } : {
                                                    hasMany,
                                                    value
                                                }
                                            });
                                        }
                                    }
                                },
                                onMenuScrollToBottom: ()=>{
                                    setIsLoading(true);
                                    updateResultsEffectEvent({
                                        filterOptions,
                                        lastFullyLoadedRelation,
                                        lastLoadedPage,
                                        onSuccess: ()=>{
                                            setIsLoading(false);
                                        },
                                        search,
                                        sort: false,
                                        ...hasMany === true ? {
                                            hasMany,
                                            value: initialValue
                                        } : {
                                            hasMany,
                                            value: initialValue
                                        }
                                    });
                                },
                                options: typeof formatDisplayedOptions === 'function' ? formatDisplayedOptions(options) : options,
                                placeholder: placeholder,
                                showError: showError,
                                value: valueToRender ?? null
                            }, void 0, false, {
                                fileName: "src/fields/Relationship/Input.tsx",
                                lineNumber: 780,
                                columnNumber: 13
                            }, this),
                            !readOnly && allowCreate && /*#__PURE__*/ _jsxDEV(AddNewRelation, {
                                path: path,
                                relationTo: relationTo,
                                ...hasMany === true ? {
                                    hasMany,
                                    onChange,
                                    value
                                } : {
                                    hasMany,
                                    onChange,
                                    value
                                }
                            }, void 0, false, {
                                fileName: "src/fields/Relationship/Input.tsx",
                                lineNumber: 906,
                                columnNumber: 15
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/fields/Relationship/Input.tsx",
                        lineNumber: 779,
                        columnNumber: 11
                    }, this),
                    AfterInput,
                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                        CustomComponent: Description,
                        Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
                            description: description,
                            path: path
                        }, void 0, false, {
                            fileName: "src/fields/Relationship/Input.tsx",
                            lineNumber: 927,
                            columnNumber: 21
                        }, void 0)
                    }, void 0, false, {
                        fileName: "src/fields/Relationship/Input.tsx",
                        lineNumber: 925,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/fields/Relationship/Input.tsx",
                lineNumber: 770,
                columnNumber: 7
            }, this),
            currentlyOpenRelationship.collectionSlug && currentlyOpenRelationship.hasReadPermission && /*#__PURE__*/ _jsxDEV(DocumentDrawer, {
                onDelete: onDelete,
                onDuplicate: onDuplicate
            }, void 0, false, {
                fileName: "src/fields/Relationship/Input.tsx",
                lineNumber: 931,
                columnNumber: 9
            }, this),
            appearance === 'drawer' && !readOnly && /*#__PURE__*/ _jsxDEV(ListDrawer, {
                allowCreate: allowCreate,
                enableRowSelections: false,
                onSelect: onListSelect
            }, void 0, false, {
                fileName: "src/fields/Relationship/Input.tsx",
                lineNumber: 934,
                columnNumber: 9
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/fields/Relationship/Input.tsx",
        lineNumber: 749,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=Input.js.map