import streamlit as st
from io import BytesIO

# Create a sidebar to display the list of uploaded files
uploaded_files = st.sidebar.empty()

# Use the file uploader to accept multiple files
files = st.file_uploader("Choose files", accept_multiple_files=True)

# Create a div to display the uploaded files
div = st.empty()

# Initialize a list to store the uploaded files
file_list = []

# Loop through the uploaded files and add them to the file list
for file in files:
    # Read the file as bytes
    bytes_data = file.read()

    # Add the file to the file list
    file_list.append(bytes_data)

    # Update the sidebar to display the list of uploaded files
    uploaded_files.write([file.name for file in files])

# Use HTML and CSS to style the div and move it around the screen
div.markdown("""
    <style>
        .sticky {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px;
            background-color: #f5f5f5;
            border: 1px solid #d3d3d3;
            border-radius: 4px;
            text-align: center;
            font-size: 18px;
            box-shadow: 2px 2px #888888;
        }
    </style>
""", unsafe_allow_html=True)

# Add the uploaded files to the div as an anchor tag with an image that opens in a new tab
if file_list:
    for file in file_list:
        url = "https://huggingface.co/spaces/awacke1/CardCrafter-CraftCustomCards"  # Replace with the URL to open when the image is clicked
        div.markdown(f'<a href="{url}" target="_blank"><img src="{file.name}" class="sticky"></a>', unsafe_allow_html=True)