import {
  AssetGridList,
  Breadcrumbs,
  EditAssetDialog,
  EditFolderDialog,
  EmptyAssets,
  FilterList,
  FilterPopover,
  FolderCard,
  FolderCardBody,
  FolderCardBodyAction,
  FolderGridList,
  SelectTree,
  SortPicker,
  TableList,
  UploadAssetDialog,
  containsAssetFilter,
  displayedFilters,
  getFolderURL,
  normalizeAPIError,
  useAssets,
  useBulkRemove,
  useFolder,
  useFolderCard,
  useFolderStructure,
  useFolders,
  useMediaLibraryPermissions,
  usePersistentState,
  useSelectionState
} from "./chunk-7KYK3FTC.js";
import {
  useConfig
} from "./chunk-JF4AI5LV.js";
import {
  getTrad,
  localStorageKeys,
  pluginId,
  viewOptions
} from "./chunk-ALMC553V.js";
import "./chunk-QF6GPHA4.js";
import "./chunk-S3HPKOXW.js";
import "./chunk-JRLAXHTE.js";
import "./chunk-E4IFZ6ZT.js";
import {
  useMutation,
  useQueryClient
} from "./chunk-QLEKUQKW.js";
import "./chunk-4J3VOWQV.js";
import "./chunk-PFI4R5WA.js";
import "./chunk-B3BGMYGX.js";
import "./chunk-W6ICJ5TB.js";
import "./chunk-IHYIPMY2.js";
import "./chunk-UWHSN2C7.js";
import "./chunk-ERK7O2GM.js";
import {
  useFetchClient
} from "./chunk-FCIM6RNO.js";
import {
  SearchInput
} from "./chunk-J33IXKN4.js";
import {
  ConfirmDialog
} from "./chunk-NP53ZCXD.js";
import "./chunk-KFLQQE5L.js";
import "./chunk-ED4XR3VQ.js";
import "./chunk-MBK4V2X7.js";
import {
  require_isEmpty
} from "./chunk-YJEURQPS.js";
import "./chunk-5ESYXDTN.js";
import "./chunk-K65KIEAL.js";
import "./chunk-B7ZLODDO.js";
import {
  Form,
  Formik
} from "./chunk-PW7XKCYO.js";
import "./chunk-RMBEU7DO.js";
import "./chunk-RI2W2UZ6.js";
import "./chunk-IY256CNP.js";
import "./chunk-IFOFBKTA.js";
import "./chunk-XLSIZGJF.js";
import "./chunk-EGNP2T5O.js";
import {
  useTracking
} from "./chunk-GSN7U3BK.js";
import "./chunk-T3B5F2LV.js";
import "./chunk-YXDCVYVT.js";
import "./chunk-QIJGNK42.js";
import "./chunk-7PUJSL55.js";
import "./chunk-C2ZJTFO7.js";
import "./chunk-C75BZXCZ.js";
import {
  Pagination
} from "./chunk-APGTER6B.js";
import "./chunk-ZM6TT53G.js";
import "./chunk-6AXVGFVQ.js";
import "./chunk-BFLP6DBI.js";
import "./chunk-CMLQV3Z2.js";
import "./chunk-D4WYVNVM.js";
import "./chunk-MMOBCIZG.js";
import "./chunk-IGCTEXRF.js";
import {
  Layouts
} from "./chunk-TIVRAWTC.js";
import "./chunk-PQINNV4N.js";
import "./chunk-VYSYYPOB.js";
import {
  ForwardRef$H,
  Page
} from "./chunk-5CAWUBTQ.js";
import {
  useQueryParams
} from "./chunk-W2TBR6J3.js";
import "./chunk-QEGMJR7H.js";
import {
  require_lib
} from "./chunk-LCL5TIBZ.js";
import "./chunk-WOQNBAGN.js";
import "./chunk-BHLYCXQ7.js";
import "./chunk-76QM3EFM.js";
import "./chunk-CE4VABH2.js";
import "./chunk-5VODLFKF.js";
import {
  useNotification
} from "./chunk-N55RVBRV.js";
import {
  Box,
  Button,
  CheckboxImpl,
  Dialog,
  Divider,
  Field,
  Flex,
  Grid,
  IconButton,
  Link as Link2,
  Loader,
  Modal,
  Popover,
  Typography,
  VisuallyHidden,
  useIntl
} from "./chunk-7XB6XSWQ.js";
import "./chunk-5ZC4PE57.js";
import {
  Link,
  NavLink,
  Route,
  Routes,
  useLocation,
  useNavigate
} from "./chunk-TUXTO2Z5.js";
import "./chunk-FOD4ENRR.js";
import {
  ForwardRef$1h,
  ForwardRef$1v,
  ForwardRef$2p,
  ForwardRef$39,
  ForwardRef$3h,
  ForwardRef$3j,
  ForwardRef$4d,
  ForwardRef$5j,
  ForwardRef$j
} from "./chunk-WRD5KPDH.js";
import {
  require_jsx_runtime
} from "./chunk-NIAJZ5MX.js";
import {
  dt
} from "./chunk-ACIMPXWY.js";
import {
  require_react
} from "./chunk-MADUDGYZ.js";
import {
  __toESM
} from "./chunk-PLDDJCW6.js";

