import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { Box, Typography, Flex } from '@strapi/design-system';
import { Folder } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { styled } from 'styled-components';
import { getTranslationKey } from '../../../../utils/translations.mjs';
import { useAssetsDndOptional } from '../Dnd/AssetsDndProvider.mjs';
import { useUploadDropZone } from './UploadDropZoneContext.mjs';

/* -------------------------------------------------------------------------------------------------
 * DropZoneOverlay
 * -----------------------------------------------------------------------------------------------*/ const setOpacity = (hex, alpha)=>`${hex}${Math.floor(alpha * 255).toString(16).padStart(2, '0')}`;
const DropZoneOverlay = styled(Box)`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: ${({ theme })=>setOpacity(theme.colors.primary200, 0.3)};
  border: 1px solid ${({ theme })=>theme.colors.primary700};
  border-radius: ${({ theme })=>theme.borderRadius};
  z-index: 1;
  pointer-events: none;
`;
const DropZoneWithOverlay = ({ children })=>{
    const { isDragging: isUploadDragActive } = useUploadDropZone();
    const assetsDnd = useAssetsDndOptional();
    const isInternalDragActive = assetsDnd?.isInternalDragActive ?? false;
    const showOverlay = isUploadDragActive && !isInternalDragActive;
    return /*#__PURE__*/ jsxs(Box, {
        position: "relative",
        children: [
            showOverlay && /*#__PURE__*/ jsx(DropZoneOverlay, {}),
            children
        ]
    });
};
/* -------------------------------------------------------------------------------------------------
 * DropZoneMessage
 * -----------------------------------------------------------------------------------------------*/ const DropFilesMessageImpl = styled(Box)`
  position: fixed;
  bottom: ${({ theme })=>theme.spaces[8]};
  left: 50%;
  transform: translateX(calc(-50% + ${({ $leftContentWidth })=>$leftContentWidth / 2}px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: ${({ theme })=>theme.spaces[2]};
  background: ${({ theme })=>theme.colors.primary600};
  padding: ${({ theme })=>theme.spaces[4]} ${({ theme })=>theme.spaces[6]};
  border-radius: ${({ theme })=>theme.borderRadius};
  z-index: 2;
`;
const DropFilesMessage = ({ uploadDropZoneRef, folderName })=>{
    const { formatMessage } = useIntl();
    const { isDragging: isUploadDragActive } = useUploadDropZone();
    const assetsDnd = useAssetsDndOptional();
    const isInternalDragActive = assetsDnd?.isInternalDragActive ?? false;
    const showMessage = isUploadDragActive && !isInternalDragActive;
    // Dropzone message position (relative to main content)
    const [leftContentWidth, setLeftContentWidth] = React.useState(0);
    // Calculate the left content width to position the dropzone message correctly
    React.useEffect(()=>{
        if (!uploadDropZoneRef?.current) return;
        const updateRect = ()=>{
            const rect = uploadDropZoneRef.current?.getBoundingClientRect();
            if (rect) {
                setLeftContentWidth((prev)=>prev !== rect.left ? rect.left : prev);
            }
        };
        updateRect();
        const resizeObserver = new ResizeObserver(updateRect);
        resizeObserver.observe(uploadDropZoneRef.current);
        return ()=>resizeObserver.disconnect();
    }, [
        uploadDropZoneRef
    ]);
    if (!showMessage) {
        return null;
    }
    return /*#__PURE__*/ jsxs(DropFilesMessageImpl, {
        $leftContentWidth: leftContentWidth,
        children: [
            /*#__PURE__*/ jsx(Typography, {
                textColor: "neutral0",
                children: formatMessage({
                    id: getTranslationKey('dropzone.upload.message'),
                    defaultMessage: 'Drop here to upload to'
                })
            }),
            /*#__PURE__*/ jsxs(Flex, {
                gap: 2,
                alignItems: "center",
                children: [
                    /*#__PURE__*/ jsx(Folder, {
                        width: 20,
                        height: 20,
                        fill: "neutral0"
                    }),
                    /*#__PURE__*/ jsx(Typography, {
                        textColor: "neutral0",
                        fontWeight: "semiBold",
                        children: folderName
                    })
                ]
            })
        ]
    });
};

export { DropFilesMessage, DropZoneWithOverlay };
//# sourceMappingURL=UploadDropZone.mjs.map