from h2o_wave import Q, copy_expando, ui, main, app  # noqa: 401


async def meta(q: Q) -> None:
    q.page["meta"] = ui.meta_card(
        box="",
        title="my app",
        layouts=[
            ui.layout(
                breakpoint="0px",
                width="100%",
                zones=[
                    ui.zone(
                        "content",
                        size="1",
                    ),
                ],
            ),
        ],
        script=None,
        notification_bar=None,
    )

    q.page["meta"].theme = "h2o-dark"


@app("/")
async def serve(q: Q):
    print(q.args)
    copy_expando(q.args, q.client)

    q.page["my_important_content"] = ui.form_card(box="content", items=[])

    items = [
        ui.text_l("Cool headline"),
        ui.textbox(
            name="textbox1",
            label="Value1",
            value=q.client["textbox1"],
            trigger=True,
            required=True,
        ),
        ui.textbox(
            name="textbox2",
            label="Value2",
            value=q.client["textbox2"],
            trigger=True,
            required=True,
        ),
    ]

    items_exp = items + [
        ui.textbox(
            name="textbox3",
            label="Concatenated values",
            value=q.client["textbox3"],
            disabled=True,
        ),
    ]

    q.page["my_important_content"].items = items_exp

    if q.args.__wave_submission_name__ == "home":
        q.client["nav/active"] = "home"
    elif q.args.__wave_submission_name__ == "settings":
        q.client["nav/active"] = "settings"

    if (
        q.args.__wave_submission_name__ == "textbox1"
        or q.args.__wave_submission_name__ == "textbox2"
    ):
        print("updating the page")
        new_value = q.client["textbox1"] + q.client["textbox2"]
        print(new_value)

        # these both don't do anything
        q.page["my_important_content"].textbox3.value = new_value
        q.page["my_important_content"].textbox3.label = new_value

        # these both don't do anything
        q.page["textbox3"].value = new_value
        q.page["textbox3"].label = new_value

        # these both don't do anything
        q.page["content"].textbox3.value = new_value
        q.page["content"].textbox3.label = new_value

        # these both don't do anything
        q.page["meta"].textbox3.value = new_value
        q.page["meta"].textbox3.label = new_value

        # removes the item
        q.page["my_important_content"].items[3].label = new_value

        # does nothing
        q.page["my_important_content"].items[3].value = new_value

        # This removes the component
        q.page["my_important_content"].items.textbox3 = ui.textbox(
            name="textbox3",
            label="Concatenated values",
            value=new_value,
            disabled=True,
        )

        # This removes the component
        q.page["my_important_content"].items["textbox3"] = ui.textbox(
            name="textbox3",
            label="Concatenated values",
            value=new_value,
            disabled=True,
        )

        # This removes the component
        q.page["my_important_content"].textbox3 = ui.textbox(
            name="textbox3",
            label="Concatenated values",
            value=new_value,
            disabled=True,
        )

        # This works
        q.page["my_important_content"].items[3] = ui.textbox(
            name="textbox3",
            label="Concatenated values",
            value=new_value,
            disabled=True,
        )

        # This works
        items_exp = items + [
            ui.textbox(
                name="textbox3",
                label="Concatenated values",
                value=new_value,
                disabled=True,
            ),
        ]
        q.page["my_important_content"].items = items_exp

    await meta(q)

    await q.page.save()