'use client';
import * as facelessUIImport from '@faceless-ui/modal';
import { getTranslation } from '@payloadcms/translations';
import React, { useCallback, useEffect, useReducer, useState } from 'react';
import Label from '../../forms/Label/index.js';
import usePayloadAPI from '../../hooks/usePayloadAPI.js';
import { useUseTitleField } from '../../hooks/useUseAsTitle.js';
import { X } from '../../icons/X/index.js';
import { useAuth } from '../../providers/Auth/index.js';
import { useComponentMap } from '../../providers/ComponentMapProvider/index.js';
import { useConfig } from '../../providers/Config/index.js';
import { ListInfoProvider } from '../../providers/ListInfo/index.js';
import { usePreferences } from '../../providers/Preferences/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { useDocumentDrawer } from '../DocumentDrawer/index.js';
import { LoadingOverlay } from '../Loading/index.js';
import Pill from '../Pill/index.js';
import ReactSelect from '../ReactSelect/index.js';
import { TableColumnsProvider } from '../TableColumns/index.js';
import ViewDescription from '../ViewDescription/index.js';
import { baseClass } from './index.js';
const hoistQueryParamsToAnd = (where, queryParams)=>{
    if ('and' in where) {
        where.and.push(queryParams);
    } else if ('or' in where) {
        where = {
            and: [
                where,
                queryParams
            ]
        };
    } else {
        where = {
            and: [
                where,
                queryParams
            ]
        };
    }
    return where;
};
export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, filterOptions, onSelect, selectedCollection })=>{
    const { useModal } = facelessUIImport;
    const { i18n, t } = useTranslation();
    const { permissions } = useAuth();
    const { setPreference } = usePreferences();
    const { closeModal, isModalOpen } = useModal();
    const [limit, setLimit] = useState();
    const [sort, setSort] = useState(null);
    const [page, setPage] = useState(1);
    const [where, setWhere] = useState(null);
    const [search, setSearch] = useState('');
    const { componentMap } = useComponentMap();
    const { collections, routes: { api }, serverURL } = useConfig();
    const enabledCollectionConfigs = collections.filter(({ slug })=>{
        return collectionSlugs.includes(slug);
    });
    const [selectedCollectionConfig, setSelectedCollectionConfig] = useState(()=>{
        return enabledCollectionConfigs.find(({ slug })=>slug === selectedCollection) || enabledCollectionConfigs?.[0];
    });
    const { List } = componentMap.collections?.[selectedCollectionConfig?.slug] || {};
    const [selectedOption, setSelectedOption] = useState(()=>selectedCollectionConfig ? {
            label: getTranslation(selectedCollectionConfig.labels.singular, i18n),
            value: selectedCollectionConfig.slug
        } : undefined);
    // const [fields, setFields] = useState<Field[]>(() => formatFields(selectedCollectionConfig))
    const titleField = useUseTitleField(selectedCollectionConfig);
    useEffect(()=>{
    // setFields(formatFields(selectedCollectionConfig))
    }, [
        selectedCollectionConfig
    ]);
    // allow external control of selected collection, same as the initial state logic above
    useEffect(()=>{
        if (selectedCollection) {
            // if passed a selection, find it and check if it's enabled
            const selectedConfig = enabledCollectionConfigs.find(({ slug })=>slug === selectedCollection) || enabledCollectionConfigs?.[0];
            setSelectedCollectionConfig(selectedConfig);
        }
    }, [
        selectedCollection,
        enabledCollectionConfigs,
        onSelect,
        t
    ]);
    const preferenceKey = `${selectedCollectionConfig.slug}-list`;
    // this is the 'create new' drawer
    const [DocumentDrawer, DocumentDrawerToggler, { drawerSlug: documentDrawerSlug }] = useDocumentDrawer({
        collectionSlug: selectedCollectionConfig.slug
    });
    useEffect(()=>{
        if (selectedOption) {
            setSelectedCollectionConfig(enabledCollectionConfigs.find(({ slug })=>selectedOption.value === slug));
        }
    }, [
        selectedOption,
        enabledCollectionConfigs
    ]);
    const collectionPermissions = permissions?.collections?.[selectedCollectionConfig?.slug];
    const hasCreatePermission = collectionPermissions?.create?.permission;
    // If modal is open, get active page of upload gallery
    const isOpen = isModalOpen(drawerSlug);
    const apiURL = isOpen ? `${serverURL}${api}/${selectedCollectionConfig.slug}` : null;
    const [cacheBust, dispatchCacheBust] = useReducer((state)=>state + 1, 0) // used to force a re-fetch even when apiURL is unchanged
    ;
    const [{ data, isError, isLoading: isLoadingList }, { setParams }] = usePayloadAPI(apiURL, {});
    const moreThanOneAvailableCollection = enabledCollectionConfigs.length > 1;
    useEffect(()=>{
        const { slug, admin: { listSearchableFields } = {}, versions } = selectedCollectionConfig;
        const params = {};
        let copyOfWhere = {
            ...where || {}
        };
        const filterOption = filterOptions?.[slug];
        if (filterOptions && typeof filterOption !== 'boolean') {
            copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, filterOption);
        }
        if (search) {
            const searchAsConditions = (listSearchableFields || [
                titleField?.name
            ]).map((fieldName)=>{
                return {
                    [fieldName]: {
                        like: search
                    }
                };
            }, []);
            if (searchAsConditions.length > 0) {
                const searchFilter = {
                    or: [
                        ...searchAsConditions
                    ]
                };
                copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, searchFilter);
            }
        }
        if (page) params.page = page;
        if (sort) params.sort = sort;
        if (cacheBust) params.cacheBust = cacheBust;
        if (copyOfWhere) params.where = copyOfWhere;
        if (versions?.drafts) params.draft = 'true';
        setParams(params);
    }, [
        page,
        sort,
        where,
        search,
        cacheBust,
        filterOptions,
        selectedCollectionConfig,
        t,
        setParams,
        titleField?.name
    ]);
    useEffect(()=>{
        const newPreferences = {
            limit,
            sort
        };
        void setPreference(preferenceKey, newPreferences, true);
    }, [
        sort,
        limit,
        setPreference,
        preferenceKey
    ]);
    const onCreateNew = useCallback(({ doc })=>{
        if (typeof onSelect === 'function') {
            onSelect({
                collectionSlug: selectedCollectionConfig.slug,
                docID: doc.id
            });
        }
        dispatchCacheBust();
        closeModal(documentDrawerSlug);
        closeModal(drawerSlug);
    }, [
        closeModal,
        documentDrawerSlug,
        drawerSlug,
        onSelect,
        selectedCollectionConfig
    ]);
    if (!selectedCollectionConfig || isError) {
        return null;
    }
    if (isLoadingList) {
        return /*#__PURE__*/ React.createElement(LoadingOverlay, null);
    }
    return /*#__PURE__*/ React.createElement(ListInfoProvider, {
        Header: /*#__PURE__*/ React.createElement("header", {
            className: `${baseClass}__header`
        }, /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__header-wrap`
        }, /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__header-content`
        }, /*#__PURE__*/ React.createElement("h2", {
            className: `${baseClass}__header-text`
        }, !customHeader ? getTranslation(selectedCollectionConfig?.labels?.plural, i18n) : customHeader), hasCreatePermission && /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
            className: `${baseClass}__create-new-button`
        }, /*#__PURE__*/ React.createElement(Pill, null, t('general:createNew')))), /*#__PURE__*/ React.createElement("button", {
            className: `${baseClass}__header-close`,
            onClick: ()=>{
                closeModal(drawerSlug);
            },
            type: "button"
        }, /*#__PURE__*/ React.createElement(X, null))), selectedCollectionConfig?.admin?.description && /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__sub-header`
        }, /*#__PURE__*/ React.createElement(ViewDescription, {
            description: selectedCollectionConfig.admin.description
        })), moreThanOneAvailableCollection && /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__select-collection-wrap`
        }, /*#__PURE__*/ React.createElement(Label, {
            label: t('upload:selectCollectionToBrowse')
        }), /*#__PURE__*/ React.createElement(ReactSelect, {
            className: `${baseClass}__select-collection`,
            onChange: setSelectedOption,
            options: enabledCollectionConfigs.map((coll)=>({
                    label: getTranslation(coll.labels.singular, i18n),
                    value: coll.slug
                })),
            value: selectedOption
        }))),
        collectionSlug: selectedCollectionConfig.slug,
        data: data,
        handlePageChange: setPage,
        handlePerPageChange: setLimit,
        handleSearchChange: setSearch,
        handleSortChange: setSort,
        handleWhereChange: setWhere,
        hasCreatePermission: hasCreatePermission,
        limit: limit || selectedCollectionConfig?.admin?.pagination?.defaultLimit,
        modifySearchParams: false,
        newDocumentURL: null,
        setLimit: setLimit,
        setSort: setSort,
        titleField: titleField
    }, /*#__PURE__*/ React.createElement(TableColumnsProvider, {
        cellProps: [
            {
                className: `${baseClass}__first-cell`,
                link: false,
                onClick: ({ collectionSlug: rowColl, rowData })=>{
                    if (typeof onSelect === 'function') {
                        onSelect({
                            collectionSlug: rowColl,
                            docID: rowData.id
                        });
                    }
                }
            }
        ],
        collectionSlug: selectedCollectionConfig.slug,
        listPreferences: {}
    }, List, /*#__PURE__*/ React.createElement(DocumentDrawer, {
        onSave: onCreateNew
    })));
};

//# sourceMappingURL=DrawerContent.js.map