import time
import gradio as gr
from theme_dropdown import create_theme_dropdown

dropdown, js = create_theme_dropdown()

with gr.Blocks(theme="rottenlittlecreature/Moon_Goblin") as demo:

    with gr.Row(equal_height=True):
        with gr.Column(scale=10):
            gr.Markdown(
                """
# Theme preview: `Moon_Goblin`

To use this theme, set  
`theme='rottenlittlecreature/Moon_Goblin'`
"""
            )

        with gr.Column(scale=3):
            with gr.Box():
                dropdown.render()
                toggle_dark = gr.Button("Toggle Dark")

    dropdown.change(None, dropdown, None, _js=js)

    toggle_dark.click(
        None,
        _js="""
        () => {
            document.body.classList.toggle('dark');
            document.querySelector('gradio-app').style.backgroundColor =
            'var(--color-background-primary)'
        }
        """,
    )

    name = gr.Textbox(
        label="Name",
        placeholder="John Doe",
        value="John Doe",
    )

    with gr.Row():
        slider1 = gr.Slider(label="Slider 1")
        slider2 = gr.Slider(label="Slider 2")

    gr.CheckboxGroup(["A", "B", "C"], label="Checkbox Group")

    with gr.Row():

        with gr.Column(variant="panel", scale=1):

            gr.Markdown("## Panel 1")

            radio = gr.Radio(["A", "B", "C"], label="Radio")

            drop = gr.Dropdown(
                ["Option 1", "Option 2", "Option 3"],
                show_label=False
            )

            drop_2 = gr.Dropdown(
                ["Option A", "Option B", "Option C"],
                multiselect=True,
                value=["Option A"],
                label="Dropdown",
            )

            check = gr.Checkbox(label="Go")

        with gr.Column(variant="panel", scale=2):

            img = gr.Image(label="Image", height=320)

            with gr.Row():
                go_btn = gr.Button("Go", variant="primary")
                clear_btn = gr.Button("Clear", variant="secondary")

            def go(*args):
                time.sleep(2)
                return "https://gradio.app/assets/img/header-image.jpg"

            def clear():
                return None

            go_btn.click(go, [radio, drop, drop_2, check, name], img)
            clear_btn.click(clear, None, img)

            with gr.Row():
                btn1 = gr.Button("Button 1", size="sm")
                btn2 = gr.UploadButton("Upload", size="sm")
                stop_btn = gr.Button("Stop", variant="stop", size="sm")

    with gr.Row():

        gr.Dataframe(
            value=[[1,2,3],[4,5,6],[7,8,9]],
            label="Dataframe"
        )

        gr.JSON(
            value={"a":1,"b":2,"c":{"test":"a","test2":[1,2,3]}},
            label="JSON"
        )

        gr.Label({"cat":0.7,"dog":0.2,"fish":0.1})

        gr.File()

    with gr.Row():

        gr.ColorPicker()

        gr.Video(
            "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4"
        )

        gr.Gallery(
            [
                ("https://gradio-static-files.s3.us-west-2.amazonaws.com/lion.jpg","lion"),
                ("https://gradio-static-files.s3.us-west-2.amazonaws.com/logo.png","logo"),
                ("https://gradio-static-files.s3.us-west-2.amazonaws.com/tower.jpg","tower"),
            ],
            height=200,
            columns=2
        )

    with gr.Row():

        with gr.Column(scale=2):

            chatbot = gr.Chatbot(
                value=[("Hello","Hi")],
                label="Chatbot"
            )

            chat_btn = gr.Button("Add messages")

            def chat(history):
                history.append(("How are you?","I am good."))
                return history

            chat_btn.click(chat, chatbot, chatbot)

        with gr.Column(scale=1):

            with gr.Accordion("Advanced Settings"):
                gr.Markdown("Hello")
                gr.Number(label="Chatbot control 1")
                gr.Number(label="Chatbot control 2")
                gr.Number(label="Chatbot control 3")


if __name__ == "__main__":
    demo.queue().launch(server_name="0.0.0.0", server_port=7860)