import ubinascii
import machine
import time
import _thread
import socket
import select
import network
import gc

#import esp
#esp.osdebug(None)
gc.collect()

##############################################################################################################
#
#
#
#
##############################################################################################################
##  Fonctions pour le serveur WEB                                                                           ##
##############################################################################################################
#
#
##############################################################################################################
#...Pour creer des boutons dans la page html
##############################################################################################################
class serveur_web :

    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    function_to_start = None
    mode_list = []
    
    ##############################################################################################################
    def __init__(self,func,mode_list):
        ##############################################################################################################
        ##  Initialisation du serveur web                                                                           ##
        ##############################################################################################################
        gc.collect()
        print(' ---    Initialisation du serveur WEB --- ')
        time_Start= time.ticks_ms()
        self.sock.settimeout(None)
        self.sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
        self.sock.bind(('', 80))
        self.sock.listen(5)
        self.function_to_start = func
        self.mode_list = mode_list
        
    ##############################################################################################################
    def Serveur_web_Thread(self):
      print(' ---    Demarrage du serveur web --- ')
      while True:
        #...Request
        conn, addr = self.sock.accept()
        print('Got a connection from %s' % str(addr))
        try:
          self.client_handler(conn)
          conn.close()
        except OSError as e:
          pass

    ##############################################################################################################
    def send_web_page(self,conn):
    
      ##########################################################
      def button_in_html(titre,key_html):
        res = f"""
                  <div class="insideBox">
                      <p> 
                          <a href="/?{key_html}=on"><button class="button">{titre}</button></a>
                      </p>
                  </div>
                 """
        return res
      ##########################################################
      html  = """<html>
            <head>
            <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
            <title>Station météo </title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta http-equiv="refresh" content="500" >
            <link rel="icon" href="data:,">
      """
      conn.sendall(html)
    
      ###############################################################
      #...Definition du style
      html  = """
             <style>
                body{
                    background-color: rgba(232, 222, 209, 0.3);
                    font-family: 'Lato', sans-serif;
                    width:75%;
                    margin: auto;
                    text-align: center;
                }
      
                p{
                    font-size: 1.5rem;
      
                }
      
                h1, h2, h3, h4, h5, h6{
                    font-family: 'Montserrat', sans-serif;
                    text-transform: uppercase;
                    letter-spacing: .3rem;
                }
      
                h1{
                    color: #0F3376;
                    margin-top: 5%;
                    font-size: 3rem;
                }
      
                h2{
                    font-size: 2rem;
                }
      
                /*
                table{
                font-size: 2rem;
                text-align:left;
                }
                */
      
                .insideBox{
                    margin:auto;
                    width=75%;
                    background-color: #fff;
                    padding:5%;
                    margin-bottom: 5%;
                    text-align: center;
                }
      
                button{
                    display: inline-block;
                    border: none;
                    border-radius: 4px;
                    margin: 2px;
                    padding: 16px 40px;
                    font-size: 20px;
                    color: white;
                    cursor: pointer;
                }
      
                .button{
                    background-color: #e7bd3b;
                }
      
                .button2{
                    background-color: #4286f4;
                }
      
                .grid-container {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    grid-gap: 1%;
                    margin-bottom: 5%;
                }
                
                .grid-container-3 {
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr;
                    grid-gap: 1%;
                    margin-bottom: 5%;
                }
      
                .grid-container-4 {
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr 1fr;
                    grid-gap: 1%;
                    margin-bottom: 5%;
                }
      
                .iconIndicator{
                    font-size: 3rem;
                }
      
            </style>
        </head>
        <body>
      """
      conn.sendall(html)
      
      ###############################################################
      #...Affichage du titre
      html  = """
      <!--
      <div class="outsideBox">
      -->
            <div class="insideBox">
            <h3> Controle de ma lampe LEDs</h3>
                    <p>           
                        <a href="/?mode0=on"><button class="button2">OFF</button></a>
                    </p>
            </div>
      """
      conn.sendall(html)
    
      html  = """
            <div class="insideBox">
                <h3>Différents mode disponibes</h3>
      """
      conn.sendall(html)
    
      ###############################################################
      #...Controle des led depuis la page WEB
      html  = """
            <div class="grid-container-3">
              """
      i=0
      for mode_name in self.mode_list:
          i += 1
          html += button_in_html(mode_name,f'mode{i}')
          
      html +="""
            </div>
    
       """
      conn.sendall(html)
    
      ###############################################################
      #...fin
      html  = """
                </div>
            </div>
      
        </body>
      </html>
      """
      conn.sendall(html)
      return

    ###############################################################################################################
    def client_handler(self,conn):
      poller = select.poll()
      poller.register(conn, select.POLLIN)
      res = poller.poll(300)  # time in milliseconds
      if not res:
          return
      request = conn.recv(1024)
      request = str(request)

      StartMode = self.function_to_start

      if request.find('/?mode0=on') == 6:  StartMode(0)
      i=0
      for mode_name in self.mode_list:
          i += 1
          if request.find(f'/?mode{i}=on')  == 6:  StartMode(i)
                                                            
      #...Response
      conn.send('HTTP/1.1 200 OK\n')
      conn.send('Content-Type: text/html\n')
      conn.send('Connection: close\n\n')
      self.send_web_page(conn)
      return

    ##############################################################################################################
    def start(self):
        _thread.start_new_thread(self.Serveur_web_Thread, ())
        gc.collect()

