import { useEffect, useState } from "react"; export const FetchedImageDrower = () => { const [urlState, setUrlState] = useState(null); const [show, setShow] = useState(false); const styleSheet = ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `; useEffect(() => { console.log("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")) { try { const cloned = response.clone(); const data = await cloned.json(); setUrlState(data.data.url); setShow(true); } catch (err) { setShow(false); } } else if (typeof url === "string" || url.includes("(https://genai-api.picsart.io")) { const cloned = response.clone(); const data = await cloned.json(); console.log(data); } return response; }; return () => { window.fetch = originalFetch; }; }, []); const FullscreenIcon = ({ onClick }) => ( ); const DownloadIcon = ({ onClick }) => ( ); const CopyIcon = ({ onClick }) => (

Copy image URL

); const copyToClipboard = (url) => { const input = document.createElement("input"); input.value = url; document.body.appendChild(input); input.select(); input.setSelectionRange(0, 99999); try { document.execCommand("copy"); console.log("Copied:", url); } catch (err) { console.error("Copy failed:", err); } document.body.removeChild(input); }; const downloadImage = async (url) => { try { const response = await fetch(url); const blob = await response.blob(); const blobUrl = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = blobUrl; a.download = "image.jpg"; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(blobUrl); } catch (error) { console.error("Issue when trying to download image:", error); } }; return (

{show && (

{/* Header */}

window.open(urlState, "_blank")} />

downloadImage(urlState)} />

copyToClipboard(urlState)} />

{/* Actions */}

{urlState && ( result

)}

); };