// node_modules/@strapi/upload/dist/admin/pages/App/App.mjs
var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
var React4 = __toESM(require_react(), 1);
var import_qs8 = __toESM(require_lib(), 1);

// node_modules/@strapi/upload/dist/admin/pages/App/MediaLibrary/MediaLibrary.mjs
var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
var React3 = __toESM(require_react(), 1);
var import_qs7 = __toESM(require_lib(), 1);

// node_modules/@strapi/upload/dist/admin/components/FolderCard/FolderCardCheckbox/FolderCardCheckbox.mjs
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
var FolderCardCheckbox = (props) => {
  const { id } = useFolderCard();
  return (0, import_jsx_runtime.jsx)(Box, {
    position: "relative",
    zIndex: 2,
    children: (0, import_jsx_runtime.jsx)(CheckboxImpl, {
      "aria-labelledby": `${id}-title`,
      ...props
    })
  });
};

// node_modules/@strapi/upload/dist/admin/utils/getBreadcrumbDataML.mjs
var getBreadcrumbDataML = (folder, { pathname, query }) => {
  var _a, _b;
  const data = [
    {
      id: null,
      label: {
        id: getTrad("plugin.name"),
        defaultMessage: "Media Library"
      },
      href: folder ? getFolderURL(pathname, query || {}) : void 0
    }
  ];
  if ((folder == null ? void 0 : folder.parent) && typeof (folder == null ? void 0 : folder.parent) !== "number" && ((_a = folder == null ? void 0 : folder.parent) == null ? void 0 : _a.parent)) {
    data.push([]);
  }
  if ((folder == null ? void 0 : folder.parent) && typeof folder.parent !== "number") {
    data.push({
      id: folder.parent.id,
      label: folder.parent.name,
      href: getFolderURL(pathname, query || {}, {
        folder: (_b = folder.parent.id) == null ? void 0 : _b.toString(),
        folderPath: folder.parent.path
      })
    });
  }
  if (folder) {
    data.push({
      id: folder.id,
      label: folder.name
    });
  }
  return data;
};

// node_modules/@strapi/upload/dist/admin/pages/App/MediaLibrary/components/BulkActions.mjs
var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
var import_qs3 = __toESM(require_lib(), 1);

// node_modules/@strapi/upload/dist/admin/pages/App/MediaLibrary/components/BulkDeleteButton.mjs
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
var BulkDeleteButton = ({ selected, onSuccess }) => {
  const { formatMessage } = useIntl();
  const { remove } = useBulkRemove();
  const handleConfirmRemove = async () => {
    await remove(selected);
    onSuccess();
  };
  return (0, import_jsx_runtime2.jsxs)(Dialog.Root, {
    children: [
      (0, import_jsx_runtime2.jsx)(Dialog.Trigger, {
        children: (0, import_jsx_runtime2.jsx)(Button, {
          variant: "danger-light",
          size: "S",
          startIcon: (0, import_jsx_runtime2.jsx)(ForwardRef$j, {}),
          children: formatMessage({
            id: "global.delete",
            defaultMessage: "Delete"
          })
        })
      }),
      (0, import_jsx_runtime2.jsx)(ConfirmDialog, {
        onConfirm: handleConfirmRemove
      })
    ]
  });
};

// node_modules/@strapi/upload/dist/admin/pages/App/MediaLibrary/components/BulkMoveButton.mjs
var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
var React = __toESM(require_react(), 1);

// node_modules/@strapi/upload/dist/admin/components/BulkMoveDialog/BulkMoveDialog.mjs
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
var import_isEmpty = __toESM(require_isEmpty(), 1);

// node_modules/@strapi/upload/dist/admin/hooks/useBulkMove.mjs
var import_qs = __toESM(require_lib(), 1);
var useBulkMove = () => {
  const { formatMessage } = useIntl();
  const { toggleNotification } = useNotification();
  const queryClient = useQueryClient();
  const { post } = useFetchClient();
  const bulkMoveQuery = ({ destinationFolderId, filesAndFolders }) => {
    const payload = filesAndFolders.reduce((acc, selected) => {
      const { id, type } = selected;
      const key = type === "asset" ? "fileIds" : "folderIds";
      if (!acc[key]) {
        acc[key] = [];
      }
      acc[key].push(id);
      return acc;
    }, {});
    return post("/upload/actions/bulk-move", {
      ...payload,
      destinationFolderId
    });
  };
  const mutation = useMutation(bulkMoveQuery, {
    onSuccess(res) {
      var _a;
      const { data: { data } } = res;
      if (((_a = data == null ? void 0 : data.files) == null ? void 0 : _a.length) > 0) {
        queryClient.refetchQueries([
          pluginId,
          "assets"
        ], {
          active: true
        });
        queryClient.refetchQueries([
          pluginId,
          "asset-count"
        ], {
          active: true
        });
      }
      queryClient.refetchQueries([
        pluginId,
        "folders"
      ], {
        active: true
      });
      toggleNotification({
        type: "success",
        message: formatMessage({
          id: getTrad("modal.move.success-label"),
          defaultMessage: "Elements have been moved successfully."
        })
      });
    }
  });
  const move = (destinationFolderId, filesAndFolders) => mutation.mutateAsync({
    destinationFolderId,
    filesAndFolders
  });
  return {
    ...mutation,
    move
  };
};

