from __future__ import annotations
import gradio as gr
from gradio.themes.base import Base
from gradio.themes.utils import colors, fonts, sizes
import base64
import requests
import json
import os
class BaseTheme(Base):
    def __init__(
        self,
        *,
        primary_hue: colors.Color | str = colors.orange,
        secondary_hue: colors.Color | str = colors.blue,
        neutral_hue: colors.Color | str = colors.gray,
        spacing_size: sizes.Size | str = sizes.spacing_md,
        radius_size: sizes.Size | str = sizes.radius_md,
        text_size: sizes.Size | str = sizes.text_lg,
    ):
        super().__init__(
            primary_hue=primary_hue,
            secondary_hue=secondary_hue,
            neutral_hue=neutral_hue,
            spacing_size=spacing_size,
            radius_size=radius_size,
            text_size=text_size,
        )

basetheme = BaseTheme()

js_func = """
function refresh() {
    const url = new URL(window.location);

    if (url.searchParams.get('__theme') !== 'dark') {
        url.searchParams.set('__theme', 'dark');
        window.location.href = url.href;
    }
}
"""
def process(description):
    # Define the API endpoint and headers
    url = os.getenv("ENDPONT")
    headers = {
        "Content-Type": "application/json"
    }

    # Define the payload
    payload = {
        "text": description
    }

    # Make the POST request
    response = requests.post(url, headers=headers, data=json.dumps(payload))

    # Process the response
    if response.status_code == 200:
        data = response.json()
        category = data["results"].get("Category", "No Category Found")
        reasoning = data["results"].get("Reasoning", "No Reasoning Found")
        return category, reasoning
    else:
        return "Error", "An error occurred while processing the request"
        
    

# Convert the images to Base64
with open("logo_vistec.png", "rb") as logo_file:
    base64_logo = base64.b64encode(logo_file.read()).decode("utf-8")

# Gradio app
with gr.Blocks(title="Classification category of incident",theme=basetheme,js=js_func) as demo:
    # Add logo at the top using Base64 HTML
    with gr.Row():
        gr.HTML(
            f"""
                <div style="display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center;">
                    <div style="justify-self: start;">
                        <img src="data:image/png;base64,{base64_logo}" alt="Logo" style="width: 150px; height: auto;">
                    </div>
                    <div style="justify-self: center;">
                        <h2 style="margin: 0; text-align: center;">Classification category of incident</h2>
                    </div>
                    <div></div>
                </div>
            """
        )

    with gr.Row():
        with gr.Column():
            description_input = gr.Textbox(lines=15, label="รายละเอียดของการเกิดเหตุ")
            
            with gr.Row():
                clear_button = gr.Button("Clear")
                # Add two buttons: standard submit button and image-based button
                submit_button = gr.Button("Submit",variant="primary")
        with gr.Column():
            category_box = gr.Textbox(label="ประเภทของเรื่อง") 
            reasoning_box = gr.Textbox(label="เหตุผล", lines=5)


    # Link functionality to the standard submit button
    submit_button.click(
        fn=process,
        inputs=[description_input],
        outputs=[category_box, reasoning_box],
    )
    clear_button.click(
        fn=lambda: ("", "", ""),
        inputs=[],
        outputs=[description_input, category_box, reasoning_box]
    )


# Launch Gradio app
if __name__ == "__main__":
    demo.launch()