'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import { hoistQueryParamsToAnd, transformColumnsToPreferences } from 'payload/shared';
import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
import { Pill } from '../../elements/Pill/index.js';
import { useEffectEvent } from '../../hooks/useEffectEvent.js';
import { ChevronIcon } from '../../icons/Chevron/index.js';
import { useAuth } from '../../providers/Auth/index.js';
import { useConfig } from '../../providers/Config/index.js';
import { ListQueryProvider } from '../../providers/ListQuery/index.js';
import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
import { TableColumnsProvider } from '../../providers/TableColumns/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { AnimateHeight } from '../AnimateHeight/index.js';
import { ColumnSelector } from '../ColumnSelector/index.js';
import { useDocumentDrawer } from '../DocumentDrawer/index.js';
import { RelationshipProvider } from '../Table/RelationshipProvider/index.js';
import { AddNewButton } from './AddNewButton.js';
import { DrawerLink } from './cells/DrawerLink/index.js';
import { RelationshipTablePagination } from './Pagination.js';
import './index.scss';
const baseClass = 'relationship-table';
export const RelationshipTable = (props)=>{
    const { AfterInput, allowCreate = true, BeforeInput, disableTable = false, field, fieldPath, filterOptions, initialData: initialDataFromProps, initialDrawerData, Label, parent, relationTo } = props;
    const [Table, setTable] = useState(null);
    const { config, getEntityConfig } = useConfig();
    const { i18n, t } = useTranslation();
    const [query, setQuery] = useState();
    const [openColumnSelector, setOpenColumnSelector] = useState(false);
    const [collectionConfig] = useState(()=>getEntityConfig({
            collectionSlug: relationTo
        }));
    const isPolymorphic = Array.isArray(relationTo);
    const [selectedCollection, setSelectedCollection] = useState(isPolymorphic ? undefined : relationTo);
    const { permissions } = useAuth();
    const openDrawerWhenRelationChanges = useRef(false);
    const [currentDrawerID, setCurrentDrawerID] = useState(undefined);
    const [DocumentDrawer, , { closeDrawer, isDrawerOpen, openDrawer }] = useDocumentDrawer({
        id: currentDrawerID,
        collectionSlug: selectedCollection
    });
    const [isLoadingTable, setIsLoadingTable] = useState(!disableTable);
    const [data, setData] = useState(()=>initialDataFromProps ? {
            ...initialDataFromProps,
            docs: Array.isArray(initialDataFromProps.docs) ? initialDataFromProps.docs.reduce((acc, doc)=>{
                if (typeof doc === 'string' || typeof doc === 'number') {
                    return [
                        ...acc,
                        {
                            id: doc
                        }
                    ];
                }
                return [
                    ...acc,
                    doc
                ];
            }, []) : []
        } : undefined);
    const [columnState, setColumnState] = useState();
    const { getTableState } = useServerFunctions();
    const renderTable = useCallback(async (data)=>{
        const newQuery = {
            limit: field?.defaultLimit || collectionConfig?.admin?.pagination?.defaultLimit,
            sort: field.defaultSort || collectionConfig?.defaultSort,
            ...query || {},
            where: {
                ...query?.where || {}
            }
        };
        if (filterOptions) {
            newQuery.where = hoistQueryParamsToAnd(newQuery.where, filterOptions);
        }
        // map columns from string[] to CollectionPreferences['columns']
        const defaultColumns = field.admin.defaultColumns ? field.admin.defaultColumns.map((accessor)=>({
                accessor,
                active: true
            })) : undefined;
        const renderRowTypes = typeof field.admin.disableRowTypes === 'boolean' ? !field.admin.disableRowTypes : Array.isArray(relationTo);
        const { data: newData, state: newColumnState, Table: NewTable } = await getTableState({
            collectionSlug: relationTo,
            columns: transformColumnsToPreferences(query?.columns) || defaultColumns,
            data,
            enableRowSelections: false,
            orderableFieldName: !field.orderable || Array.isArray(field.collection) ? undefined : `_${field.collection}_${field.name}_order`,
            parent,
            query: newQuery,
            renderRowTypes,
            tableAppearance: 'condensed'
        });
        setData(newData);
        setTable(NewTable);
        setColumnState(newColumnState);
        setIsLoadingTable(false);
    }, [
        field.defaultLimit,
        field.defaultSort,
        field.admin.defaultColumns,
        field.admin.disableRowTypes,
        field.collection,
        field.name,
        field.orderable,
        collectionConfig?.admin?.pagination?.defaultLimit,
        collectionConfig?.defaultSort,
        query,
        filterOptions,
        getTableState,
        relationTo,
        parent
    ]);
    const handleTableRender = useEffectEvent((query, disableTable)=>{
        if (!disableTable && (!Table || query)) {
            void renderTable();
        }
    });
    useEffect(()=>{
        handleTableRender(query, disableTable);
    }, [
        query,
        disableTable
    ]);
    const onDrawerSave = useCallback(({ doc, operation })=>{
        if (operation === 'create') {
            closeDrawer();
        }
        const foundDocIndex = data?.docs?.findIndex((d)=>d.id === doc.id);
        const withNewOrUpdatedData = {
            docs: []
        };
        if (foundDocIndex !== -1) {
            const newDocs = [
                ...data.docs
            ];
            newDocs[foundDocIndex] = doc;
            withNewOrUpdatedData.docs = newDocs;
        } else {
            withNewOrUpdatedData.docs = [
                doc,
                ...data.docs
            ];
        }
        void renderTable(withNewOrUpdatedData);
    }, [
        data?.docs,
        renderTable,
        closeDrawer
    ]);
    const onDrawerDelete = useCallback((args)=>{
        const newDocs = data.docs.filter((doc)=>doc.id !== args.id);
        void renderTable({
            ...data,
            docs: newDocs
        });
        setCurrentDrawerID(undefined);
    }, [
        data,
        renderTable
    ]);
    const onDrawerOpen = useCallback((id)=>{
        openDrawerWhenRelationChanges.current = true;
        if (id) {
            setCurrentDrawerID(id);
        } else {
            setCurrentDrawerID(undefined);
        }
    }, []);
    useEffect(()=>{
        if (openDrawerWhenRelationChanges.current) {
            openDrawerWhenRelationChanges.current = false;
            openDrawer();
        }
    }, [
        openDrawer
    ]);
    useEffect(()=>{
        if (!isDrawerOpen) {
            setCurrentDrawerID(undefined);
        }
    }, [
        isDrawerOpen
    ]);
    const canCreate = allowCreate !== false && permissions?.collections?.[isPolymorphic ? relationTo[0] : relationTo]?.create;
    useEffect(()=>{
        if (isPolymorphic && selectedCollection) {
            openDrawer();
        }
    }, [
        selectedCollection,
        openDrawer,
        isPolymorphic
    ]);
    useEffect(()=>{
        if (isPolymorphic && !isDrawerOpen && selectedCollection) {
            setSelectedCollection(undefined);
        }
    }, // eslint-disable-next-line react-compiler/react-compiler -- TODO: fix
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [
        isDrawerOpen
    ]);
    const memoizedListQuery = React.useMemo(()=>({
            columns: transformColumnsToPreferences(columnState)?.map(({ accessor })=>accessor),
            limit: field.defaultLimit ?? collectionConfig?.admin?.pagination?.defaultLimit,
            sort: field.defaultSort ?? collectionConfig?.defaultSort
        }), [
        columnState,
        field,
        collectionConfig
    ]);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: baseClass,
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__header`,
                children: [
                    Label,
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__actions`,
                        children: [
                            /*#__PURE__*/ _jsxDEV(AddNewButton, {
                                allowCreate: allowCreate !== false,
                                baseClass: baseClass,
                                buttonStyle: "none",
                                className: `${baseClass}__add-new${isPolymorphic ? '-polymorphic' : ' doc-drawer__toggler'}`,
                                collections: config.collections,
                                i18n: i18n,
                                icon: isPolymorphic ? 'plus' : undefined,
                                label: i18n.t('fields:addNew'),
                                onClick: isPolymorphic ? setSelectedCollection : openDrawer,
                                permissions: permissions,
                                relationTo: relationTo
                            }, void 0, false, {
                                fileName: "src/elements/RelationshipTable/index.tsx",
                                lineNumber: 295,
                                columnNumber: 11
                            }, this),
                            /*#__PURE__*/ _jsxDEV(Pill, {
                                "aria-controls": `${baseClass}-columns`,
                                "aria-expanded": openColumnSelector,
                                className: `${baseClass}__toggle-columns ${openColumnSelector ? `${baseClass}__buttons-active` : ''}`,
                                icon: /*#__PURE__*/ _jsxDEV(ChevronIcon, {
                                    direction: openColumnSelector ? 'up' : 'down'
                                }, void 0, false, {
                                    fileName: "src/elements/RelationshipTable/index.tsx",
                                    lineNumber: 314,
                                    columnNumber: 19
                                }, void 0),
                                onClick: ()=>setOpenColumnSelector(!openColumnSelector),
                                pillStyle: "light",
                                size: "small",
                                children: t('general:columns')
                            }, void 0, false, {
                                fileName: "src/elements/RelationshipTable/index.tsx",
                                lineNumber: 308,
                                columnNumber: 11
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/RelationshipTable/index.tsx",
                        lineNumber: 294,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/RelationshipTable/index.tsx",
                lineNumber: 292,
                columnNumber: 7
            }, this),
            BeforeInput,
            isLoadingTable ? /*#__PURE__*/ _jsxDEV("p", {
                children: t('general:loading')
            }, void 0, false, {
                fileName: "src/elements/RelationshipTable/index.tsx",
                lineNumber: 325,
                columnNumber: 9
            }, this) : /*#__PURE__*/ _jsxDEV(Fragment, {
                children: [
                    data?.docs && data.docs.length === 0 && /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__no-results`,
                        children: [
                            /*#__PURE__*/ _jsxDEV("p", {
                                children: i18n.t('general:noResults', {
                                    label: isPolymorphic ? i18n.t('general:documents') : getTranslation(collectionConfig?.labels?.plural, i18n)
                                })
                            }, void 0, false, {
                                fileName: "src/elements/RelationshipTable/index.tsx",
                                lineNumber: 330,
                                columnNumber: 15
                            }, this),
                            /*#__PURE__*/ _jsxDEV(AddNewButton, {
                                allowCreate: canCreate,
                                baseClass: baseClass,
                                collections: config.collections,
                                i18n: i18n,
                                label: i18n.t('general:createNewLabel', {
                                    label: isPolymorphic ? i18n.t('general:document') : getTranslation(collectionConfig?.labels?.singular, i18n)
                                }),
                                onClick: isPolymorphic ? setSelectedCollection : openDrawer,
                                permissions: permissions,
                                relationTo: relationTo
                            }, void 0, false, {
                                fileName: "src/elements/RelationshipTable/index.tsx",
                                lineNumber: 337,
                                columnNumber: 15
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/elements/RelationshipTable/index.tsx",
                        lineNumber: 329,
                        columnNumber: 13
                    }, this),
                    data?.docs && data.docs.length > 0 && /*#__PURE__*/ _jsxDEV(RelationshipProvider, {
                        children: /*#__PURE__*/ _jsxDEV(ListQueryProvider, {
                            data: data,
                            modifySearchParams: false,
                            onQueryChange: setQuery,
                            orderableFieldName: !field.orderable || Array.isArray(field.collection) ? undefined : `_${field.collection}_${fieldPath.replaceAll('.', '_')}_order`,
                            query: memoizedListQuery,
                            children: /*#__PURE__*/ _jsxDEV(TableColumnsProvider, {
                                collectionSlug: isPolymorphic ? relationTo[0] : relationTo,
                                columnState: columnState,
                                LinkedCellOverride: /*#__PURE__*/ _jsxDEV(DrawerLink, {
                                    currentDrawerID: currentDrawerID,
                                    onDrawerOpen: onDrawerOpen
                                }, void 0, false, {
                                    fileName: "src/elements/RelationshipTable/index.tsx",
                                    lineNumber: 370,
                                    columnNumber: 21
                                }, void 0),
                                children: [
                                    /*#__PURE__*/ _jsxDEV(AnimateHeight, {
                                        className: `${baseClass}__columns`,
                                        height: openColumnSelector ? 'auto' : 0,
                                        id: `${baseClass}-columns`,
                                        children: /*#__PURE__*/ _jsxDEV("div", {
                                            className: `${baseClass}__columns-inner`,
                                            children: collectionConfig && /*#__PURE__*/ _jsxDEV(ColumnSelector, {
                                                collectionSlug: collectionConfig.slug
                                            }, void 0, false, {
                                                fileName: "src/elements/RelationshipTable/index.tsx",
                                                lineNumber: 380,
                                                columnNumber: 25
                                            }, this)
                                        }, void 0, false, {
                                            fileName: "src/elements/RelationshipTable/index.tsx",
                                            lineNumber: 378,
                                            columnNumber: 21
                                        }, this)
                                    }, void 0, false, {
                                        fileName: "src/elements/RelationshipTable/index.tsx",
                                        lineNumber: 373,
                                        columnNumber: 19
                                    }, this),
                                    Table,
                                    /*#__PURE__*/ _jsxDEV(RelationshipTablePagination, {}, void 0, false, {
                                        fileName: "src/elements/RelationshipTable/index.tsx",
                                        lineNumber: 385,
                                        columnNumber: 19
                                    }, this)
                                ]
                            }, void 0, true, {
                                fileName: "src/elements/RelationshipTable/index.tsx",
                                lineNumber: 366,
                                columnNumber: 17
                            }, this)
                        }, void 0, false, {
                            fileName: "src/elements/RelationshipTable/index.tsx",
                            lineNumber: 355,
                            columnNumber: 15
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/RelationshipTable/index.tsx",
                        lineNumber: 354,
                        columnNumber: 13
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/RelationshipTable/index.tsx",
                lineNumber: 327,
                columnNumber: 9
            }, this),
            AfterInput,
            /*#__PURE__*/ _jsxDEV(DocumentDrawer, {
                initialData: initialDrawerData,
                onDelete: onDrawerDelete,
                onSave: onDrawerSave
            }, void 0, false, {
                fileName: "src/elements/RelationshipTable/index.tsx",
                lineNumber: 393,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/RelationshipTable/index.tsx",
        lineNumber: 291,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map