'use client';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
import { useModal } from '@faceless-ui/modal';
import { getTranslation } from '@payloadcms/translations';
import { extractID } from 'payload/shared';
import React from 'react';
import { useAuth } from '../../../../providers/Auth/index.js';
import { FolderProvider, useFolder } from '../../../../providers/Folders/index.js';
import { useRouteCache } from '../../../../providers/RouteCache/index.js';
import { useServerFunctions } from '../../../../providers/ServerFunctions/index.js';
import { useTranslation } from '../../../../providers/Translation/index.js';
import { Button } from '../../../Button/index.js';
import { ConfirmationModal } from '../../../ConfirmationModal/index.js';
import { useDocumentDrawer } from '../../../DocumentDrawer/index.js';
import { Drawer } from '../../../Drawer/index.js';
import { DrawerActionHeader } from '../../../DrawerActionHeader/index.js';
import { DrawerContentContainer } from '../../../DrawerContentContainer/index.js';
import { ListCreateNewDocInFolderButton } from '../../../ListHeader/TitleActions/ListCreateNewDocInFolderButton.js';
import { LoadingOverlay } from '../../../Loading/index.js';
import { NoListResults } from '../../../NoListResults/index.js';
import { Translation } from '../../../Translation/index.js';
import { FolderBreadcrumbs } from '../../Breadcrumbs/index.js';
import { ColoredFolderIcon } from '../../ColoredFolderIcon/index.js';
import './index.scss';
const baseClass = 'move-folder-drawer';
const baseModalSlug = 'move-folder-drawer';
const confirmModalSlug = `${baseModalSlug}-confirm-move`;
/**
   * Callback function to be called when the user confirms the move
   *
   * @param folderID - The ID of the folder to move the items to
   */ /**
   * Set to `true` to skip the confirmation modal
   * @default false
   */ export function MoveItemsToFolderDrawer(props) {
    return /*#__PURE__*/ _jsxDEV(Drawer, {
        gutter: false,
        Header: null,
        slug: props.drawerSlug,
        children: /*#__PURE__*/ _jsxDEV(LoadFolderData, {
            ...props
        }, void 0, false, {
            fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
            lineNumber: 70,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
        lineNumber: 69,
        columnNumber: 5
    }, this);
}
function LoadFolderData(props) {
    const { permissions } = useAuth();
    const [subfolders, setSubfolders] = React.useState([]);
    const [documents, setDocuments] = React.useState([]);
    const [breadcrumbs, setBreadcrumbs] = React.useState([]);
    const [FolderResultsComponent, setFolderResultsComponent] = React.useState(null);
    const [hasLoaded, setHasLoaded] = React.useState(false);
    const [folderID, setFolderID] = React.useState(props.fromFolderID || null);
    const hasLoadedRef = React.useRef(false);
    const { getFolderResultsComponentAndData } = useServerFunctions();
    const populateMoveToFolderDrawer = React.useCallback(async (folderIDToPopulate)=>{
        try {
            const result = await getFolderResultsComponentAndData({
                browseByFolder: false,
                collectionsToDisplay: [
                    props.folderCollectionSlug
                ],
                displayAs: 'grid',
                // todo: should be able to pass undefined, empty array or null and get all folders. Need to look at API for this in the server function
                folderAssignedCollections: props.folderAssignedCollections,
                folderID: folderIDToPopulate,
                sort: 'name'
            });
            setBreadcrumbs(result.breadcrumbs || []);
            setSubfolders(result?.subfolders || []);
            setDocuments(result?.documents || []);
            setFolderResultsComponent(result.FolderResultsComponent || null);
            setFolderID(folderIDToPopulate);
            setHasLoaded(true);
        } catch (e) {
            setBreadcrumbs([]);
            setSubfolders([]);
            setDocuments([]);
        }
        hasLoadedRef.current = true;
    }, [
        getFolderResultsComponentAndData,
        props.folderAssignedCollections,
        props.folderCollectionSlug
    ]);
    React.useEffect(()=>{
        if (!hasLoadedRef.current) {
            void populateMoveToFolderDrawer(props.fromFolderID);
        }
    }, [
        populateMoveToFolderDrawer,
        props.fromFolderID
    ]);
    if (!hasLoaded) {
        return /*#__PURE__*/ _jsxDEV(LoadingOverlay, {}, void 0, false, {
            fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
            lineNumber: 123,
            columnNumber: 12
        }, this);
    }
    return /*#__PURE__*/ _jsxDEV(FolderProvider, {
        allCollectionFolderSlugs: [
            props.folderCollectionSlug
        ],
        allowCreateCollectionSlugs: permissions.collections[props.folderCollectionSlug]?.create ? [
            props.folderCollectionSlug
        ] : [],
        allowMultiSelection: false,
        breadcrumbs: breadcrumbs,
        documents: documents,
        folderFieldName: props.folderFieldName,
        folderID: folderID,
        FolderResultsComponent: FolderResultsComponent,
        onItemClick: async (item)=>{
            await populateMoveToFolderDrawer(item.value.id);
        },
        subfolders: subfolders,
        children: /*#__PURE__*/ _jsxDEV(Content, {
            ...props,
            populateMoveToFolderDrawer: populateMoveToFolderDrawer
        }, void 0, false, {
            fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
            lineNumber: 146,
            columnNumber: 7
        }, this)
    }, folderID, false, {
        fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
        lineNumber: 127,
        columnNumber: 5
    }, this);
}
function Content({ drawerSlug, fromFolderID, fromFolderName, itemsToMove, onConfirm, populateMoveToFolderDrawer, skipConfirmModal, ...props }) {
    const { clearRouteCache } = useRouteCache();
    const { closeModal, isModalOpen, openModal } = useModal();
    const [count] = React.useState(()=>itemsToMove.length);
    const [folderAddedToUnderlyingFolder, setFolderAddedToUnderlyingFolder] = React.useState(false);
    const { i18n, t } = useTranslation();
    const { breadcrumbs, folderCollectionConfig, folderCollectionSlug, folderFieldName, folderID, FolderResultsComponent, folderType, getSelectedItems, subfolders } = useFolder();
    const [FolderDocumentDrawer, , { closeDrawer: closeFolderDrawer, openDrawer: openFolderDrawer }] = useDocumentDrawer({
        collectionSlug: folderCollectionSlug
    });
    const getSelectedFolder = React.useCallback(()=>{
        const selected = getSelectedItems();
        if (selected.length === 0) {
            const lastCrumb = breadcrumbs?.[breadcrumbs.length - 1];
            // use the breadcrumb
            return {
                id: lastCrumb?.id || null,
                name: lastCrumb?.name || null
            };
        } else {
            // use the selected item
            return {
                id: selected[0].value.id,
                name: selected[0].value._folderOrDocumentTitle
            };
        }
    }, [
        breadcrumbs,
        getSelectedItems
    ]);
    const onCreateSuccess = React.useCallback(async ({ collectionSlug, doc })=>{
        await populateMoveToFolderDrawer(folderID);
        if (collectionSlug === folderCollectionSlug && (doc?.folder && fromFolderID === extractID(doc?.folder) || !fromFolderID && !doc?.folder)) {
            // if the folder we created is in the same folder as the one we are moving from
            // set variable so we can clear the route cache when we close the drawer
            setFolderAddedToUnderlyingFolder(true);
        }
    }, [
        populateMoveToFolderDrawer,
        folderID,
        fromFolderID,
        folderCollectionSlug
    ]);
    const onConfirmMove = React.useCallback(()=>{
        if (typeof onConfirm === 'function') {
            void onConfirm(getSelectedFolder());
        }
    }, [
        getSelectedFolder,
        onConfirm
    ]);
    React.useEffect(()=>{
        if (!isModalOpen(drawerSlug) && folderAddedToUnderlyingFolder) {
            // if we added a folder to the underlying folder, clear the route cache
            // so that the folder view will be reloaded with the new folder
            setFolderAddedToUnderlyingFolder(false);
            clearRouteCache();
        }
    }, [
        drawerSlug,
        isModalOpen,
        clearRouteCache,
        folderAddedToUnderlyingFolder
    ]);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: baseClass,
        children: [
            /*#__PURE__*/ _jsxDEV(DrawerActionHeader, {
                onCancel: ()=>{
                    closeModal(drawerSlug);
                },
                onSave: ()=>{
                    if (skipConfirmModal) {
                        onConfirmMove();
                    } else {
                        openModal(confirmModalSlug);
                    }
                },
                saveLabel: t('general:select'),
                title: /*#__PURE__*/ _jsxDEV(DrawerHeading, {
                    action: props.action,
                    count: count,
                    fromFolderName: fromFolderID ? fromFolderName : undefined,
                    title: props.action === 'moveItemToFolder' ? props.title : undefined
                }, void 0, false, {
                    fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                    lineNumber: 250,
                    columnNumber: 11
                }, void 0)
            }, void 0, false, {
                fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                lineNumber: 237,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__breadcrumbs-section`,
                children: [
                    /*#__PURE__*/ _jsxDEV(FolderBreadcrumbs, {
                        breadcrumbs: [
                            {
                                id: null,
                                name: /*#__PURE__*/ _jsxDEV("span", {
                                    className: `${baseClass}__folder-breadcrumbs-root`,
                                    children: [
                                        /*#__PURE__*/ _jsxDEV(ColoredFolderIcon, {}, void 0, false, {
                                            fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                                            lineNumber: 266,
                                            columnNumber: 19
                                        }, void 0),
                                        t('folder:folders')
                                    ]
                                }, void 0, true, {
                                    fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                                    lineNumber: 265,
                                    columnNumber: 17
                                }, void 0),
                                onClick: breadcrumbs.length ? ()=>{
                                    void populateMoveToFolderDrawer(null);
                                } : undefined
                            },
                            ...breadcrumbs.map((crumb, index)=>({
                                    id: crumb.id,
                                    name: crumb.name,
                                    onClick: index !== breadcrumbs.length - 1 ? ()=>{
                                        void populateMoveToFolderDrawer(crumb.id);
                                    } : undefined
                                }))
                        ]
                    }, void 0, false, {
                        fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                        lineNumber: 260,
                        columnNumber: 9
                    }, this),
                    subfolders.length > 0 && /*#__PURE__*/ _jsxDEV(_Fragment, {
                        children: [
                            /*#__PURE__*/ _jsxDEV(Button, {
                                buttonStyle: "pill",
                                className: `${baseClass}__add-folder-button`,
                                margin: false,
                                onClick: ()=>{
                                    openFolderDrawer();
                                },
                                children: t('fields:addLabel', {
                                    label: getTranslation(folderCollectionConfig.labels?.singular, i18n)
                                })
                            }, void 0, false, {
                                fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                                lineNumber: 290,
                                columnNumber: 13
                            }, this),
                            /*#__PURE__*/ _jsxDEV(FolderDocumentDrawer, {
                                initialData: {
                                    [folderFieldName]: folderID,
                                    folderType
                                },
                                onSave: (result)=>{
                                    void onCreateSuccess({
                                        collectionSlug: folderCollectionConfig.slug,
                                        doc: result.doc
                                    });
                                    closeFolderDrawer();
                                },
                                redirectAfterCreate: false
                            }, void 0, false, {
                                fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                                lineNumber: 302,
                                columnNumber: 13
                            }, this)
                        ]
                    }, void 0, true)
                ]
            }, void 0, true, {
                fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                lineNumber: 259,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV(DrawerContentContainer, {
                className: `${baseClass}__body-section`,
                children: subfolders.length > 0 ? FolderResultsComponent : /*#__PURE__*/ _jsxDEV(NoListResults, {
                    Actions: [
                        /*#__PURE__*/ _jsxDEV(ListCreateNewDocInFolderButton, {
                            buttonLabel: `${t('general:create')} ${getTranslation(folderCollectionConfig.labels?.singular, i18n).toLowerCase()}`,
                            collectionSlugs: [
                                folderCollectionSlug
                            ],
                            folderAssignedCollections: props.folderAssignedCollections,
                            onCreateSuccess: onCreateSuccess,
                            slugPrefix: "create-new-folder-from-drawer--no-results"
                        }, "create-folder", false, {
                            fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                            lineNumber: 326,
                            columnNumber: 15
                        }, void 0)
                    ],
                    Message: /*#__PURE__*/ _jsxDEV("p", {
                        children: i18n.t('general:noResults', {
                            label: `${getTranslation(folderCollectionConfig.labels?.plural, i18n)}`
                        })
                    }, void 0, false, {
                        fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                        lineNumber: 336,
                        columnNumber: 15
                    }, void 0)
                }, void 0, false, {
                    fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                    lineNumber: 324,
                    columnNumber: 11
                }, this)
            }, void 0, false, {
                fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                lineNumber: 320,
                columnNumber: 7
            }, this),
            !skipConfirmModal && /*#__PURE__*/ _jsxDEV(ConfirmationModal, {
                body: /*#__PURE__*/ _jsxDEV(ConfirmationMessage, {
                    action: props.action,
                    count: count,
                    fromFolderName: fromFolderName,
                    title: props.action === 'moveItemToFolder' ? props.title : undefined,
                    toFolderName: getSelectedFolder().name
                }, void 0, false, {
                    fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                    lineNumber: 349,
                    columnNumber: 13
                }, void 0),
                confirmingLabel: t('general:moving'),
                confirmLabel: t('general:move'),
                heading: t('general:confirmMove'),
                modalSlug: confirmModalSlug,
                onConfirm: onConfirmMove
            }, void 0, false, {
                fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                lineNumber: 347,
                columnNumber: 9
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
        lineNumber: 236,
        columnNumber: 5
    }, this);
}
function DrawerHeading(props) {
    const { t } = useTranslation();
    switch(props.action){
        case 'moveItemToFolder':
            // moving current folder from list view actions menu
            // or moving item from edit view
            if (props.fromFolderName) {
                // move from folder
                return t('folder:movingFromFolder', {
                    fromFolder: props.fromFolderName,
                    title: props.title
                });
            } else {
                // move from root
                return t('folder:selectFolderForItem', {
                    title: props.title
                });
            }
        case 'moveItemsToFolder':
            if (props.fromFolderName) {
                // move from folder
                return t('folder:movingFromFolder', {
                    fromFolder: props.fromFolderName,
                    title: `${props.count} ${props.count > 1 ? t('general:items') : t('general:item')}`
                });
            } else {
                // move from root
                return t('folder:selectFolderForItem', {
                    title: `${props.count} ${props.count > 1 ? t('general:items') : t('general:item')}`
                });
            }
    }
}
function ConfirmationMessage(props) {
    const { t } = useTranslation();
    switch(props.action){
        case 'moveItemToFolder':
            // moving current folder from list view actions menu
            // or moving item from edit view
            if (props.toFolderName) {
                // move to destination
                // You are about to move {{title}} to {{toFolder}}. Are you sure?
                return /*#__PURE__*/ _jsxDEV(Translation, {
                    elements: {
                        1: ({ children })=>/*#__PURE__*/ _jsxDEV("strong", {
                                children: children
                            }, void 0, false, {
                                fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                                lineNumber: 422,
                                columnNumber: 36
                            }, void 0),
                        2: ({ children })=>/*#__PURE__*/ _jsxDEV("strong", {
                                children: children
                            }, void 0, false, {
                                fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                                lineNumber: 423,
                                columnNumber: 36
                            }, void 0)
                    },
                    i18nKey: "folder:moveItemToFolderConfirmation",
                    t: t,
                    variables: {
                        title: props.title,
                        toFolder: props.toFolderName
                    }
                }, void 0, false, {
                    fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                    lineNumber: 420,
                    columnNumber: 11
                }, this);
            } else {
                // move to root
                // You are about to move {{title}} to the root folder. Are you sure?
                return /*#__PURE__*/ _jsxDEV(Translation, {
                    elements: {
                        1: ({ children })=>/*#__PURE__*/ _jsxDEV("strong", {
                                children: children
                            }, void 0, false, {
                                fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                                lineNumber: 439,
                                columnNumber: 36
                            }, void 0)
                    },
                    i18nKey: "folder:moveItemToRootConfirmation",
                    t: t,
                    variables: {
                        title: props.title
                    }
                }, void 0, false, {
                    fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                    lineNumber: 437,
                    columnNumber: 11
                }, this);
            }
        case 'moveItemsToFolder':
            // moving many (documents/folders) from list view
            if (props.toFolderName) {
                // move to destination
                // You are about to move {{count}} {{label}} to {{toFolder}}. Are you sure?
                return /*#__PURE__*/ _jsxDEV(Translation, {
                    elements: {
                        1: ({ children })=>/*#__PURE__*/ _jsxDEV("strong", {
                                children: children
                            }, void 0, false, {
                                fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                                lineNumber: 458,
                                columnNumber: 36
                            }, void 0),
                        2: ({ children })=>/*#__PURE__*/ _jsxDEV("strong", {
                                children: children
                            }, void 0, false, {
                                fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                                lineNumber: 459,
                                columnNumber: 36
                            }, void 0)
                    },
                    i18nKey: "folder:moveItemsToFolderConfirmation",
                    t: t,
                    variables: {
                        count: props.count,
                        label: props.count > 1 ? t('general:items') : t('general:item'),
                        toFolder: props.toFolderName
                    }
                }, void 0, false, {
                    fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                    lineNumber: 456,
                    columnNumber: 11
                }, this);
            } else {
                // move to root
                // You are about to move {{count}} {{label}} to the root folder. Are you sure?
                return /*#__PURE__*/ _jsxDEV(Translation, {
                    elements: {
                        1: ({ children })=>/*#__PURE__*/ _jsxDEV("strong", {
                                children: children
                            }, void 0, false, {
                                fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                                lineNumber: 476,
                                columnNumber: 36
                            }, void 0)
                    },
                    i18nKey: "folder:moveItemsToRootConfirmation",
                    t: t,
                    variables: {
                        count: props.count,
                        label: props.count > 1 ? t('general:items') : t('general:item')
                    }
                }, void 0, false, {
                    fileName: "src/elements/FolderView/Drawers/MoveToFolder/index.tsx",
                    lineNumber: 474,
                    columnNumber: 11
                }, this);
            }
    }
}

//# sourceMappingURL=index.js.map