import gradio as gr
import base64
from PIL import Image
import io

# HTML/JavaScript para el canvas interactivo
canvas_html = """
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<br>
<button onclick="addRectangle()">Add Rectangle</button>
<button onclick="clearCanvas()">Clear Canvas</button>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var shapes = [];
var isDragging = false;
var dragIndex = -1;
var dragOffsetX, dragOffsetY;

function addRectangle() {
    shapes.push({x: 50, y: 50, width: 50, height: 50, color: getRandomColor()});
    drawShapes();
}

function drawShapes() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    shapes.forEach(function(shape) {
        ctx.fillStyle = shape.color;
        ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
    });
}

function getRandomColor() {
    return '#' + Math.floor(Math.random()*16777215).toString(16);
}

canvas.addEventListener('mousedown', function(e) {
    var mouseX = e.clientX - canvas.getBoundingClientRect().left;
    var mouseY = e.clientY - canvas.getBoundingClientRect().top;
    
    for (var i = shapes.length - 1; i >= 0; i--) {
        var shape = shapes[i];
        if (mouseX > shape.x && mouseX < shape.x + shape.width &&
            mouseY > shape.y && mouseY < shape.y + shape.height) {
            isDragging = true;
            dragIndex = i;
            dragOffsetX = mouseX - shape.x;
            dragOffsetY = mouseY - shape.y;
            break;
        }
    }
});

canvas.addEventListener('mousemove', function(e) {
    if (isDragging) {
        var mouseX = e.clientX - canvas.getBoundingClientRect().left;
        var mouseY = e.clientY - canvas.getBoundingClientRect().top;
        shapes[dragIndex].x = mouseX - dragOffsetX;
        shapes[dragIndex].y = mouseY - dragOffsetY;
        drawShapes();
    }
});

canvas.addEventListener('mouseup', function() {
    isDragging = false;
});

function clearCanvas() {
    shapes = [];
    drawShapes();
}

function getCanvasImage() {
    return canvas.toDataURL('image/png');
}
</script>
"""

def get_canvas_image(dummy):
    # Esta función se llama cuando se presiona el botón de descarga
    # Devuelve None para que Gradio sepa que debe obtener la imagen del componente HTML
    return None

# Interfaz de Gradio
with gr.Blocks() as demo:
    gr.HTML(canvas_html)
    download_btn = gr.Button("Download Image")
    img_output = gr.Image(label="Generated Image")
    
    download_btn.click(get_canvas_image, inputs=[download_btn], outputs=[img_output], _js="() => getCanvasImage()")

demo.launch()