from fasthtml.common import *
from fasthtml.components import *
import json
import string
import random


def gen_random_id() -> str:
    return "".join(random.choices(string.ascii_lowercase, k=8))


def view_data(
    before,
    after,
    doc_id,
    data_source: str = None,
    data_sources=None,
    target: str = "colcontent",
):
    if data_sources is not None:
        drop_down = Select(
            *[
                Option(ds, value=ds, selected=(ds == data_source))
                for ds in data_sources
            ],
            name=f"data_source_{target}",
            hx_get=f"/curated/{target}",
            hx_target=f"#{target}",
            hx_trigger="change",
            hx_swap="innerHTML",
        )

    slider = Input(
        type="range",
        name=f"doc_id_{target}",
        min="0",
        max="9",
        value=str(doc_id),
        hx_get=f"/curated/{target}",
        hx_target=f"#{target}",
        hx_trigger="change",
        hx_swap="innerHTML",
        hx_include=f'[name="data_source_{target}"]',
    )

    form = Form(
        Div(
            Label("Data source: ", drop_down),
        )
        if (data_sources is not None)
        else None,
        Div(
            Label("Data sample: ", slider, f"{doc_id}", cls="plotly_slider"),
        ),
        cls="plotly_input_container",
    )

    col1 = Div(
        H3("Raw format"),
        Pre(
            json.dumps(before, indent=4),
            style="white-space: pre-wrap; word-break: break-all;",
        ),
        style="width: 48%; float: left; overflow-x: auto;",
    )

    col2 = Div(
        H3("Extracted format"),
        Pre(
            json.dumps(after, indent=4),
            style="white-space: pre-wrap; word-break: break-all;",
        ),
        style="width: 48%; float: right; overflow-x: auto;",
    )

    data_display = Div(
        col1,
        col2,
        style="overflow: auto; clear: both; height: 600px; border: 1px solid #ccc; padding: 20px;",
    )
    return Div(form, data_display, style="margin-top: 10px;", id=target)