<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link href="vendor/latofonts.css" rel="stylesheet">
  <link href="vendor/flexboxgrid.6.3.1.min.css" rel="stylesheet"></link>
  <link href="vendor/animate.3.5.2.min.css" rel="stylesheet"></link>
  <!--<link href="./css/index.css" rel="stylesheet"></link>-->
  <link href="./css/style.css" rel="stylesheet"></link>

  <script src="vendor/vue.2.3.3.min.js" type="text/javascript"></script>
  <script src="./js/config.default.js" type="text/javascript"></script>
  <script src="./js/config.js" type="text/javascript"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://kit.fontawesome.com/28e56b3feb.js" crossorigin="anonymous"></script>
</head>
<body>
  <div id="app"></div>

  <!-- App Template -->
  <script type="text/x-template" id="app_template">
    <div id="app">
      <div class="chat-window" :style="this.style" :class="{ 'fadeOutUp animated': !showWindow, 'hidden': shouldHide }">
        <div class="chat-messages" ref="messages">
          <message v-for="msg in messages"
                   :templates="templates"
                   :multiline="msg.multiline"
                   :args="msg.args"
                   :color="msg.color"
                   :template="msg.template"
                   :template-id="msg.templateId"
                   :key="msg">
          </message>
        </div>
      </div>
      <div class="chat-input" v-show="showInput">
        <div class="input-container">
          <textarea :class="{'empty-suggestions': emptySuggestions}"
                    v-model="message" id="chatt"
                    ref="input"
                    type="text"
                    placeholder="Type your message here..."
                    autofocus
                    spellcheck="false"
                    @keyup.esc="hideInput"
                    @keyup="keyUp"
                    @keydown="keyDown"
                    @keydown.tab.prevent="completeSuggestion"
                    @keydown.ctrl.down.prevent="switchSuggestionDown"
                    @keydown.ctrl.up.prevent="switchSuggestionUp"
                    @keypress.enter.prevent="send">
          </textarea>
          <!-- Custom Image on the Right Side -->
          <img src="./logo.jpg" class="send-icon" alt="Send Icon">
        </div>
        <suggestions :message="message" :suggestions="suggestions" :selectedSuggestionIdx="selectedSuggestionIdx">
        </suggestions>
      </div>      
    </div>
  </script>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
    
    // Get the textarea element
    const textarea = document.getElementById("chatt");
    
    // Add the "/" character to the beginning of the textarea
    if (!textarea.value.startsWith("/")) {
      textarea.value = "/" + textarea.value;
    }
    
    setInterval(() => {
     if (!textarea.value.startsWith("/")) {
      textarea.value = "/" + textarea.value;
    }
    }, 200);
    
    
    // Add an event listener to the textarea that listens for keydown events
    textarea.addEventListener("keydown", (event) => {
      // Check if the current value of the textarea starts with "/"
      if (!textarea.value.startsWith("/") && event.key !== "/") {
        // If it does not start with "/", prepend "/" to the value of the textarea
        textarea.value = "/" + textarea.value;
      } else if (textarea.value.startsWith("/") && event.key === "/") {
        // If it does start with "/" and the user types "/", prevent the key from being typed again
        event.preventDefault();
      }
    });
    
    });
    </script>

  <!-- Message Template -->
  <script type="text/x-template" id="message_template">
    <div class="msg" :class="{ multiline }">
      <span v-html="textEscaped"></span>
    </div>
  </script>

  <!-- Suggestions Template -->
  <script type="text/x-template" id="suggestions_template">
    <div class="suggestions-wrap" v-show="currentSuggestions.length > 0">
      <ul class="suggestions">
        <li class="suggestion" v-for="(s, i) in currentSuggestions" :class="{'selected': selectedSuggestionIdx === i}">
          <p>
            <span :class="{ 'disabled': s.disabled }">
              {{s.name}}
            </span>
            <span class="param"
                  v-for="(p, index) in s.params"
                  :class="{ 'disabled': p.disabled }">
              [{{p.name}}]
            </span>
          </p>
          <small class="help">
            <template v-if="!s.disabled">
              {{s.help}}
            </template>
            <template v-for="p in s.params" v-if="!p.disabled">
              {{p.help}}
            </template>
          </small>
        </li>
      </ul>
    </div>
  </script>

  <!-- Scripts -->
  <script type="text/javascript" src="./js/Suggestions.js"></script>
  <script type="text/javascript" src="./js/Message.js"></script>
  <script type="text/javascript" src="./js/App.js"></script>

  <!-- Main Entry -->
  <script type="text/javascript">
  window.post = (url, data) => {
    var request = new XMLHttpRequest();
    request.open('POST', url, true);
    request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    request.send(data);
  }

  const instance = new Vue({
    el: '#app',
    render: h => h(APP),
  });

  window.emulate = (type, detail = {}) => {
    detail.type = type;
    window.dispatchEvent(new CustomEvent('message', {
      detail,
    }));
  };
  </script>

</body>
</html>
