import gradio as gr
from jinja2 import Environment, FileSystemLoader

_ENV = Environment(loader=FileSystemLoader("app/assets/jinja-templates"))
_IMAGE_TEMPLATE = _ENV.get_template("image.j2")

from typing import NamedTuple
from dawsonia.typing import BBoxTuple


class TableCell(NamedTuple):
    polygon: tuple[tuple[int, int], ...]
    text_x: int
    text_y: int
    text: str


class Page(NamedTuple):
    width: int
    height: int
    cells: list[TableCell]
    path: str


def render_image(collection: list[Page], current_page_index: int) -> str:
    return _IMAGE_TEMPLATE.render(
        page=collection[current_page_index],
    )


with gr.Blocks() as visualizer:
    gr.Markdown("# Result")
    gr.Markdown(
        "The image to the below shows where Dawsonia found text in the image."
    )

    with gr.Row():
        # Annotated image panel
        with gr.Column(scale=2):
            image = gr.HTML(
                label="Annotated image",
                padding=False,
                elem_classes="svg-image",
                container=True,
                max_height="65vh",
                min_height="65vh",
                show_label=True,
            )

            image_caption = gr.Markdown(elem_classes="button-group-viz")
            with gr.Row(elem_classes="button-group-viz"):
                left = gr.Button(
                    "← Previous", visible=False, interactive=False, scale=0
                )
                right = gr.Button("Next →", visible=False, scale=0)
    
    collection = gr.State()
    current_page_index = gr.State(0)

    # Updates on collection change:
    # - update the view
    # - reset the page index (always start on page 0)
    # - toggle visibility of navigation buttons (don't show them for single pages)
    # - update the image caption
    collection.change(
        render_image, inputs=[collection, current_page_index], outputs=image
    )