import streamlit as st
from PIL import Image

# Placeholder image setup
placeholder_images = [
    Image.open('data/image1.jpg'),  # Replace 'image1.jpg' with your placeholder image paths 
    Image.open('data/image2.jpg'),
    Image.open('data/image3.jpg'),
    Image.open('data/image4.jpg'),
    Image.open('data/image5.jpg')
]

def rearrange(order):
    dynamic_container = st.container()

    new_image_order = [placeholder_images[int(o) - 1] for o in order if o.isdigit() and 0 < int(o) <= len(placeholder_images)]
    new_input_order = [st.session_state.get(f"input_{o}", "") for o in order if o.isdigit() and 0 < int(o) <= len(placeholder_images)]
    new_output_order = [st.session_state.get(f"output_{o}", "") for o in order if o.isdigit() and 0 < int(o) <= len(placeholder_images)]

    # Update display
    for i, o in enumerate(order):
        if o.isdigit() and 0 < int(o) <= len(placeholder_images):
            cols = dynamic_container.columns(3)
            cols[0].image(new_image_order[i], width=100)
            input_key = f"input_{o}_{i}"  # Ensure unique key by including both order and index
            output_key = f"output_{o}_{i}"  # Ensure unique key by including both order and index
            cols[1].text_input(f"Input {o}", value=new_input_order[i], key=input_key)
            cols[2].text_area(f"Output {o}", value=new_output_order[i], height=100, key=output_key)

st.title("Image Rearrangement App")

# Overall Input
order = st.text_input("Enter image order (e.g., 12345, 112, 54321)", key="order_input")

# Validate order input
valid_order = order and all(o.isdigit() and 0 < int(o) <= len(placeholder_images) for o in order)

if valid_order:
    # Call the rearrange function when data is present and valid
    rearrange(order)
else:
    st.error("Please enter a valid order using numbers 1-5, which can be repeated or less than 5 characters long.")