import gradio as gr

def adjust_brightness(hex_color: str, percentage: int) -> str:
    # Convert hex color to RGB
    hex_color = hex_color.lstrip('#')
    r, g, b = tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

    # Calculate the adjustment factor
    factor = percentage / 100

    if factor > 0:  # Eclaircir (ajouter du blanc)
        r = int(r + (255 - r) * factor)
        g = int(g + (255 - g) * factor)
        b = int(b + (255 - b) * factor)
    else:  # Assombrir (ajouter du noir)
        r = int(r * (1 + factor))
        g = int(g * (1 + factor))
        b = int(b * (1 + factor))

    # Ensure RGB values are within the valid range
    r = min(max(0, r), 255)
    g = min(max(0, g), 255)
    b = min(max(0, b), 255)

    # Convert RGB back to hex
    return f'#{r:02x}{g:02x}{b:02x}'

def compute(primary_color, secondary_color, neutral_color):
    primary_shades = [adjust_brightness(primary_color, p) for p in [90, 75, 50, 25, 10, 0, -10, -25, -50, -75, -90]]
    secondary_shades = [adjust_brightness(secondary_color, p) for p in [90, 75, 50, 25, 10, 0, -10, -25, -50, -75, -90]]
    neutral_shades = [adjust_brightness(neutral_color, p) for p in [90, 75, 50, 25, 10, 0, -10, -25, -50, -75, -90]]

    css = f"""
:root,
.dark {{
    --primary-50: {primary_shades[0]} !important;
    --primary-100: {primary_shades[1]} !important;
    --primary-200: {primary_shades[2]} !important;
    --primary-300: {primary_shades[3]} !important;
    --primary-400: {primary_shades[4]} !important;
    --primary-500: {primary_shades[5]} !important;
    --primary-600: {primary_shades[6]} !important;
    --primary-700: {primary_shades[7]} !important;
    --primary-800: {primary_shades[8]} !important;
    --primary-900: {primary_shades[9]} !important;
    --primary-950: {primary_shades[10]} !important;
    --secondary-50: {secondary_shades[0]} !important;
    --secondary-100: {secondary_shades[1]} !important;
    --secondary-200: {secondary_shades[2]} !important;
    --secondary-300: {secondary_shades[3]} !important;
    --secondary-400: {secondary_shades[4]} !important;
    --secondary-500: {secondary_shades[5]} !important;
    --secondary-600: {secondary_shades[6]} !important;
    --secondary-700: {secondary_shades[7]} !important;
    --secondary-800: {secondary_shades[8]} !important;
    --secondary-900: {secondary_shades[9]} !important;
    --secondary-950: {secondary_shades[10]} !important;
    --neutral-50: {neutral_shades[0]} !important;
    --neutral-100: {neutral_shades[1]} !important;
    --neutral-200: {neutral_shades[2]} !important;
    --neutral-300: {neutral_shades[3]} !important;
    --neutral-400: {neutral_shades[4]} !important;
    --neutral-500: {neutral_shades[5]} !important;
    --neutral-600: {neutral_shades[6]} !important;
    --neutral-700: {neutral_shades[7]} !important;
    --neutral-800: {neutral_shades[8]} !important;
    --neutral-900: {neutral_shades[9]} !important;
    --neutral-950: {neutral_shades[10]} !important;
}}
    """
    return css

with gr.Blocks() as demo:
    primary_color_input = gr.ColorPicker(label="Primary color", value=None, elem_id="primary_color_input")
    secondary_color_input = gr.ColorPicker(label="Secondary color", value=None, elem_id="secondary_color_input")
    neutral_color_input = gr.ColorPicker(label="Neutral color", value=None, elem_id="neutral_color_input")
    
    css_output = gr.Code(label="Custom css", lines=10, language="css")

    def update_css(primary_color, secondary_color, neutral_color):
        if primary_color is None or secondary_color is None or neutral_color is None:
            primary_color = primary_color if primary_color is not None else "#3d3d3d"
            secondary_color = secondary_color if secondary_color is not None else "#4f4f4f"
            neutral_color = neutral_color if neutral_color is not None else "#454545"

        new_css = compute(primary_color, secondary_color, neutral_color)
        js_code = f"""
        <style id="dynamic-css">{new_css}</style>
        <script>
            console.log(document.querySelector('#primary_color_input label input'))
            var styleElement = document.getElementById('dynamic-css');
            if (styleElement) {{
                styleElement.innerHTML = `{new_css}`;
            }} else {{
                styleElement = document.createElement('style');
                styleElement.id = 'dynamic-css';
                styleElement.innerHTML = `{new_css}`;
                document.head.appendChild(styleElement);
            }}
        </script>
        """
        return new_css, gr.HTML(js_code)
    
    primary_color_input.change(fn=update_css, inputs=[primary_color_input, secondary_color_input, neutral_color_input], outputs=[css_output, gr.HTML()])
    secondary_color_input.change(fn=update_css, inputs=[primary_color_input, secondary_color_input, neutral_color_input], outputs=[css_output, gr.HTML()])
    neutral_color_input.change(fn=update_css, inputs=[primary_color_input, secondary_color_input, neutral_color_input], outputs=[css_output, gr.HTML()])

    gr.Interface(
        fn=update_css,
        inputs=[primary_color_input, secondary_color_input, neutral_color_input],
        outputs=[css_output, gr.HTML()],
        examples=[
            ["#f97316", "#3b82f6", "#6b7280"],
            ["#e84393", "#6c5ce7", "#b2bec3"],
            ["#38ada9", "#60a3bc", "#3c6382"]
        ]
    )

if __name__ == "__main__":
    demo.launch()