// node_modules/@strapi/upload/dist/admin/components/BulkMoveDialog/BulkMoveDialog.mjs
var import_qs2 = __toESM(require_lib(), 1);
var BulkMoveDialog = ({ onClose, selected = [], currentFolder }) => {
  const { formatMessage } = useIntl();
  const { data: folderStructure, isLoading } = useFolderStructure();
  const { move } = useBulkMove();
  if (!folderStructure) {
    return null;
  }
  const handleSubmit = async (values, { setErrors }) => {
    var _a;
    try {
      if (typeof values.destination !== "string") {
        const destinationValue = values.destination.value;
        await move(destinationValue, selected);
        onClose();
      }
    } catch (error) {
      const normalizedError = normalizeAPIError(error);
      if (normalizedError && "errors" in normalizedError) {
        const formikErrors = (_a = normalizedError.errors) == null ? void 0 : _a.reduce((acc, error2) => {
          var _a2, _b;
          acc[((_b = (_a2 = error2.values) == null ? void 0 : _a2.path) == null ? void 0 : _b.length) || "destination"] = error2.defaultMessage;
          return acc;
        }, {});
        if (!(0, import_isEmpty.default)(formikErrors)) {
          setErrors(formikErrors);
        }
      }
    }
  };
  if (isLoading) {
    return (0, import_jsx_runtime3.jsx)(Modal.Content, {
      children: (0, import_jsx_runtime3.jsx)(Modal.Body, {
        children: (0, import_jsx_runtime3.jsx)(Flex, {
          justifyContent: "center",
          paddingTop: 4,
          paddingBottom: 4,
          children: (0, import_jsx_runtime3.jsx)(Loader, {
            children: formatMessage({
              id: getTrad("content.isLoading"),
              defaultMessage: "Content is loading."
            })
          })
        })
      })
    });
  }
  const initialFormData = {
    destination: {
      value: (currentFolder == null ? void 0 : currentFolder.id) || "",
      label: (currentFolder == null ? void 0 : currentFolder.name) || folderStructure[0].label
    }
  };
  return (0, import_jsx_runtime3.jsx)(Modal.Content, {
    children: (0, import_jsx_runtime3.jsx)(Formik, {
      validateOnChange: false,
      onSubmit: handleSubmit,
      initialValues: initialFormData,
      children: ({ values, errors, setFieldValue }) => (0, import_jsx_runtime3.jsxs)(Form, {
        noValidate: true,
        children: [
          (0, import_jsx_runtime3.jsx)(Modal.Header, {
            children: (0, import_jsx_runtime3.jsx)(Modal.Title, {
              children: formatMessage({
                id: getTrad("modal.folder.move.title"),
                defaultMessage: "Move elements to"
              })
            })
          }),
          (0, import_jsx_runtime3.jsx)(Modal.Body, {
            children: (0, import_jsx_runtime3.jsx)(Grid.Root, {
              gap: 4,
              children: (0, import_jsx_runtime3.jsx)(Grid.Item, {
                xs: 12,
                col: 12,
                direction: "column",
                alignItems: "stretch",
                children: (0, import_jsx_runtime3.jsxs)(Field.Root, {
                  id: "folder-destination",
                  children: [
                    (0, import_jsx_runtime3.jsx)(Field.Label, {
                      children: formatMessage({
                        id: getTrad("form.input.label.folder-location"),
                        defaultMessage: "Location"
                      })
                    }),
                    (0, import_jsx_runtime3.jsx)(SelectTree, {
                      options: folderStructure,
                      onChange: (value) => {
                        setFieldValue("destination", value);
                      },
                      defaultValue: typeof values.destination !== "string" ? values.destination : void 0,
                      name: "destination",
                      menuPortalTarget: document.querySelector("body"),
                      inputId: "folder-destination",
                      error: errors == null ? void 0 : errors.destination,
                      ariaErrorMessage: "destination-error"
                    }),
                    errors.destination && (0, import_jsx_runtime3.jsx)(Typography, {
                      variant: "pi",
                      tag: "p",
                      textColor: "danger600",
                      children: errors.destination
                    })
                  ]
                })
              })
            })
          }),
          (0, import_jsx_runtime3.jsxs)(Modal.Footer, {
            children: [
              (0, import_jsx_runtime3.jsx)(Modal.Close, {
                children: (0, import_jsx_runtime3.jsx)(Button, {
                  variant: "tertiary",
                  name: "cancel",
                  children: formatMessage({
                    id: "cancel",
                    defaultMessage: "Cancel"
                  })
                })
              }),
              (0, import_jsx_runtime3.jsx)(Button, {
                type: "submit",
                loading: isLoading,
                children: formatMessage({
                  id: "modal.folder.move.submit",
                  defaultMessage: "Move"
                })
              })
            ]
          })
        ]
      })
    })
  });
};

