'use client';
import { useState, useId, useRef, useEffect, useContext, isValidElement, cloneElement, } from 'react';
import { createPortal } from 'react-dom';
import { useWindowDimensions } from 'react-native'; // TODO: remove this
import { LayoutGroup, motion, useDomEvent } from 'framer-motion';
import { GaleriaContext } from './context';
function Image({ __web, index = 0, children, style, dynamicAspectRatio = false, }) {
    const [isOpen, setIsOpen] = useState(false);
    const { urls, theme } = useContext(GaleriaContext);
    const url = urls?.[index];
    const [aspectRatio, setAspectRatio] = useState(1);
    const id = useId();
    const getFirstImageChild = (node) => {
        if (node instanceof HTMLImageElement) {
            return node;
        }
        if (node.childNodes && node.childNodes.length > 0) {
            for (const child of Array.from(node.childNodes)) {
                const result = getFirstImageChild(child);
                if (result)
                    return result;
            }
        }
        return null;
    };
    const getNodeAspectRatio = (node) => {
        const imageNode = getFirstImageChild(node);
        if (imageNode) {
            return (imageNode.getBoundingClientRect().width /
                imageNode.getBoundingClientRect().height);
        }
        return 1;
    };
    const onClick = (e) => {
        const imageNode = getFirstImageChild(e.target);
        if (imageNode) {
            setIsOpen(true);
            const ratio = getNodeAspectRatio(imageNode);
            setAspectRatio(ratio);
            if (typeof process != 'undefined' &&
                typeof process.env != 'undefined' &&
                process?.env?.NODE_ENV === 'development' &&
                imageNode.parentElement) {
                const nodeAspectRatio = getNodeAspectRatio(imageNode.parentElement);
                if (nodeAspectRatio !== ratio) {
                    console.error(`[galeria] Galeria.Image does not have the same aspect ratio as its child.

This might result in a weird animation. To fix it, pass the "style" prop to Galeria.Image to give it the same height & width as the image.

Or, you might need something like alignItems: 'flex-start' to the parent element.`);
                }
            }
        }
    };
    const background = {
        light: '#ffffff',
        dark: '#000000',
    }[theme];
    const foreground = {
        light: '#000000',
        dark: '#ffffff',
    }[theme];
    const [wasOpen, setWasOpen] = useState(false);
    if (isOpen && !wasOpen) {
        setWasOpen(true);
    }
    return (<>
      <motion.div style={{ zIndex: index + (wasOpen ? 1000 : 0), ...style }} 
    // faster than onClick
    // onMouseDown={onClick}
    // onTouchStart={onClick}
    onClick={onClick} layoutId={id}>
        {isValidElement(children)
            ? cloneElement(children, { draggable: false })
            : children}
      </motion.div>

      <PopupModal visible={isOpen} onClose={() => setIsOpen(false)}>
        <WindowDimensions>
          {(dimensions) => {
            // given the image aspect ratio, and the window dimensions, we want to derive the proper height and width
            // such that it spans the size of the window with a "contain" effect, but implemented in code rather than using object-fit
            // Calculate dimensions for "contain" effect
            const windowRatio = dimensions.width / dimensions.height;
            const imageRatio = aspectRatio;
            // If image is wider than window (relative to their heights)
            const width = imageRatio > windowRatio
                ? dimensions.width
                : dimensions.height * imageRatio;
            const height = imageRatio > windowRatio
                ? dimensions.width / imageRatio
                : dimensions.height;
            return (<motion.div style={{
                    position: 'absolute',
                    inset: 0,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                }} initial={{ backgroundColor: background + '00' }} animate={{ backgroundColor: background }} exit={{ backgroundColor: background + '00' }}>
                {url ? (<motion.img layoutId={id} style={{
                        width,
                        height,
                        objectFit: 'cover',
                        zIndex: 2000,
                    }} src={url}></motion.img>) : null}
              </motion.div>);
        }}
        </WindowDimensions>

        <motion.div style={{
            position: 'absolute',
            top: 0,
            left: 0,
            padding: 16,
            cursor: 'pointer',
        }} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill={foreground}/>
          </svg>
        </motion.div>

        <OnScrollOnce onScroll={() => {
            isOpen && setIsOpen(false);
        }}/>
      </PopupModal>
    </>);
}
function Root({ children, urls, theme = 'dark', ids, }) {
    const [openState, setOpen] = useState({
        open: false,
    });
    return (<GaleriaContext.Provider value={{
            hideBlurOverlay: false,
            hidePageIndicators: false,
            closeIconName: undefined,
            setOpen,
            urls,
            theme,
            ...(openState.open
                ? {
                    open: true,
                    src: openState.src,
                    initialIndex: openState.initialIndex,
                }
                : {
                    open: false,
                    src: '',
                    initialIndex: 0,
                }),
            ids,
        }}>
      <LayoutGroup inherit={false} id={useId()}>
        {children}
      </LayoutGroup>
    </GaleriaContext.Provider>);
}
function WindowDimensions({ children, }) {
    const dimensions = useWindowDimensions();
    return children(dimensions);
}
function OnScrollOnce({ onScroll }) {
    useDomEvent(useRef(window), 'scroll', onScroll);
    useDomEvent(useRef(window), 'wheel', onScroll);
    return null;
}
function PopupModal({ visible, children, onClose, }) {
    const elementRef = useRef(null);
    if (typeof window !== 'undefined' && !elementRef.current) {
        const element = document.createElement('div');
        element.setAttribute('galeria-popup', '1');
        if (element && document.body) {
            document.body.appendChild(element);
            elementRef.current = element;
        }
    }
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(function cleanup() {
        return () => {
            if (document.body && elementRef.current) {
                document.body.removeChild(elementRef.current);
                elementRef.current = null;
            }
        };
    }, []);
    if (!visible)
        return null;
    const node = (<div style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            zIndex: 100,
        }} onClick={(e) => {
            onClose();
        }}>
      {children}
    </div>);
    return elementRef.current ? createPortal(node, elementRef.current) : null;
}
const Galeria = Object.assign(Root, {
    Image,
    Popup: () => null,
});
export default Galeria;
//# sourceMappingURL=GaleriaView.jsx.map