import gradio as gr
import json

def get_theme_css(theme):
    themes = {
        "light": {
            "background": "#ffffff",
            "text": "#000000",
            "accent": "#2196f3"
        },
        "dark": {
            "background": "#1a1a1a",
            "text": "#ffffff",
            "accent": "#64b5f6"
        },
        "sepia": {
            "background": "#f4ecd8",
            "text": "#5c4b37",
            "accent": "#8b4513"
        }
    }
    return themes.get(theme, themes["light"])

def get_font_size(font_size):
    font_sizes = {
        "small": "14px",
        "medium": "16px",
        "large": "18px"
    }
    return font_sizes.get(font_size, "16px")

with gr.Blocks() as demo:
    # Store theme preference and custom settings in browser state
    browser_state = gr.BrowserState({ #"user_preferences":
        "theme": "light",
        "font_size": "medium",})

    with gr.Row():
        gr.Markdown("# Theme Customization Demo")
    
    with gr.Row():
        theme_dropdown = gr.Dropdown(
            choices=["light", "dark", "sepia"],
            value="light",
            label="Select Theme"
        )
        font_size = gr.Radio(
            choices=["small", "medium", "large"],
            value="medium",
            label="Font Size"
        )

    preview = gr.HTML()
    
    
    def update_preview(theme, font_size,):
        theme_css = get_theme_css(theme)
        font_size = get_font_size(font_size)
        
        # Create a preview of the selected settings
        preview_html = f"""
        <div style="
            background-color: {theme_css['background']};
            color: {theme_css['text']};
            padding: 20px;
            border-radius: 8px;
            font-size: {font_size};
            display: grid;
            gap: 20px;
        ">
            <div>
                <h2 style="color: {theme_css['accent']}">Preview Content</h2>
                <p>This is how your content will look with the selected theme and settings.</p>
                <button style="
                    background-color: {theme_css['accent']};
                    color: {theme_css['background']};
                    border: none;
                    padding: 8px 16px;
                    border-radius: 4px;
                    cursor: pointer;
                ">Sample Button</button>
            </div>
        </div>
        """
        return preview_html

    def save_preferences(theme, font_size, ): 
        return {
            "theme": theme,
            "font_size": font_size,
            }

    def load_preferences(saved_prefs):
        if saved_prefs is None:
            saved_prefs = {
                "theme": "light",
                "font_size": "medium",
                }
        return (
            saved_prefs["theme"],
            saved_prefs["font_size"],
            update_preview(
                saved_prefs["theme"],
                saved_prefs["font_size"],
                )
        )

    # Update preview when any setting changes
    #for input_component in [theme_dropdown, font_size, ]: 
    theme_dropdown.change(
            fn=update_preview,
            inputs=[theme_dropdown, font_size, ], 
            outputs=[preview]
        )
    font_size.change(
            fn=update_preview,
            inputs=[theme_dropdown, font_size, ], 
            outputs=[preview]
        )
        # Save to browser state when any setting changes
    theme_dropdown.change(
            fn=save_preferences,
            inputs=[theme_dropdown, font_size, ], 
            outputs=[browser_state]
        )
    font_size.change(
            fn=save_preferences,
            inputs=[theme_dropdown, font_size, ], 
            outputs=[browser_state]
        )

    # Load saved preferences when the page loads
    demo.load(
        fn=load_preferences,
        inputs=[browser_state],
        outputs=[theme_dropdown, font_size, preview] 
    )

demo.launch()