import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useMemo, useRef } from "react";
import { createRoot } from "react-dom/client";
import ReactDOM from "react-dom";
import Styles from "./useZoomable.module.scss";
import useHero from "../useHero";
import { useMergeRefsFunc } from "../useMergeRefs";
import ownEvent from "../../utils/ownEvent";
/**
 * Allows an element to be zoomable for fullscreen
 */
export default function useZoomable(id) {
    const zoomableID = useMemo(() => `zoomable-${id}`, []);
    const getBackdrop = () => {
        return document.querySelector(`[data-zoomable="${zoomableID}"]`);
    };
    const { heroRef, trigger } = useHero(zoomableID, {
        "data-preffix": "zoomable",
        repeatable: true,
    }, {
        onHeroStart: (clone, ...args) => {
            const bd = getBackdrop();
            const removeCb = ({ currentTarget, target }) => {
                if (target === currentTarget) {
                    if (("unmountComponentAtNode" in ReactDOM))
                        ReactDOM.unmountComponentAtNode(bd);
                    else
                        console.error("This component doesn't work with the new versions of react yet...");
                    bd.remove();
                }
            };
            bd.style.opacity = "0";
            const middlewayClick = () => {
                bd.removeEventListener("transitionend", removeCb);
                clone.removeEventListener("click", middlewayClick);
                _zoom();
            };
            clone.addEventListener("click", middlewayClick);
            bd.addEventListener("transitionend", removeCb);
            bd.addEventListener("transitionstart", () => {
                bd.addEventListener("transitioncancel", ownEvent(() => bd.removeEventListener("transitionend", removeCb)));
            });
        },
    });
    const zoomableEl = useRef(null);
    function _unzoom() {
        trigger();
    }
    function _zoom() {
        const el = zoomableEl.current;
        const elClone = el.cloneNode(true);
        elClone.style.visibility = "hidden";
        function HeroMount() {
            const { heroRef } = useHero(zoomableID, {
                "data-preffix": "zoomable",
                repeatable: true,
            }, {
                onHeroStart: (clone, ...args) => {
                    getBackdrop().style.opacity = "1";
                    const unzoomCb = () => {
                        _unzoom();
                        clone.removeEventListener("click", unzoomCb);
                    };
                    clone.addEventListener("click", unzoomCb);
                },
                onHeroEnd: () => {
                    heroRef.current.classList.remove(Styles.zoomableIndicator);
                },
            });
            return (_jsx("div", { ref: (ref) => {
                    if (ref) {
                        ref.appendChild(elClone);
                        heroRef.current = elClone;
                        const verticalProportion = el.clientWidth / el.clientHeight;
                        const targetWidth = ref.clientHeight * verticalProportion;
                        if (targetWidth > ref.clientWidth) {
                            const horizontalProportion = el.clientHeight / el.clientWidth;
                            elClone.style.width = ref.clientWidth + "px";
                            elClone.style.height =
                                ref.clientWidth * horizontalProportion + "px";
                        }
                        else {
                            elClone.style.height = ref.clientHeight + "px";
                            elClone.style.width = targetWidth + "px";
                        }
                    }
                } }));
        }
        const existingBackdrop = getBackdrop();
        if (!existingBackdrop) {
            const backdrop = document.createElement("div");
            backdrop.classList.add(Styles.backdrop);
            backdrop.addEventListener("click", _unzoom);
            backdrop.setAttribute("data-zoomable", zoomableID);
            document.body.appendChild(backdrop);
            createRoot(backdrop).render(_jsx(HeroMount, {}));
        }
        else {
            createRoot(existingBackdrop).render(_jsx(HeroMount, {}));
        }
    }
    useEffect(() => {
        const el = zoomableEl.current;
        el.classList.add(Styles.zoomableIndicator);
        el.addEventListener("click", _zoom);
        return () => {
            el.classList.remove(Styles.zoomableIndicator);
            const bd = getBackdrop();
            if (bd) {
                bd.style.opacity = "0";
                bd.addEventListener("transitionend", () => {
                    bd.remove();
                });
            }
        };
    }, []);
    const mergedRefs = useMergeRefsFunc(heroRef, zoomableEl);
    return {
        zoomableEl: mergedRefs,
    };
}
//# sourceMappingURL=useZoomable.js.map