import gradio as gr

# Function to generate Gradio code dynamically
def generate_gradio_code(interface_name, components):
    code = f"import gradio as gr\n\n"
    code += f"def {interface_name.lower()}_interface(*args):\n"
    code += f"    # Your processing logic here\n"
    code += f"    return args\n\n"
    
    code += f"with gr.Blocks() as {interface_name.lower()}:\n"
    code += f"    inputs = []\n"
    
    for i, component in enumerate(components):
        label = component.get('label', f'Field {i+1}')
        field_type = component['type']
        
        if field_type == "Textbox":
            placeholder = component.get('placeholder', '')
            code += f"    input_{i} = gr.Textbox(label='{label}', placeholder='{placeholder}')\n"
        elif field_type == "Number":
            min_value = component.get('min_value', 0)
            max_value = component.get('max_value', 100)
            code += f"    input_{i} = gr.Number(label='{label}', minimum={min_value}, maximum={max_value})\n"
        elif field_type == "Dropdown":
            choices = component.get('choices', ['Option 1', 'Option 2'])
            code += f"    input_{i} = gr.Dropdown(label='{label}', choices={choices})\n"
        elif field_type == "Slider":
            min_value = component.get('min_value', 0)
            max_value = component.get('max_value', 100)
            code += f"    input_{i} = gr.Slider(label='{label}', minimum={min_value}, maximum={max_value})\n"
        elif field_type == "Checkbox":
            code += f"    input_{i} = gr.Checkbox(label='{label}')\n"
        
        code += f"    inputs.append(input_{i})\n"

    code += f"    outputs = gr.Textbox(label='Output')\n"
    code += f"    gr.Interface(fn={interface_name.lower()}_interface, inputs=inputs, outputs=outputs).launch()\n"
    
    return code

# Function to handle dynamic field addition
def add_field(component_type, field_label, placeholder_text, min_value, max_value, choices, components):
    new_component = {"type": component_type, "label": field_label}
    
    if component_type == "Textbox":
        new_component["placeholder"] = placeholder_text
    elif component_type in ["Number", "Slider"]:
        new_component["min_value"] = min_value
        new_component["max_value"] = max_value
    elif component_type == "Dropdown":
        new_component["choices"] = choices.split(',')
        
    components.append(new_component)
    return components, components

# Function to update the visibility of specific options based on the component type
def update_visibility(component_type):
    return (
        gr.update(visible=component_type == "Textbox"),
        gr.update(visible=component_type in ["Slider", "Number"]),
        gr.update(visible=component_type == "Dropdown"),
        gr.update(visible=component_type in ["Slider", "Number"])
    )

# Gradio UI for designing the interface
def ui():
    with gr.Blocks() as demo:
        with gr.Column():
            gr.Markdown("### Gradio UI Designer")
            interface_name = gr.Textbox(label="Interface Name", placeholder="Enter the interface name")
            
            # Components UI
            component_type = gr.Dropdown(choices=["Textbox", "Number", "Dropdown", "Slider", "Checkbox"], label="Field Type")
            field_label = gr.Textbox(label="Field Label", placeholder="Enter field label")
            placeholder_text = gr.Textbox(label="Placeholder (for Textbox)", visible=False)
            min_value = gr.Number(label="Min Value (for Slider/Number)", value=0, visible=False)
            max_value = gr.Number(label="Max Value (for Slider/Number)", value=100, visible=False)
            choices = gr.Textbox(label="Choices (comma separated for Dropdown)", visible=False)
            
            # Components list to track fields
            components_list = gr.State([])

            # Add field button and component preview
            add_button = gr.Button("Add Field")
            component_preview = gr.JSON(label="Component List")

            add_button.click(
                add_field, 
                inputs=[component_type, field_label, placeholder_text, min_value, max_value, choices, components_list], 
                outputs=[component_preview, components_list]
            )
            
            # Update visibility based on the field type
            component_type.change(
                update_visibility, 
                inputs=[component_type], 
                outputs=[placeholder_text, min_value, choices, max_value]
            )
            
            # Preview and generate code button
            generate_button = gr.Button("Generate Code")
            generated_code = gr.Code(label="Generated Code")
            
            generate_button.click(
                generate_gradio_code, 
                inputs=[interface_name, components_list], 
                outputs=generated_code
            )
    
    return demo

# Launch the Gradio app
if __name__ == "__main__":
    ui().launch()