import os

import streamlit as st
from openai import OpenAI
from dotenv import load_dotenv

from emojis import emojis

load_dotenv()

api_key = os.getenv("OPENAI_API_KEY")

client = OpenAI(api_key=api_key)

# set streamlit wide mode
st.set_page_config(layout="wide")

PROMPT = """A line drawing for a 4 year old childe to color in of these emojis: {emoji}
            no internal lines, no background, no color, outside lines only
            no writing, no numbers, no letters, no symbols, no words
            do not combine images or add additional elements
            do not crop the image, leave good margins around the image
            do not make the lines too thin, they should be easy to color in
            all of the images should be white or outline
            make separate images for each emoji, same number of images as emojis
            based on these emojis: {emoji}
         """


# Function to simulate generating an image based on emoji and audio input
def generate_image(emoji):
    response = client.images.generate(
        model="dall-e-3",
        prompt=PROMPT.format(emoji=emoji),
        n=1,
        size="1024x1024",
        quality="standard",
    )
    image_url = response.data[0].url
    return image_url


# Set page title
# st.title("Emoji and Audio Image Generator")

# emojis = random.sample(emojis, 10)
n_columns = 6
# make a grid shape using st.container and st.columns

left, right = st.columns([1, 2])
st.markdown(
    """
<style>
button {
    height: auto;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
button p {
    font-size: 120px;
    margin: 0;
    padding: 0;
}
</style>
""",
    unsafe_allow_html=True,
)

st.header("🎨 Click your favorite 3 emojis to generate a coloring in page\n\n")


@st.experimental_dialog("image generation")
def dialog():
    emojis = st.session_state.selected_emoji
    st.text("+".join(emojis))
    with st.spinner("Generating..."):
        image = generate_image(emojis)
        st.markdown(f"<img src='{image}'/>", unsafe_allow_html=True)
        st.session_state.selected_emoji = ""


# st.write("Choose an emoji")
# Create a container for the emojis
container = st.container()
# Create a row of columns
columns = [container.columns(n_columns) for _ in range(len(emojis) // n_columns + 1)]
# Fill the columns with emojis

selected_emoji = st.session_state.get("selected_emoji", "")

st.session_state.selected_emoji = "".join(selected_emoji)

for i, emoji in enumerate(emojis):
    row = i // n_columns
    col = i % n_columns
    with columns[row][col]:
        if st.button(emoji, key=i):
            if emoji not in st.session_state.selected_emoji:
                st.session_state.selected_emoji = (
                    st.session_state.selected_emoji + emoji
                )
            if len(st.session_state.selected_emoji) >= 3:
                dialog()