from pyscript import document
from pyodide.ffi import create_proxy

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)


vertical_ruler = document.getElementById("annotation-ruler-vertical")
horizontal_ruler = document.getElementById("annotation-ruler-horizontal")
vertical_ruler_2 = document.getElementById("annotation-ruler-vertical-secondary")
horizontal_ruler_2 = document.getElementById("annotation-ruler-horizontal-secondary")
helper_message = document.getElementById("annotation-helper-message")

helper_message.innerText = "Select a shape type then click on the image to begin defining it"


def follow_cursor(event):
    rect = zone.getBoundingClientRect()
    x = event.clientX - rect.left
    y = event.clientY - rect.top
    vertical_ruler.style.left = str(x) + "px"
    horizontal_ruler.style.top = str(y) + "px"


bbox_pos = None


def make_bbox(event):
    global new_shape, bbox_pos
    zone_rect = zone.getBoundingClientRect()

    if bbox_pos is None:
        bbox_pos = [(event.clientX - zone_rect.left) / zone_rect.width,
                    (event.clientY - zone_rect.top) / zone_rect.height]
        vertical_ruler_2.style.left = str(bbox_pos[0] * 100) + "%"
        horizontal_ruler_2.style.top = str(bbox_pos[1] * 100) + "%"
        vertical_ruler_2.style.display = "block"
        horizontal_ruler_2.style.display = "block"

    else:
        x0, y0 = bbox_pos
        x1 = (event.clientX - zone_rect.left) / zone_rect.width
        y1 = (event.clientY - zone_rect.top) / zone_rect.height

        rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect")
        minx = min(x0, x1)
        miny = min(y0, y1)
        maxx = max(x0, x1)
        maxy = max(y0, y1)

        rectangle.setAttribute("x", str(minx * image.naturalWidth))
        rectangle.setAttribute("y", str(miny * image.naturalHeight))
        rectangle.setAttribute("width", str((maxx - minx) * image.naturalWidth))
        rectangle.setAttribute("height", str((maxy - miny) * image.naturalHeight))
        rectangle.setAttribute("fill", "none")
        rectangle.classList.add("shape-bbox")

        new_shape.appendChild(rectangle)
        zone.appendChild(new_shape)
        vertical_ruler.style.display = "none"
        horizontal_ruler.style.display = "none"
        vertical_ruler_2.style.display = "none"
        horizontal_ruler_2.style.display = "none"
        document.body.style.cursor = "auto"
        zone.removeEventListener("click", create_proxy(make_bbox))

    return


zone.addEventListener(
    "mousemove",
    create_proxy(follow_cursor)
)

new_shape = None

def open_shape(event):
    global last_click_position, new_shape
    print("Creating a new shape of type:", shape_type)
    new_shape = document.createElementNS("http://www.w3.org/2000/svg", "svg")
    new_shape.setAttribute("width", "100%")
    new_shape.setAttribute("height", "100%")
    zone_rect = zone.getBoundingClientRect()
    new_shape.setAttribute("viewBox", f"0 0 {image.naturalWidth} {image.naturalHeight}")

    if shape_type == "shape-bbox":
        bbox_pos = None
        zone.addEventListener(
                "click",
                create_proxy(make_bbox)
        )
        vertical_ruler.style.display = "block"
        horizontal_ruler.style.display = "block"
        document.body.style.cursor = "crosshair"


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)
)