// node_modules/@strapi/upload/dist/admin/pages/App/MediaLibrary/components/BulkMoveButton.mjs
var BulkMoveButton = ({ selected = [], onSuccess, currentFolder }) => {
  const { formatMessage } = useIntl();
  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
  const handleConfirmMove = () => {
    setShowConfirmDialog(false);
    onSuccess();
  };
  return (0, import_jsx_runtime4.jsxs)(Modal.Root, {
    open: showConfirmDialog,
    onOpenChange: setShowConfirmDialog,
    children: [
      (0, import_jsx_runtime4.jsx)(Modal.Trigger, {
        children: (0, import_jsx_runtime4.jsx)(Button, {
          variant: "secondary",
          size: "S",
          startIcon: (0, import_jsx_runtime4.jsx)(ForwardRef$3h, {}),
          children: formatMessage({
            id: "global.move",
            defaultMessage: "Move"
          })
        })
      }),
      (0, import_jsx_runtime4.jsx)(BulkMoveDialog, {
        currentFolder,
        onClose: handleConfirmMove,
        selected
      })
    ]
  });
};

// node_modules/@strapi/upload/dist/admin/pages/App/MediaLibrary/components/BulkActions.mjs
var BulkActions = ({ selected = [], onSuccess, currentFolder }) => {
  const { formatMessage } = useIntl();
  const numberAssets = selected == null ? void 0 : selected.reduce(function(_this, val) {
    var _a;
    return (val == null ? void 0 : val.type) === "folder" && "files" in val && (val == null ? void 0 : val.files) && "count" in val.files ? _this + ((_a = val == null ? void 0 : val.files) == null ? void 0 : _a.count) : _this + 1;
  }, 0);
  return (0, import_jsx_runtime5.jsxs)(Flex, {
    gap: 2,
    paddingBottom: 5,
    children: [
      (0, import_jsx_runtime5.jsx)(Typography, {
        variant: "epsilon",
        textColor: "neutral600",
        children: formatMessage({
          id: getTrad("list.assets.selected"),
          defaultMessage: "{numberFolders, plural, one {1 folder} other {# folders}} - {numberAssets, plural, one {1 asset} other {# assets}} selected"
        }, {
          numberFolders: selected == null ? void 0 : selected.filter(({ type }) => type === "folder").length,
          numberAssets
        })
      }),
      (0, import_jsx_runtime5.jsx)(BulkDeleteButton, {
        selected,
        onSuccess
      }),
      (0, import_jsx_runtime5.jsx)(BulkMoveButton, {
        currentFolder,
        selected,
        onSuccess
      })
    ]
  });
};

// node_modules/@strapi/upload/dist/admin/pages/App/MediaLibrary/components/EmptyOrNoPermissions.mjs
var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
var import_qs4 = __toESM(require_lib(), 1);
var getContentIntlMessage = ({ isFiltering, canCreate, canRead }) => {
  if (isFiltering) {
    return {
      id: "list.assets-empty.title-withSearch",
      defaultMessage: "There are no elements with the applied filters"
    };
  }
  if (canRead) {
    if (canCreate) {
      return {
        id: "list.assets.empty-upload",
        defaultMessage: "Upload your first assets..."
      };
    }
    return {
      id: "list.assets.empty",
      defaultMessage: "Media Library is empty"
    };
  }
  return {
    id: "header.actions.no-permissions",
    defaultMessage: "No permissions to view"
  };
};
var EmptyOrNoPermissions = ({ canCreate, isFiltering, canRead, onActionClick }) => {
  const { formatMessage } = useIntl();
  const content = getContentIntlMessage({
    isFiltering,
    canCreate,
    canRead
  });
  return (0, import_jsx_runtime6.jsx)(EmptyAssets, {
    icon: !canRead ? ForwardRef$H : void 0,
    action: canCreate && !isFiltering && (0, import_jsx_runtime6.jsx)(Button, {
      variant: "secondary",
      startIcon: (0, import_jsx_runtime6.jsx)(ForwardRef$1h, {}),
      onClick: onActionClick,
      children: formatMessage({
        id: getTrad("header.actions.add-assets"),
        defaultMessage: "Add new assets"
      })
    }),
    content: formatMessage({
      ...content,
      id: getTrad(content.id)
    })
  });
};

// node_modules/@strapi/upload/dist/admin/pages/App/MediaLibrary/components/Filters.mjs
var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
var React2 = __toESM(require_react(), 1);
var import_qs5 = __toESM(require_lib(), 1);
var Filters = () => {
  var _a;
  const [open, setOpen] = React2.useState(false);
  const { formatMessage } = useIntl();
  const { trackUsage } = useTracking();
  const [{ query }, setQuery] = useQueryParams();
  const filters = ((_a = query == null ? void 0 : query.filters) == null ? void 0 : _a.$and) || [];
  const handleRemoveFilter = (nextFilters) => {
    setQuery({
      filters: {
        $and: nextFilters
      },
      page: 1
    });
  };
  const handleSubmit = (filters2) => {
    trackUsage("didFilterMediaLibraryElements", {
      location: "content-manager",
      filter: Object.keys(filters2[filters2.length - 1])[0]
    });
    setQuery({
      filters: {
        $and: filters2
      },
      page: 1
    });
  };
  return (0, import_jsx_runtime7.jsxs)(Popover.Root, {
    open,
    onOpenChange: setOpen,
    children: [
      (0, import_jsx_runtime7.jsx)(Popover.Trigger, {
        children: (0, import_jsx_runtime7.jsx)(Button, {
          variant: "tertiary",
          startIcon: (0, import_jsx_runtime7.jsx)(ForwardRef$3j, {}),
          size: "S",
          children: formatMessage({
            id: "app.utils.filters",
            defaultMessage: "Filters"
          })
        })
      }),
      (0, import_jsx_runtime7.jsx)(FilterPopover, {
        displayedFilters,
        filters,
        onSubmit: handleSubmit,
        onToggle: setOpen
      }),
      (0, import_jsx_runtime7.jsx)(FilterList, {
        appliedFilters: filters,
        filtersSchema: displayedFilters,
        onRemoveFilter: handleRemoveFilter
      })
    ]
  });
};

