import os
import gradio as gr

head="""
    <!-- Google Analytics START -->
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-KJJSKYGN1Q"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-KJJSKYGN1Q');
    </script>
    <!-- Google Analytics END -->
"""
css="""
    div#component-49,div#component-97,div#component-110,div#component-130 {
        overflow-x: hidden !important;
    }
"""
js="""
    function start() {
"""
#//I.
#//...
js +="""
        //console.log('🚀 Simple filename capture initialized');
        
        function updateTextbox(textboxId, filename) {
            const container = document?.querySelector(`#${textboxId}`);
            if ( container ) {
                const textbox = container?.querySelector('input, textarea');
                if (textbox) {
                    textbox.value += filename;
                    textbox.dispatchEvent(new Event('input', { bubbles: true }));
                    //console.log(`Updated ${textboxId}: ${filename}`);
                }
            }
        }
        
        function getTextboxForElement(element) {
            // Simple mapping based on common parent sections
            let parent = element;
            while (parent && parent.tagName !== 'BODY') {
            
                // Check for textboxes in the same section
                if (parent.querySelector('#t2i_cii_hidden_filename_viajs_tbox')) return 't2i_cii_hidden_filename_viajs_tbox';
                if (parent.querySelector('#i2i_hidden_filename_viajs_tbox')) return 'i2i_hidden_filename_viajs_tbox';
                if (parent.querySelector('#i2i_cii_hidden_filename_viajs_tbox')) return 'i2i_cii_hidden_filename_viajs_tbox';
                if (parent.querySelector('#editimg_input_image1_hidden_filename_viajs_tbox')) return 'editimg_input_image1_hidden_filename_viajs_tbox';
                if (parent.querySelector('#editimg_input_image2_hidden_filename_viajs_tbox')) return 'editimg_input_image2_hidden_filename_viajs_tbox';
                if (parent.querySelector('#editimg_input_image3_hidden_filename_viajs_tbox')) return 'editimg_input_image3_hidden_filename_viajs_tbox';
                if (parent.querySelector('#editimg_input_image4_hidden_filename_viajs_tbox')) return 'editimg_input_image4_hidden_filename_viajs_tbox';
                if (parent.querySelector('#upscale_hidden_filename_viajs_tbox')) return 'upscale_hidden_filename_viajs_tbox';
                if (parent.querySelector('#rmbg_hidden_filename_viajs_tbox')) return 'rmbg_hidden_filename_viajs_tbox';
                parent = parent?.parentElement;
            }
            return null;
        }
        
        // Handle file selection
        document.addEventListener('change', e => {
            if (e?.target && e.target?.files && e.target.files?.[0] && e.target.files[0]?.type && e.target.files[0].type !=="" && e.target?.type && e.target.type === "file") {
                if ( !e.target.files[0].type.startsWith('image/') )
                {
                    console.log("Selected file is not an image!");
                }
                else
                {
                    const files = e.target.files;
                    const textboxId = getTextboxForElement(e.target);
                    if (textboxId)
                    {
                        Array.from(files).forEach((file, index) => {
                            const filesize = file.size.toLocaleString('en-US').replace(/,/g, ' ');
                            
                            // Create FileReader to read the image
                            const reader = new FileReader();
                            
                            reader.onload = function(event) {
                                const img = new Image();
                                img.onload = function() {
                                    // Include dimensions in the filename string
                                    let filename = `${file.name}, ${filesize} bytes, ${img.width}x${img.height} pixels` + "\\n";
                                    updateTextbox(textboxId, filename);
                                };
                                img.src = event.target.result;
                            };
                            reader.readAsDataURL(file);
                        });
                    }
                }
            }
        }, true);
        
        // Handle drag & drop
        document.addEventListener('drop', e => {
            if (e?.target && e?.dataTransfer && e.dataTransfer?.files && e.dataTransfer.files?.[0] && e.dataTransfer.files[0]?.type && e.dataTransfer.files[0].type !== "" && e.dataTransfer?.types && e.dataTransfer.types?.[0] && e.dataTransfer.types[0] === "Files") {
                if ( !e.dataTransfer.files[0].type.startsWith('image/') )
                {
                    console.log("Dragged file is not an image!");
                }
                else
                {
                    const files = e.dataTransfer.files;
                    const textboxId = getTextboxForElement(e.target);
                    if (textboxId)
                    {
                        Array.from(files).forEach((file, index) => {
                            const filesize = file.size.toLocaleString('en-US').replace(/,/g, ' ');
                            
                            // Create FileReader to read the image
                            const reader = new FileReader();
                            
                            reader.onload = function(event) {
                                const img = new Image();
                                img.onload = function() {
                                    // Include dimensions in the filename string
                                    let filename = `${file.name}, ${filesize} bytes, ${img.width}x${img.height} pixels` + "\\n";
                                    updateTextbox(textboxId, filename);
                                };
                                img.src = event.target.result;
                            };
                            reader.readAsDataURL(file);
                        });
                    }
                }
            }
        }, true);
        
        // Handle remove buttons
        document.addEventListener('click', e => {
"""
#//1.
#//...
js +="""
            let button = null;
            let clicked = e?.target;
            while (clicked && clicked !== document.body ) {
                if ( clicked?.getAttribute("aria-label") && clicked.getAttribute("aria-label") !== "Close" &&
                                                                                                            ( 
                                                                                                            clicked.getAttribute("aria-label") === "Remove Image" //gr.Image()
                                                                                                            ||
                                                                                                            clicked.getAttribute("aria-label") === "Clear"        //gr.Gallery()
                                                                                                            ) ) {
                    button = clicked;
                    break;
                }
                clicked = clicked?.parentNode;
            }
"""
#//2.
#//...
js +="""
            let containerImage = null;
            const constantPrefix = "prefix__";
            while (button && button !== document.body ) {
                if ( button?.getAttribute('id') && button.getAttribute('id')?.includes(constantPrefix)) {
                    containerImage = button;
                    break;
                }
                button = button?.parentNode;
            }
            //3.
            if ( containerImage && containerImage?.id ) {
            
                const containerImageId = containerImage.id;
                if ( containerImageId && containerImageId.length > constantPrefix.length ) {
                 
                    const containerTextareaId1 = containerImageId.substring(constantPrefix.length); 
                    if ( containerTextareaId1 && containerTextareaId1.length > constantPrefix.length ) {
                    
                        const containerTextareaId2 = document?.getElementById(containerTextareaId1);
                        if ( containerTextareaId2 ) {
                        
                            //In this div container exist the 1st and only textarea to put/erase the filename
                            const textareas = containerTextareaId2?.getElementsByTagName("textarea");
                            if ( textareas && textareas?.[0] ) {
                                textareas[0].value = "";
                                updateTextbox(containerTextareaId1, "");
                            }
                        }
                    }
                }
            }
            
            //IV.
            //1/2.
            //...
            const btn = e.target.closest('button[aria-label="Download"]'); //return true if matching target button element or null if no such button was clicked
            if (btn)
            {
                //btn.click();
                e.preventDefault();
                e.stopPropagation();
                OverrideEmbeddedDownloadButtonInImageOrGalleryGradioControl();
            }
            
            //V.
            //...
            let clickeddeleteimagebutton = null;
            let clickedelement = e?.target;
            while (clickedelement && clickedelement !== document.body ) {
                if ( clickedelement?.getAttribute("aria-label") && clickedelement.getAttribute("aria-label") === "Delete image" ) {
                    clickeddeleteimagebutton = clickedelement;
                    break;
                }
                clickedelement = clickedelement?.parentNode;
            }
            if ( clickeddeleteimagebutton )
            { 
                const containeralldeleteimagebuttons = clickeddeleteimagebutton?.parentNode?.parentNode; //div.grid-container
                if ( containeralldeleteimagebuttons ) {
                    
                    const alldeleteimagebuttons = containeralldeleteimagebuttons.querySelectorAll('button.delete-button[aria-label="Delete image"]');
                    if ( alldeleteimagebuttons ) {
                        
                        for (let index = 0; index < alldeleteimagebuttons.length; index++) {
                            
                            const currentbutton = alldeleteimagebuttons[index];
                            if (currentbutton === clickeddeleteimagebutton) {
                               
                                const textboxId = getTextboxForElement(e?.target);
                                if (textboxId) {
                                   
                                    const container = document?.querySelector(`#${textboxId}`);
                                    if ( container ) {
                                        
                                        const textbox = container?.querySelector("input, textarea");
                                        if (textbox) {
                                            
                                            let textboxvalue = textbox.value;
                                            let lines = textboxvalue.split("\\n");
                                            lines.splice(index, 1); // remove the line which is equal to the index of the selected image in container to delete
                                            textboxvalue = lines.join("\\n");
                                            textbox.value = textboxvalue;
                                            textbox.dispatchEvent(new Event("input", { bubbles: true }));
                                            
                                            break;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        
        }, true);
 
        //console.log('✅ Simple filename capture system ready');
"""
#//II.
#//...
#//III.
#//...
js +="""
    }
    start();
"""
#//IV.
#2/2.
#//...
js +="""
    function OverrideEmbeddedDownloadButtonInImageOrGalleryGradioControl() {
        let img = null;
        const images  = document.querySelectorAll("div.gallery-container span.preview button.media-button img, div.image-container button div.image-frame img"); //in gr.Gallery() and in gr.Image()
        for (const currentimage of images) {
            const style = window.getComputedStyle(currentimage);
            if ( style.display !== "none" && style.visibility !== "hidden" && currentimage.offsetWidth > 0 && currentimage.offsetHeight > 0 )
            {
                img  = currentimage;
                break;
            }
            else
                continue;
        }
        if (!img) {
            console.log('No img found');
        } else {
            window.open(img.src, "_blank");
        }
    }
"""


read_key = os.environ.get('HF_TOKEN__PRIVATE2PUBLIC2', None)
app = gr.load(name="angelts/flux2-gguf-lora-upscale-rmbg-t2i-i2i-controlnetunionpro2-AngelTs-Gradio2Comfyui", src="spaces", token=read_key, api_name=False)
app.queue(api_open=False, max_size=20).launch(share=True,debug=False,footer_links=["gradio", "settings"],head=head,css=css,js=js)