from pyscript import document
from pyodide.ffi import create_proxy

# Remove the loading message
document.getElementById("python-loading").remove()

document.getElementById("shape-options").style.display = "flex"

image = document.getElementById("annotation-image")
zone = document.getElementById("annotation-zone")


shape_type = ""


def switch_shape(event):
    global shape_type
    shape = event.currentTarget.id
    shape_type = shape
    print("Shape is now of type:", shape)


def open_shape(event):
    print("Creating a new shape of type:", shape_type)
    new_shape = document.createElementNS("http://www.w3.org/2000/svg", "svg")
    new_shape.setAttribute("width", image.width)
    new_shape.setAttribute("height", image.height)

    if shape_type == "shape-bbox":
        rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect")
        rectangle.setAttribute("x", "10")
        rectangle.setAttribute("y", "10")
        rectangle.setAttribute("width", "100")
        rectangle.setAttribute("height", "100")
        rectangle.setAttribute("fill", "hotPink")
        new_shape.appendChild(rectangle)

    zone.appendChild(new_shape)


for button in list(document.getElementById("shape-selector").children):
    button.addEventListener(
        "click",
        create_proxy(switch_shape)
    )
    print("Shape", button.id, "is available")



zone.addEventListener(
    "click",
    create_proxy(open_shape)
)