import gradio as gr


def add_gradio_component(config_dict, component_key):
    """
    Creates a gradio component for the component_key component, based on the config_dict dictionary of parameters
    """
    if config_dict[component_key]["comp_type"] == "Text":
        new_component = gr.Text(
            label=config_dict[component_key]["label"], placeholder=config_dict[component_key]["label"]
        )
    elif config_dict[component_key]["comp_type"] == "Number":
        new_component = gr.Number(
            label=config_dict[component_key]["label"],
            precision=config_dict[component_key]["precision"],
        )
    elif config_dict[component_key]["comp_type"] == "Dropdown":
        new_component = gr.Dropdown(
            label=config_dict[component_key]["label"], choices=config_dict[component_key]["cat_values"]
        )
    elif config_dict[component_key]["comp_type"] == "Image":
        new_component = gr.Image(elem_classes="image-preview")
    elif config_dict[component_key]["comp_type"] == "CheckboxGroup":
        new_component = gr.CheckboxGroup(
            label=config_dict[component_key]["label"], choices=config_dict[component_key]["cat_values"]
        )
    elif config_dict[component_key]["comp_type"] == "Plot":
        new_component = gr.Plot(label=config_dict[component_key]["label"], type="matplotlib")
    elif config_dict[component_key]["comp_type"] == "Dataframe":
        new_component = gr.Dataframe(wrap=True, type="pandas")
    else:
        print(
            f"Found component type {config_dict[component_key]['comp_type']} for {component_key}, which is not supported"
        )
        new_component = None
    return new_component


def load_theme():
    """
    Loads the Osium AI color theme
    """
    osium_theme_colors = gr.themes.Color(
        c50="#e4f3fa",  # Dataframe background cell content - light mode only
        c100="#e4f3fa",  # Top corner of clear button in light mode + markdown text in dark mode
        c200="#a1c6db",  # Component borders
        c300="#FFFFFF",  #
        c400="#e4f3fa",  # Footer text
        c500="#0c1538",  # Text of component headers in light mode only
        c600="#a1c6db",  # Top corner of button in dark mode
        c700="#475383",  # Button text in light mode + component borders in dark mode
        c800="#0c1538",  # Markdown text in light mode
        c900="#a1c6db",  # Background of dataframe - dark mode
        c950="#0c1538",
    )  # Background in dark mode only
    # secondary color used for highlight box content when typing in light mode, and download option in dark mode
    # primary color used for login button in dark mode
    osium_theme = gr.themes.Default(primary_hue="cyan", secondary_hue="cyan", neutral_hue=osium_theme_colors)

    css_styling = """#submit {background: #1eccd8} 
    #submit:hover {background: #a2f1f6} 
    .output-image, .input-image, .image-preview {height: 350px !important}
    .output-plot {height: 250px !important}
    #interpretation {height: 250px !important}"""

    return osium_theme, css_styling