// node_modules/@strapi/upload/dist/admin/pages/App/MediaLibrary/components/Header.mjs
var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
var import_qs6 = __toESM(require_lib(), 1);
var Header = ({ breadcrumbs = null, canCreate, folder = null, onToggleEditFolderDialog, onToggleUploadAssetDialog }) => {
  const { formatMessage } = useIntl();
  const { pathname } = useLocation();
  const [{ query }] = useQueryParams();
  const backQuery = {
    ...query,
    folder: (folder == null ? void 0 : folder.parent) && typeof folder.parent !== "number" && folder.parent.id ? folder.parent.id : void 0,
    folderPath: (folder == null ? void 0 : folder.parent) && typeof folder.parent !== "number" && folder.parent.path ? folder.parent.path : void 0
  };
  return (0, import_jsx_runtime8.jsx)(Layouts.Header, {
    title: formatMessage({
      id: getTrad("plugin.name"),
      defaultMessage: `Media Library`
    }),
    subtitle: breadcrumbs && typeof breadcrumbs !== "boolean" && folder && (0, import_jsx_runtime8.jsx)(Breadcrumbs, {
      label: formatMessage({
        id: getTrad("header.breadcrumbs.nav.label"),
        defaultMessage: "Folders navigation"
      }),
      breadcrumbs,
      currentFolderId: folder == null ? void 0 : folder.id
    }),
    navigationAction: folder && (0, import_jsx_runtime8.jsx)(Link2, {
      tag: NavLink,
      startIcon: (0, import_jsx_runtime8.jsx)(ForwardRef$5j, {}),
      to: `${pathname}?${(0, import_qs6.stringify)(backQuery, {
        encode: false
      })}`,
      children: formatMessage({
        id: getTrad("header.actions.folder-level-up"),
        defaultMessage: "Back"
      })
    }),
    primaryAction: canCreate && (0, import_jsx_runtime8.jsxs)(Flex, {
      gap: 2,
      children: [
        (0, import_jsx_runtime8.jsx)(Button, {
          startIcon: (0, import_jsx_runtime8.jsx)(ForwardRef$1h, {}),
          variant: "secondary",
          onClick: onToggleEditFolderDialog,
          children: formatMessage({
            id: getTrad("header.actions.add-folder"),
            defaultMessage: "Add new folder"
          })
        }),
        (0, import_jsx_runtime8.jsx)(Button, {
          startIcon: (0, import_jsx_runtime8.jsx)(ForwardRef$1h, {}),
          onClick: onToggleUploadAssetDialog,
          children: formatMessage({
            id: getTrad("header.actions.add-assets"),
            defaultMessage: "Add new assets"
          })
        })
      ]
    })
  });
};

