import { useEffect, useState } from "react"; export const FetchedImageDrower = () => { const [urlState, setUrlState] = useState(['https://cdn-ai-hs.picsart.com/ai-hot-storage/83f2406a-876e-4e20-8f1c-34accf90c7ea.jpg']); const [show, setShow] = useState(fasle); const styleSheet = ` @keyframes spin { 0% { transform: rotate(0deg); } 99% { transform: rotate(360deg); } } `; const getLayout = (count) => { if (count <= 1) { return { cardHeight: 320, imageHeight: 270, cardWidth: 420 }; } if (count === 2) { return { cardHeight: 265, imageHeight: 215, cardWidth: 360 }; } if (count === 3) { return { cardHeight: 235, imageHeight: 185, cardWidth: 320 }; } return { cardHeight: 210, imageHeight: 160, cardWidth: 280 }; }; // Create or get #Parent useEffect(() => { if (typeof document === "undefined") return; // SSR-safe let parent = document.getElementById("Parent"); if (!parent) { parent = document.createElement("div"); parent.id = "Parent"; document.body.appendChild(parent); } // Remove old #Parent-child if it exists // const oldChild = document.getElementById("Parent-child"); //if (oldChild) parent.removeChild(oldChild); // Create new #Parent-child container const child = document.createElement("div"); child.id = "Parent-child"; child.style.width = "99.9%"; // Insert content inside child if (show && Array.isArray(urlState) && urlState.length) { const count = urlState.length; const { cardHeight, imageHeight, cardWidth } = getLayout(count); const cards = urlState .map((url) => { const safeUrl = String(url || ""); return `

Copied

`; }) .join(""); child.innerHTML = `

${cards}

`; } // Append new child parent.appendChild(child); const onClick = (e) => { const el = e.target?.closest?.("[data-action]"); if (!el) return; const action = el.getAttribute("data-action"); const url = el.getAttribute("data-url"); if (!url) return; if (action === "fullscreen") { window.open(url, "_blank"); return; } if (action === "download") { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation?.(); fetch(url) .then((r) => r.blob()) .then((blob) => { const blobUrl = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = blobUrl; a.download = "image.jpg"; a.rel = "noopener"; a.style.display = "none"; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.setTimeout(() => URL.revokeObjectURL(blobUrl), 1000); }) .catch((err) => { console.error("Download failed:", err); }); return; } if (action === "copy") { navigator.clipboard.writeText(url); const toast = el.querySelector?.('[data-toast="copy"]'); if (toast) { toast.style.visibility = "visible"; toast.style.opacity = "1"; window.clearTimeout(window.__picsartCopyToastTimeout); window.__picsartCopyToastTimeout = window.setTimeout(() => { toast.style.opacity = "0"; toast.style.visibility = "hidden"; }, 1000); } } }; child.addEventListener("click", onClick); // Cleanup on unmount return () => { child.removeEventListener("click", onClick); parent.removeChild(child); }; }, [show, urlState]); // Override fetch useEffect(() => { const originalFetch = window.fetch; setShow(false); window.fetch = async (...args) => { const [url] = args; const response = await originalFetch(...args); if (typeof url === "string" && (url.includes("https://api.picsart.io/tools") || url.includes("https://genai-api.picsart.io"))) { try { const cloned = response.clone(); const data = await cloned.json(); console.log('data', data) if (url.includes("https://api.picsart.io/tools")) { const nextUrl = data?.data?.url; if (nextUrl) { setUrlState((prev) => { const list = Array.isArray(prev) ? prev : []; if (list.includes(nextUrl)) return list; return [...list, nextUrl]; }); setShow(true); } else { setShow(false); } } else if (url.includes("https://genai-api.picsart.io")) { const items = Array.isArray(data) ? data : data?.data; const urls = (Array.isArray(items) ? items : []) .map((item) => item?.url) .filter(Boolean); if (urls.length) { setUrlState((prev) => { const list = Array.isArray(prev) ? prev : []; const merged = [...list]; urls.forEach((u) => { if (!merged.includes(u)) merged.push(u); }); return merged; }); setShow(true); } else { setShow(false); } } } catch { setShow(false); } } return response; }; return () => { window.fetch = originalFetch; }; }, []); return null; // nothing rendered directly };