import numpy as np
import gradio as gr
import time


def get_random_color(rng):
    for i in range(1):
        color1 = rng.integers(low=0, high=255, size=(1, 1, 3))
        color2 = rng.integers(low=0, high=255, size=(1, 1, 3))
        color3 = rng.integers(low=0, high=255, size=(1, 1, 3))
        color4 = rng.integers(low=0, high=255, size=(1, 1, 3))
        block1 = np.concatenate((color1, color2), axis=0)
        #print(f"Shape of block: {block1.shape}")
        block2 = np.concatenate((color3, color4), axis=0)
        #print(f"Shape of block: {block2.shape}")
        block3 = np.concatenate((block1, block2), axis=1)
        #print(f"Shape of block: {block3.shape}")
    return color1, color2, color3, color4, block3
    

def color_me(num1):
    # Make some random color
    rng1 = np.random.default_rng(seed=num1)
    return get_random_color(rng1)

    
def auto_color_me():
    # Make some random color
    # Get time to be the seed
    seed = int(time.time())
    rng1 = np.random.default_rng(seed=seed)
    return get_random_color(rng1)

# Title of the blocks
with gr.Blocks() as demo1:
    image_width = 64
    image_height = 64
    
    with gr.Row():
        gr.Markdown(
            """
            # Random color mix and match
            
            The program displays four random colors and combined them together.
            
            The color can be changed from the slider or text box. The same number \
            will always give the same color.
            
            The color can also be set to change automatically by the \
            auto button. To stop the program, please close the browser tab.
            
            The color can be downloaded from the download button at the top right \
            corner to the image.
            """
        )
    
    with gr.Row():
        num1 = gr.Slider(value=10, minimum=0, maximum=1000, step=1,
            label="Value", info="Slide the bar or enter a value to change the color.")      
            
    with gr.Row():
        btn_auto = gr.Button(value="Auto change color")
        examples = gr.Examples(examples = [[82], [333], [590]], inputs=[num1])
        

    with gr.Row():  
        with gr.Column():
            color1 = gr.Image(height=image_height, width=image_width, show_label=False)
            color2 = gr.Image(height=image_height, width=image_width, show_label=False)
            color3 = gr.Image(height=image_height, width=image_width, show_label=False)
            color4 = gr.Image(height=image_height, width=image_width, show_label=False)
        with gr.Column():
            image1 = gr.Image(height=image_height*4, width=image_width*4, show_label=False)

    # Events
    # Release of slider
    num1.change(
                fn=color_me,
                inputs=[num1],
                outputs=[color1, color2, color3, color4, image1]
            )
    # Clicking on auto change color
    # Input = -1 indicate autochanging of color
    btn_auto.click(fn=auto_color_me, 
            inputs=[], 
            outputs=[color1, color2, color3, color4, image1], 
            every=1)

# Main
if __name__ == "__main__":
	demo1.launch()