from fasthtml.common import *
from openai import OpenAI # openai==1.2.0
from dotenv import load_dotenv, find_dotenv
_ = load_dotenv(find_dotenv())

upstage_token  = os.getenv('UPSTAGE_TOKEN')

# Set up the app, including daisyui and tailwind for the chat component
hdrs = (picolink, Script(src="https://cdn.tailwindcss.com"),
    Link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css"))
#app = FastHTML(hdrs=hdrs, cls="p-4 max-w-lg mx-auto")
app = FastHTML(hdrs=hdrs)

#app = FastHTML()
rt = app.route

style="""
#mapid { height: 480px; }
"""

js = """
let map = null;
function load()
{
	//map = L.map('mapid').setView([37.5158, 127.0991], 13);
	map = L.map('mapid').setView([33.4311, 126.5499], 10);
	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    maxZoom: 19,
	    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);
	//alert('loading...');



	$( "#chat_form" ).on( "submit", function( event ) {
  		//alert( "Handler for `submit` called." );
  		//event.preventDefault();
		setTimeout(handle_post, 15000);
	});


	//messages_input = $("#chat_form :input[name='messages']");
	//alert(messages_input);
	//console.log(messages_input);
	//messages_input.change(function(){
	  //alert("The text has been changed.");
	//});
}

function handle_post() {
//messages_input = $("#chat_form :input[name='messages']").value;
messages_input = $( "input" ).last().val()
//alert(messages_input);
console.log(messages_input);
res = JSON.parse(messages_input);
//var marker = L.marker([51.5, -0.09]).addTo(map);

var rec_list = res['recommendations']

//alert(rec_list);
console.log(rec_list);

rec_list.forEach((elem) => addElem(elem));

}

function addElem(elem)
{
	//var marker = L.marker([elem['latitude'], elem['longitude']]).addTo(map);
	var marker = L.marker([elem['longitude'], elem['latitude']]).addTo(map);
	marker.bindPopup(elem['name'])

}




setTimeout(load, 1000);

"""

# @rt('/')
# def get():
# 	return Titled("MinorityMap",
# 		Link(rel="stylesheet", href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"),
# 		Style(style),
# 		Script(src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"),
# 		#Body(onload='load()'),
# 		Div(id='mapid'),
# 		Script(js)
# 		)





client = OpenAI(
    api_key=upstage_token,
    base_url="https://api.upstage.ai/v1/solar"
)

sp = "You are a helpful and concise assistant."

def get_completion(prompt, model="solar-1-mini-chat"):
    messages = [{"role": "user", "content": prompt}]
    response = client.chat.completions.create(
        model=model,
        messages=messages,
        temperature=0, # this is the degree of randomness of the model's output
    )
    return response.choices[0].message.content

def get_completion_from_messages(messages, model="solar-1-mini-chat", temperature=0):
    response = client.chat.completions.create(
        model=model,
        messages=messages,
        temperature=temperature, # this is the degree of randomness of the model's output
    )
    return response.choices[0].message.content

# Chat message component (renders a chat bubble)
def ChatMessage(msg, user):
    bubble_class = "chat-bubble-primary" if user else 'chat-bubble-secondary'
    chat_class = "chat-end" if user else 'chat-start'
    return Div(cls=f"chat {chat_class}")(
               Div('user' if user else 'assistant', cls="chat-header"),
               Div(msg, cls=f"chat-bubble {bubble_class}"),
               Hidden(msg, name="messages")
           )

# The input field for the user message. Also used to clear the
# input field after sending a message via an OOB swap
def ChatInput():
    return Input(name='msg', id='msg-input', placeholder="Type a message",
                 cls="input input-bordered w-full", hx_swap_oob='true')

# The main screen
@app.get
def index():
    return Titled("MinorityMap",
		Link(rel="stylesheet", href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css"),
		Script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"),
		Script(src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"),
		Link(rel="stylesheet", href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"),
		Style(style),
		Script(src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"),
		#Body(onload='load()'),
		Form(id="chat_form", hx_post=send, hx_target="#chatlist", hx_swap="beforeend")(
			   Div(id='mapid'),
	               Div(cls="flex space-x-2 mt-2")(
	                   Group(ChatInput(), Button("Send", cls="btn btn-primary"))
	               )
	           ),
			   Div(id="chatlist", cls="chat-box h-[73vh] overflow-y-auto"),
		Script(js)
		)

# Handle the form submission
@app.post
def send(msg:str, messages:list[str]=None):
    if not messages: messages = []
    messages.append(msg.rstrip())
    print(messages[0])
    post_append_str = ' Return as a JSON response with GeoLocation'
    r = get_completion(messages[0] + post_append_str) # get response from chat model
    return (ChatMessage(msg, True),    # The user's message
            ChatMessage(r.rstrip(), False), # The chatbot's response
            ChatInput()) # And clear the input field via an OOB swap

serve()