from pyweb import pydom
from pyscript import document
import locale
locale.setlocale(locale.LC_ALL, 'fr_FR.UTF-8')


from client import MeteoFranceClient
from const import METEOFRANCE_API_URL
from datetime import date
import urllib3
import js


global ystr
ystr='toto'

def memor_place(ystr):
  js.localStorage.setItem('mem_place', ystr)
  
def defaut_place():
  js.localStorage.setItem('mem_place', "Saint Martin de Caralp")
  
def xxw_xurl(e) : 	
    elem = pydom["#ystrHTML"][0]
    xtxt = elem.html
    xtxt=f"page_jc?place={xtxt}"
    elem=pydom["#xurl"][0]
    elem.html = xtxt 

def q(selector, root=document):
    return root.querySelector(selector)
    
def trait_xstr():
    xstr=''
    
def hide_page():  
	xinput = pydom["#page_after_loader"][0] 
	xinput._js.style.display="none"		
	
def show_page():  
	xinput = pydom["#page_after_loader"][0] 
	xinput._js.style.display="block"
		
def hide_loader():  
	xinput = pydom["#loader-container"][0] 
	xinput._js.style.display="none"	
	show_page()	
 
def effaceInputText() :
    xinput = pydom["#xstr_recherche_Input1"][0]
    xinput._js.value = ''
    
def setInputText(ytxt) :
    xinput = pydom["#xstr_recherche_Input1"][0]
    xinput._js.value = ytxt

def raz_template():
    if (len(places) > 0):
        del places[:]
        xtpl = document.querySelectorAll('[id^=place]')
        for xele in xtpl: 
            xele.textContent = ''
    
def xstr_fct(e):
    raz_template()
    xstr=""
    xhtml=pydom["#xstr_recherche_Input1"][0]
    xstr = xhtml.value
    places_obj = client.search_places(xstr)
    for tbl in places_obj:
        add_place(tbl.insee,tbl.name,tbl.latitude,tbl.longitude)
            
def choix_place(event):    
    objetClique = event.target
    xid = event.target.id
    xelem = document.getElementById(xid)
    ystr=xelem.innerHTML
    ystrHTML = pydom["#ystrHTML"][0]
    ystrHTML.html = ystr
    setInputText(ystr)
    memor_place(ystr)
    raz_template()    

def add_place(insee, nom, latit, longit):
    place_id = f"place-{len(places)}"
    place = {
        "id": place_id,
        "insee" : insee,
        "name": nom,
        "lat" : latit,
        "long" : longit,
    }
    places.append(place)
    place_html = place_template.clone()    
    place_html.id = place_id
    place_html_content = place_html.find("a#ligne_place")[0]	#il faut aller en profondeur pour trouver la classe et l'id...   
    place_html_content.id = f"ligne_place-{place_id}"		    
    place_html_content._js.textContent = place["name"]    
    places_liste.append(place_html) 
    
if not js.localStorage.getItem('mem_place'):
	defaut_place()
	
effaceInputText()


place_template = pydom.Element(q("#place_template").content.querySelector(".place"))
places_liste = pydom["#liste_places_container"][0]
places = []

xhtml= pydom["#xstr_recherche_Input1"][0]
xhtml.html=""

#on récupère la liste des id des éléments cliquables avec le joker contient 'choix_place':
cliquables = js.document.querySelectorAll('[id^=ligne_place]')

# on affecte à chacun des élémentsde cette liste un évènement
for elem in range(len(cliquables)):     
    btn1=cliquables[elem]
    xtxt=btn1.id
    print("id button :",xtxt)
    add_event_listener(btn1, 'click', choix_place)
   
urllib3.disable_warnings()
client = MeteoFranceClient()
  
xhtml = pydom["#place_enreg"][0]
xhtml.html=js.localStorage.getItem('mem_place')
hide_loader()