//alert("Nasest");
wrapper = document.getElementsByClassName("content-wrapper")[0];

chatbot_html = `<div class="chatBoxContainer">
      <div class="chatBox" id="chatBox"  style="display:none;z-index: 9999;">
        <header>
          <div class="chatBoxProfile text-center ">
            <img src="/static/chatbot/img/robot.svg" style="width: 25px;height: 25px;">
          </div>
          <span class="chatBoxTitle">HubStation LM</span>
          <div class="chatBoxCross" onclick="chatBox.hide()" ><img src="/static/chatbot/img/cross.svg"></div>
        </header>
        <div class="chatBoxMessages" id="chatBoxMessages">
          <div class="chatBoxMessage chatBoxMessageR"  > 
              <div> <b>Bonjour, Quelles informations vous faut-il ?</b></div>
          </div>
        </div>
        <footer>
          <textarea id="chatBoxTextarea" v-model="message" placeholder="Entrez un message"></textarea>
          <span class="btn btn-primary"  onclick="chatBox.send()"><!-- <img onclick="chatBox.send()" src="/static/chatbot/img/mail.svg">--><i class="fas fa-paper-plane"></i></span>
        </footer>
    </div>
    <div id="chatBoxButton" class="chatBoxPlus" style="z-index: 99999;" onclick="chatBox.show()"><img src="/static/chatbot/img/robot.svg"></div>
</div>
`;

//--- chat dictionnary -------------------------------
const chatBoxDico = {
  "bonjour":"Bonjour à vous aussi",
  "Merci":"Je vous remerci aussi",
  "Aurevoir": "Aurevoir aussi"
}

//------- chatBox object ---------------------------------------------------------


async function printMessage(html,htmlInput,response){
    //--- display the response ---------------
    html.innerHTML +=`<div
    class="chatBoxMessage chatBoxMessageR"
    > <div> ${response}</div></div>`
    htmlInput.value = ""
    //------ scroll untill the end -----
    //await waitDelay(300)
    html.scrollTop = 10000000;
}

async function getData(html,htmlInput,entries) {
  try {
    const response = await fetch(`/hub/IA_chat/?message="${entries}"`);
    const data = await response.json();//.json();
    console.log(data);
    printMessage(html,htmlInput,data.answer)
  } catch (error) {
    console.error('Erreur:', error);
  }
}



const chatBox = {
  html: document.getElementById("chatBoxMessages"),
  htmlInput: document.getElementById("chatBoxTextarea"),
  defaultResponse:"D'accord, je vous renvoie ces informations ...",
  hide: ()=> {
    document.getElementById("chatBoxButton").style.display = 'flex'
    document.getElementById("chatBox").style.display = 'none'
  },
  show: ()=> {
    document.getElementById("chatBoxButton").style.display = 'none'
    document.getElementById("chatBox").style.display = 'flex'
  },
  send: async function () {
    function waitDelay(t){
      return new Promise((resolve) => {
          setTimeout(resolve, t);
      })
    }
 
    this.htmlInput = document.getElementById("chatBoxTextarea");
    this.html = document.getElementById("chatBoxMessages");
    //--------------------------------------------
    let toSearch = this.htmlInput.value
    if(toSearch == "") return
    let htmlTemp = this.html.innerHTML
    this.html.innerHTML +=`<div
    class="chatBoxMessage"
    > 
      <div> ${toSearch}
      </div>
    </div>`
    this.html.scrollTop = 10000000
    await waitDelay(1100) //--- fake loading
    //----- after fake loading ------------------------------
    this.html.innerHTML = htmlTemp + `<div
    class="chatBoxMessage"
    > <div> ${toSearch}</div> </div>`
    await waitDelay(300)
    //--------- chatBox check if word recognize  --------------------
    toSearch = toSearch.toLowerCase()
    this.htmlInput.value = ""
  //alert("sds")
    getData(this.html,this.htmlInput,toSearch);

  }
}



wrapper.innerHTML += chatbot_html;
//wrapper.style.backgroundColor = "orange"

$(".addlink").html("<i class='fas fa-plus'> </i>");
$(".viewlink").html("<i class='fas fa-play'> </i>");
$(".changelink").html("<i class='fas fa-pencil'> </i>");

//alert("sdsdaaaa")

$(".flex-grow-1").addClass("flex-wrap");

$(".import_link").addClass("d-block");
$(".export_link").addClass("d-block");
//$(".btn-group").removeClass("float-right")

navbar_nav_header = document.getElementsByClassName("navbar-nav")[1];
navbar_lang_selector = navbar_nav_header.getElementsByClassName("fa-globe")[0];
navbar_lang_selector.className = "fas fa-language";

okira_apps_download = `
<li class='nav-item'>  
<a class="nav-link btn" href="/hub/features/" title="" >
<img src="/static/hub/img/okira_logo.png" style="width:30px;height:30px;">
</a>
</li>`;

navbar_nav_header.innerHTML += okira_apps_download ;

jazzy_user = document.getElementById("jazzy-usermenu");
jazzy_user.style.position = "absolute";
jazzy_user.style.left = "-140px";

//navbar_nav_header.style.display = "none";