// node_modules/@strapi/upload/dist/admin/pages/App/MediaLibrary/MediaLibrary.mjs
var BoxWithHeight = dt(Box)`
  height: 3.2rem;
  display: flex;
  align-items: center;
`;
var TypographyMaxWidth = dt(Typography)`
  max-width: 100%;
`;
var ActionContainer = dt(Box)`
  svg {
    path {
      fill: ${({ theme }) => theme.colors.neutral500};
    }
  }
`;
var MediaLibrary = () => {
  var _a, _b, _c, _d;
  const navigate = useNavigate();
  const { canRead, canCreate, canUpdate, canCopyLink, canDownload, canConfigureView, isLoading: permissionsLoading } = useMediaLibraryPermissions();
  const currentFolderToEditRef = React3.useRef();
  const { formatMessage } = useIntl();
  const { pathname } = useLocation();
  const { trackUsage } = useTracking();
  const [{ query }, setQuery] = useQueryParams();
  const isFiltering = Boolean(query._q || query.filters);
  const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);
  const isGridView = view === viewOptions.GRID;
  const { data: assetsData, isLoading: assetsLoading, error: assetsError } = useAssets({
    skipWhen: !canRead,
    query
  });
  const { data: foldersData, isLoading: foldersLoading, error: foldersError } = useFolders({
    enabled: canRead && ((_a = assetsData == null ? void 0 : assetsData.pagination) == null ? void 0 : _a.page) === 1 && !containsAssetFilter(query),
    query
  });
  const { data: currentFolder, isLoading: isCurrentFolderLoading, error: currentFolderError } = useFolder(query == null ? void 0 : query.folder, {
    enabled: canRead && !!(query == null ? void 0 : query.folder)
  });
  if ((currentFolderError == null ? void 0 : currentFolderError.name) === "NotFoundError") {
    navigate(pathname);
  }
  const folders = (foldersData == null ? void 0 : foldersData.map((folder) => ({
    ...folder,
    type: "folder",
    folderURL: getFolderURL(pathname, query, {
      folder: folder.id.toString(),
      folderPath: folder.path
    }),
    isSelectable: canUpdate
  }))) ?? [];
  const folderCount = (folders == null ? void 0 : folders.length) || 0;
  const assets = ((_b = assetsData == null ? void 0 : assetsData.results) == null ? void 0 : _b.map((asset) => ({
    ...asset,
    type: "asset",
    isSelectable: canUpdate
  }))) || [];
  const assetCount = (assets == null ? void 0 : assets.length) ?? 0;
  const totalAssetCount = (_c = assetsData == null ? void 0 : assetsData.pagination) == null ? void 0 : _c.total;
  const isLoading = isCurrentFolderLoading || foldersLoading || permissionsLoading || assetsLoading;
  const [showUploadAssetDialog, setShowUploadAssetDialog] = React3.useState(false);
  const [showEditFolderDialog, setShowEditFolderDialog] = React3.useState(false);
  const [assetToEdit, setAssetToEdit] = React3.useState(void 0);
  const [folderToEdit, setFolderToEdit] = React3.useState(void 0);
  const [selected, { selectOne, selectAll }] = useSelectionState([
    "type",
    "id"
  ], []);
  const indeterminateBulkSelect = (selected == null ? void 0 : selected.length) > 0 && (selected == null ? void 0 : selected.length) !== assetCount + folderCount;
  const toggleUploadAssetDialog = () => setShowUploadAssetDialog((prev) => !prev);
  const toggleEditFolderDialog = ({ created = false } = {}) => {
    if (created && (query == null ? void 0 : query.page) !== "1") {
      setQuery({
        ...query,
        page: 1
      });
    }
    setShowEditFolderDialog((prev) => !prev);
  };
  const handleBulkSelect = (checked, elements) => {
    if (checked) {
      trackUsage("didSelectAllMediaLibraryElements");
    }
    selectAll(elements);
  };
  const handleChangeSort = (value) => {
    trackUsage("didSortMediaLibraryElements", {
      location: "upload",
      sort: value
    });
    setQuery({
      sort: value
    });
  };
  const handleEditFolder = (folder) => {
    setFolderToEdit(folder);
    setShowEditFolderDialog(true);
  };
  const handleEditFolderClose = (payload) => {
    setFolderToEdit(null);
    toggleEditFolderDialog(payload);
    if (currentFolderToEditRef.current) {
      currentFolderToEditRef.current.focus();
    }
  };
  const handleAssetDeleted = (numberOfAssets) => {
    var _a2, _b2, _c2;
    if (numberOfAssets === assetCount && ((_a2 = assetsData == null ? void 0 : assetsData.pagination) == null ? void 0 : _a2.page) === ((_b2 = assetsData == null ? void 0 : assetsData.pagination) == null ? void 0 : _b2.pageCount) && ((_c2 = assetsData == null ? void 0 : assetsData.pagination) == null ? void 0 : _c2.page) && assetsData.pagination.page > 1) {
      setQuery({
        ...query,
        page: assetsData.pagination.page - 1
      });
    }
  };
  const handleBulkActionSuccess = () => {
    selectAll();
    handleAssetDeleted(selected.length);
  };
  if (isLoading) {
    return (0, import_jsx_runtime9.jsx)(Page.Loading, {});
  }
  if (assetsError || foldersError) {
    return (0, import_jsx_runtime9.jsx)(Page.Error, {});
  }
  return (0, import_jsx_runtime9.jsxs)(Layouts.Root, {
    children: [
      (0, import_jsx_runtime9.jsxs)(Page.Main, {
        children: [
          (0, import_jsx_runtime9.jsx)(Header, {
            breadcrumbs: !isCurrentFolderLoading ? getBreadcrumbDataML(currentFolder, {
              pathname,
              query
            }) : null,
            canCreate,
            onToggleEditFolderDialog: toggleEditFolderDialog,
            onToggleUploadAssetDialog: toggleUploadAssetDialog,
            folder: currentFolder
          }),
          (0, import_jsx_runtime9.jsx)(Layouts.Action, {
            startActions: (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, {
              children: [
                canUpdate && isGridView && (assetCount > 0 || folderCount > 0) && (0, import_jsx_runtime9.jsx)(BoxWithHeight, {
                  paddingLeft: 2,
                  paddingRight: 2,
                  background: "neutral0",
                  hasRadius: true,
                  borderColor: "neutral200",
                  children: (0, import_jsx_runtime9.jsx)(CheckboxImpl, {
                    "aria-label": formatMessage({
                      id: getTrad("bulk.select.label"),
                      defaultMessage: "Select all folders & assets"
                    }),
                    checked: indeterminateBulkSelect ? "indeterminate" : (assetCount > 0 || folderCount > 0) && selected.length === assetCount + folderCount,
                    onCheckedChange: (e) => handleBulkSelect(e, [
                      ...assets,
                      ...folders
                    ])
                  })
                }),
                canRead && isGridView && (0, import_jsx_runtime9.jsx)(SortPicker, {
                  value: query == null ? void 0 : query.sort,
                  onChangeSort: handleChangeSort
                }),
                canRead && (0, import_jsx_runtime9.jsx)(Filters, {})
              ]
            }),
            endActions: (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, {
              children: [
                canConfigureView ? (0, import_jsx_runtime9.jsx)(ActionContainer, {
                  paddingTop: 1,
                  paddingBottom: 1,
                  children: (0, import_jsx_runtime9.jsx)(IconButton, {
                    tag: Link,
                    to: {
                      pathname: `${pathname}/configuration`,
                      search: (0, import_qs7.stringify)(query, {
                        encode: false
                      })
                    },
                    label: formatMessage({
                      id: "app.links.configure-view",
                      defaultMessage: "Configure the view"
                    }),
                    children: (0, import_jsx_runtime9.jsx)(ForwardRef$4d, {})
                  })
                }) : null,
                (0, import_jsx_runtime9.jsx)(ActionContainer, {
                  paddingTop: 1,
                  paddingBottom: 1,
                  children: (0, import_jsx_runtime9.jsx)(IconButton, {
                    label: isGridView ? formatMessage({
                      id: getTrad("view-switch.list"),
                      defaultMessage: "List View"
                    }) : formatMessage({
                      id: getTrad("view-switch.grid"),
                      defaultMessage: "Grid View"
                    }),
                    onClick: () => setView(isGridView ? viewOptions.LIST : viewOptions.GRID),
                    children: isGridView ? (0, import_jsx_runtime9.jsx)(ForwardRef$2p, {}) : (0, import_jsx_runtime9.jsx)(ForwardRef$39, {})
                  })
                }),
                (0, import_jsx_runtime9.jsx)(SearchInput, {
                  label: formatMessage({
                    id: getTrad("search.label"),
                    defaultMessage: "Search for an asset"
                  }),
                  trackedEvent: "didSearchMediaLibraryElements",
                  trackedEventDetails: {
                    location: "upload"
                  }
                })
              ]
            })
          }),
          (0, import_jsx_runtime9.jsxs)(Layouts.Content, {
            children: [
              selected.length > 0 && (0, import_jsx_runtime9.jsx)(BulkActions, {
                currentFolder,
                selected,
                onSuccess: handleBulkActionSuccess
              }),
              folderCount === 0 && assetCount === 0 && (0, import_jsx_runtime9.jsx)(EmptyOrNoPermissions, {
                canCreate,
                canRead,
                isFiltering,
                onActionClick: toggleUploadAssetDialog
              }),
              canRead && !isGridView && (assetCount > 0 || folderCount > 0) && (0, import_jsx_runtime9.jsx)(TableList, {
                assetCount,
                folderCount,
                indeterminate: indeterminateBulkSelect,
                onChangeSort: handleChangeSort,
                onChangeFolder: (folderID, folderPath) => navigate(getFolderURL(pathname, query, {
                  folder: folderID.toString(),
                  folderPath
                })),
                onEditAsset: setAssetToEdit,
                onEditFolder: handleEditFolder,
                onSelectOne: selectOne,
                onSelectAll: handleBulkSelect,
                rows: [
                  ...folders,
                  ...assets
                ],
                selected,
                shouldDisableBulkSelect: !canUpdate,
                sortQuery: (query == null ? void 0 : query.sort) ?? ""
              }),
              canRead && isGridView && (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, {
                children: [
                  folderCount > 0 && (0, import_jsx_runtime9.jsx)(FolderGridList, {
                    title: (isFiltering && assetCount > 0 || !isFiltering) && formatMessage({
                      id: getTrad("list.folders.title"),
                      defaultMessage: "Folders ({count})"
                    }, {
                      count: folderCount
                    }) || "",
                    children: folders.map((folder) => {
                      var _a2, _b2;
                      const selectedFolders = selected.filter(({ type }) => type === "folder");
                      const isSelected = !!selectedFolders.find((currentFolder2) => currentFolder2.id === folder.id);
                      const url = getFolderURL(pathname, query, {
                        folder: folder == null ? void 0 : folder.id.toString(),
                        folderPath: folder == null ? void 0 : folder.path
                      });
                      return (0, import_jsx_runtime9.jsx)(Grid.Item, {
                        col: 3,
                        direction: "column",
                        alignItems: "stretch",
                        children: (0, import_jsx_runtime9.jsx)(FolderCard, {
                          ref: folderToEdit && folder.id === folderToEdit.id ? currentFolderToEditRef : void 0,
                          ariaLabel: folder.name,
                          id: `folder-${folder.id}`,
                          to: url,
                          startAction: folder.isSelectable ? (0, import_jsx_runtime9.jsx)(FolderCardCheckbox, {
                            "data-testid": `folder-checkbox-${folder.id}`,
                            checked: isSelected,
                            onCheckedChange: () => selectOne(folder)
                          }) : null,
                          cardActions: (0, import_jsx_runtime9.jsx)(IconButton, {
                            label: formatMessage({
                              id: getTrad("list.folder.edit"),
                              defaultMessage: "Edit folder"
                            }),
                            onClick: () => handleEditFolder(folder),
                            children: (0, import_jsx_runtime9.jsx)(ForwardRef$1v, {})
                          }),
                          children: (0, import_jsx_runtime9.jsx)(FolderCardBody, {
                            children: (0, import_jsx_runtime9.jsx)(FolderCardBodyAction, {
                              to: url,
                              children: (0, import_jsx_runtime9.jsxs)(Flex, {
                                tag: "h2",
                                direction: "column",
                                alignItems: "start",
                                maxWidth: "100%",
                                children: [
                                  (0, import_jsx_runtime9.jsxs)(TypographyMaxWidth, {
                                    fontWeight: "semiBold",
                                    textColor: "neutral800",
                                    ellipsis: true,
                                    children: [
                                      folder.name,
                                      (0, import_jsx_runtime9.jsx)(VisuallyHidden, {
                                        children: ":"
                                      })
                                    ]
                                  }),
                                  (0, import_jsx_runtime9.jsx)(TypographyMaxWidth, {
                                    tag: "span",
                                    textColor: "neutral600",
                                    variant: "pi",
                                    ellipsis: true,
                                    children: formatMessage({
                                      id: getTrad("list.folder.subtitle"),
                                      defaultMessage: "{folderCount, plural, =0 {# folder} one {# folder} other {# folders}}, {filesCount, plural, =0 {# asset} one {# asset} other {# assets}}"
                                    }, {
                                      folderCount: (_a2 = folder.children) == null ? void 0 : _a2.count,
                                      filesCount: (_b2 = folder.files) == null ? void 0 : _b2.count
                                    })
                                  })
                                ]
                              })
                            })
                          })
                        })
                      }, `folder-${folder.id}`);
                    })
                  }),
                  assetCount > 0 && folderCount > 0 && (0, import_jsx_runtime9.jsx)(Box, {
                    paddingTop: 6,
                    paddingBottom: 4,
                    children: (0, import_jsx_runtime9.jsx)(Divider, {})
                  }),
                  assetCount > 0 && (0, import_jsx_runtime9.jsx)(AssetGridList, {
                    assets,
                    onEditAsset: setAssetToEdit,
                    onSelectAsset: selectOne,
                    selectedAssets: selected.filter(({ type }) => type === "asset"),
                    title: (!isFiltering || isFiltering && folderCount > 0) && ((_d = assetsData == null ? void 0 : assetsData.pagination) == null ? void 0 : _d.page) === 1 && formatMessage({
                      id: getTrad("list.assets.title"),
                      defaultMessage: "Assets ({count})"
                    }, {
                      count: totalAssetCount
                    }) || ""
                  })
                ]
              }),
              (0, import_jsx_runtime9.jsxs)(Pagination.Root, {
                ...assetsData == null ? void 0 : assetsData.pagination,
                children: [
                  (0, import_jsx_runtime9.jsx)(Pagination.PageSize, {}),
                  (0, import_jsx_runtime9.jsx)(Pagination.Links, {})
                ]
              })
            ]
          })
        ]
      }),
      showUploadAssetDialog && (0, import_jsx_runtime9.jsx)(UploadAssetDialog, {
        open: showUploadAssetDialog,
        onClose: toggleUploadAssetDialog,
        trackedLocation: "upload",
        folderId: query == null ? void 0 : query.folder
      }),
      showEditFolderDialog && (0, import_jsx_runtime9.jsx)(EditFolderDialog, {
        open: showEditFolderDialog,
        onClose: () => handleEditFolderClose(),
        folder: folderToEdit,
        parentFolderId: query == null ? void 0 : query.folder,
        location: "upload"
      }),
      assetToEdit && (0, import_jsx_runtime9.jsx)(EditAssetDialog, {
        onClose: (editedAsset) => {
          if (editedAsset === null) {
            handleAssetDeleted(1);
          }
          setAssetToEdit(void 0);
        },
        open: !!assetToEdit,
        asset: assetToEdit,
        canUpdate,
        canCopyLink,
        canDownload,
        trackedLocation: "upload"
      })
    ]
  });
};

