import gradio as gr
import requests, base64, io
from dotenv import load_dotenv
import os, datetime, mimetypes
from gradio import Request

load_dotenv()
API_URL = os.environ.get("API_URL", "http://0.0.0.0:8021")
APP_ENV = os.environ.get("APP_ENV", None)



# Assuming the API returns an image URL in the response
def generate_image(campaign_details):


    # Define your payload/data to send to the image generation API
    data = {
        "request_string": campaign_details,
        "is_single_image": False
    }

    # Make the API call
    response = requests.post(
        API_URL + "/generate_graphic",
        json=data,
        timeout=900  # Timeout set to 15 minutes (900 seconds)
    )

    # Ensure the API call was successful
    if response.status_code != 200:
        print(f"Error {response.status_code}: {response.text}")
        return "Error: Unable to fetch image from the external API."

    image_data = response.json()

    data_url = image_data['image_url']
    image_desc = image_data['image_description']

    return data_url


content_html = """
<div style="text-align: center; margin-top: 30px;">
    <h2>Slidegen Examples</h2>
    <div style="display: flex; justify-content: space-around; align-items: center;">
        <!-- Displaying one video -->
        <video controls width="30%">
            <source src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/IxuuqPhmIX3Jggqkeiseb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <!-- Displaying two images -->
        <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/f4xH6ZNx1rVbKzr8jAHmt.png" alt="Image Description 1" style="width: 30%; margin: 0 10px;">
        <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/A9BoWW2ulZycv0OQaihKO.png" alt="Image Description 2" style="width: 30%; margin: 0 10px;">
    </div>
</div>

"""

default_value = """
# Brand Name
Enter your brand name here

## Description
Enter your description here.

---

## Branding

### Colors
Primary Color: i.e #000000
Secondary Color: i.e #FFFFFF

### Font
Enter Google font here i.e Arial

### Logo
Enter your logo url here.

---

## Audience
Enter your target audience here.

---

## Headings
### Main Heading
Your main heading text here.

### Sub-heading
Your sub-heading text here.

---

## Image Layout
Selected Layout: Mobile Portrait (750x1334)

**Examples of layouts: Mobile Portrait (750x1334), Mobile Landscape (940x470), Square (2048x2048)


---

## Custom Graphics
Enter your custom graphic prompt here.

## Custom Graphics Image Layout
Feature Image Background Color (Optional): i.e #008000

"""


# Escape default_value for JavaScript
escaped_default_value = default_value.replace('\n', '\\n').replace('\'', '\\\'')
js = f'''

function js() {{

   // let default_value = '{escaped_default_value}';
    window.set_cookie = function(key, value) {{
     //   if (!key || !value || value.length < 20) {{
     //       console.log("Cannot set cookie, key or value is undefined or null", key, value);
    //        console.log("default value set to: ", default_value);
    //        return [default_value];
    //    }}
    //    document.cookie = key + '=' + value + '; Path=/; SameSite=Strict';
    //    return [value];
    }}
}}
'''


def get_config(request: Request):

    if not request or not hasattr(request, 'cookies'):
        return default_value

    # Initialize with default value
    config = {"campaign_details": default_value}
    # Check if 'campaign_details' is in cookies
    if 'campaign_details' in request.cookies:
        # Assign cookie value to config if exists
        config_value = request.cookies.get('campaign_details', None)
        if config_value:
            if len(config_value) > 20:
                config['campaign_details'] = config_value
        else:
            print("Cookie 'campaign_details' is found but empty, using default_value")
    else:
        print("Cookie 'campaign_details' not found, using default_value")

    print(f"Config returned: {config['campaign_details']}")  # Debugging log
    return config['campaign_details']


with gr.Blocks(analytics_enabled=False) as iface:

    campaign_details_input = gr.Textbox(
        lines=10,
        placeholder="Enter your Brand and campaign details here",
        label="Campaign Details",
        value=default_value
    )

    campaign_details_input.change(
        fn=None,
        inputs=campaign_details_input,
        outputs=[],
        js="(value) => { console.log('Setting cookie:', value); set_cookie('campaign_details', value); }"
    )

    gr.Interface(
        fn=generate_image,
        inputs=campaign_details_input,
        outputs=[
            gr.components.Image(label="Generated Image")
        ],
        title="Slidegen AI - Image generator",
        article=content_html,
        description="Generate social media creatives from a few prompts",
        live=False,
        js=js
    )

    #iface.load(fn=get_config, outputs=campaign_details_input, js=js)



iface.launch(show_error=True)