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 file = e.target.files[0];
                    const filesize = file.size.toLocaleString('en-US').replace(/,/g, ' ');
                    const textboxId = getTextboxForElement(e.target);
                    
                    // 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
                            const filename = `${file.name}, ${filesize} bytes, ${img.width}x${img.height} px`;
                            
                            if (textboxId) {
                                updateTextbox(textboxId, filename);
                            }
                        };
                        
                        img.src = event.target.result;
                    };
                    
                    reader.readAsDataURL(file);
                }
            }
        }, true);
        
        // Handle drag & drop
        document.addEventListener('drop', e => {
            if (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 file = e.dataTransfer.files[0];
                    const filesize = file.size.toLocaleString('en-US').replace(/,/g, ' ');
                    const textboxId = getTextboxForElement(e.target);
                    
                    // 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
                            const filename = `${file.name}, ${filesize} bytes, ${img.width}x${img.height} px`;
                            
                            if (textboxId) {
                                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')?.includes('Remove Image')) {
                    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"]');
            if (btn)
            {
                //btn.click();
                e.preventDefault();
                e.stopPropagation();
                OverrideEmbeddedDownloadButtonInImageOrGalleryGradioControl();
            }
        }, 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__PRIVATE2PUBLIC', None)
app = gr.load(name="angelts/flux-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)