// node_modules/@strapi/upload/dist/admin/pages/App/App.mjs
var ConfigureTheView = React4.lazy(async () => import("./ConfigureTheView-OFTYFMGX.js").then((mod) => ({
  default: mod.ConfigureTheView
})));
var Upload = () => {
  const { config: { isLoading, isError, data: config } } = useConfig();
  const [{ rawQuery }, setQuery] = useQueryParams();
  const { formatMessage } = useIntl();
  const title = formatMessage({
    id: getTrad("plugin.name"),
    defaultMessage: "Media Library"
  });
  React4.useEffect(() => {
    if (isLoading || isError || rawQuery) {
      return;
    }
    setQuery({
      sort: config.sort,
      page: 1,
      pageSize: config.pageSize
    });
  }, [
    isLoading,
    isError,
    config,
    rawQuery,
    setQuery
  ]);
  if (isLoading) {
    return (0, import_jsx_runtime10.jsx)(Page.Loading, {});
  }
  return (0, import_jsx_runtime10.jsxs)(Page.Main, {
    children: [
      (0, import_jsx_runtime10.jsx)(Page.Title, {
        children: title
      }),
      rawQuery ? (0, import_jsx_runtime10.jsx)(React4.Suspense, {
        fallback: (0, import_jsx_runtime10.jsx)(Page.Loading, {}),
        children: (0, import_jsx_runtime10.jsxs)(Routes, {
          children: [
            (0, import_jsx_runtime10.jsx)(Route, {
              index: true,
              element: (0, import_jsx_runtime10.jsx)(MediaLibrary, {})
            }),
            (0, import_jsx_runtime10.jsx)(Route, {
              path: "configuration",
              element: (0, import_jsx_runtime10.jsx)(ConfigureTheView, {
                config
              })
            })
          ]
        })
      }) : null
    ]
  });
};
export {
  Upload
};
//# sourceMappingURL=App-SVHNQJEN.js.map