'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 { formatAdminURL } from 'payload/shared';
import React, { useId } from 'react';
import { toast } from 'sonner';
import { useForm, useFormFields } from '../../../forms/Form/context.js';
import { FolderIcon } from '../../../icons/Folder/index.js';
import { useConfig } from '../../../providers/Config/index.js';
import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import { Button } from '../../Button/index.js';
import { formatDrawerSlug, useDrawerDepth } from '../../Drawer/index.js';
import './index.scss';
import { MoveItemsToFolderDrawer } from '../Drawers/MoveToFolder/index.js';
const baseClass = 'move-doc-to-folder';
/**
 * This is the button shown on the edit document view. It uses the more generic `MoveDocToFolderButton` component.
 */ export function MoveDocToFolder({ buttonProps, className = '', folderCollectionSlug, folderFieldName }) {
    const { t } = useTranslation();
    const dispatchField = useFormFields(([_, dispatch])=>dispatch);
    const currentParentFolder = useFormFields(([fields])=>fields && fields?.[folderFieldName] || null);
    const fromFolderID = currentParentFolder?.value;
    const { id, collectionSlug, initialData, title } = useDocumentInfo();
    const { setModified } = useForm();
    const [fromFolderName, setFromFolderName] = React.useState(()=>`${t('general:loading')}...`);
    const { config } = useConfig();
    const modalID = useId();
    React.useEffect(()=>{
        async function fetchFolderLabel() {
            if (fromFolderID && (typeof fromFolderID === 'string' || typeof fromFolderID === 'number')) {
                const response = await fetch(formatAdminURL({
                    apiRoute: config.routes.api,
                    path: `/${folderCollectionSlug}/${fromFolderID}`
                }));
                const folderData = await response.json();
                setFromFolderName(folderData?.name || t('folder:noFolder'));
            } else {
                setFromFolderName(t('folder:noFolder'));
            }
        }
        void fetchFolderLabel();
    }, [
        folderCollectionSlug,
        config.routes.api,
        fromFolderID,
        t
    ]);
    return /*#__PURE__*/ _jsxDEV(MoveDocToFolderButton, {
        buttonProps: buttonProps,
        className: className,
        collectionSlug: collectionSlug,
        docData: initialData,
        docID: id,
        docTitle: title,
        folderCollectionSlug: folderCollectionSlug,
        folderFieldName: folderFieldName,
        fromFolderID: fromFolderID,
        fromFolderName: fromFolderName,
        modalSlug: `move-to-folder-${modalID}`,
        onConfirm: ({ id })=>{
            if (currentParentFolder.value !== id) {
                dispatchField({
                    type: 'UPDATE',
                    path: folderFieldName,
                    value: id
                });
                setModified(true);
            }
        },
        skipConfirmModal: !currentParentFolder?.value
    }, void 0, false, {
        fileName: "src/elements/FolderView/MoveDocToFolder/index.tsx",
        lineNumber: 70,
        columnNumber: 5
    }, this);
}
/**
 * This is a more generic button that can be used in other contexts, such as table cells and the edit view.
 */ export const MoveDocToFolderButton = ({ buttonProps, className, collectionSlug, docData, docID, docTitle, folderCollectionSlug, folderFieldName, fromFolderID, fromFolderName, modalSlug, onConfirm, skipConfirmModal })=>{
    const { getEntityConfig } = useConfig();
    const { i18n, t } = useTranslation();
    const { closeModal, openModal } = useModal();
    const drawerDepth = useDrawerDepth();
    const drawerSlug = formatDrawerSlug({
        slug: modalSlug,
        depth: drawerDepth
    });
    const titleToRender = docTitle || getTranslation(getEntityConfig({
        collectionSlug
    }).labels.singular, i18n);
    return /*#__PURE__*/ _jsxDEV(_Fragment, {
        children: [
            /*#__PURE__*/ _jsxDEV(Button, {
                buttonStyle: "subtle",
                className: [
                    baseClass,
                    className
                ].filter(Boolean).join(' '),
                icon: /*#__PURE__*/ _jsxDEV(FolderIcon, {}, void 0, false, {
                    fileName: "src/elements/FolderView/MoveDocToFolder/index.tsx",
                    lineNumber: 145,
                    columnNumber: 15
                }, void 0),
                iconPosition: "left",
                onClick: ()=>{
                    openModal(drawerSlug);
                },
                ...buttonProps,
                children: fromFolderName
            }, void 0, false, {
                fileName: "src/elements/FolderView/MoveDocToFolder/index.tsx",
                lineNumber: 142,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV(MoveItemsToFolderDrawer, {
                action: "moveItemToFolder",
                drawerSlug: drawerSlug,
                //todo this should inherit
                folderAssignedCollections: [
                    collectionSlug
                ],
                folderCollectionSlug: folderCollectionSlug,
                folderFieldName: folderFieldName,
                fromFolderID: fromFolderID,
                fromFolderName: fromFolderName,
                itemsToMove: [
                    {
                        itemKey: `${collectionSlug}-${docID}`,
                        relationTo: collectionSlug,
                        value: {
                            ...docData,
                            id: docID
                        }
                    }
                ],
                onConfirm: async (args)=>{
                    if (fromFolderID !== args.id && typeof onConfirm === 'function') {
                        try {
                            await onConfirm(args);
                            if (args.id) {
                                // moved to folder
                                toast.success(t('folder:itemHasBeenMoved', {
                                    folderName: `"${args.name}"`,
                                    title: titleToRender
                                }));
                            } else {
                                // moved to root
                                toast.success(t('folder:itemHasBeenMovedToRoot', {
                                    title: titleToRender
                                }));
                            }
                        } catch (_) {}
                    }
                    // todo: add error toast?
                    closeModal(drawerSlug);
                },
                skipConfirmModal: skipConfirmModal,
                title: titleToRender
            }, void 0, false, {
                fileName: "src/elements/FolderView/MoveDocToFolder/index.tsx",
                lineNumber: 155,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true);
};

//# sourceMappingURL=index.js.map