<!DOCTYPE html>
<html lang="en">

<head>
  <title>NLDB</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    th {
      text-align: left;
      font-weight: 500;
    }
    table {
      border-spacing: 0 0.1em;
    }
    td {
      padding-top: 0px;
    }
    .light-green {
      color: aquamarine;
    }
  </style>
</head>

<body class="w-100 avenir black-80 bg-pink">
  <div id="app" class="mw7 center pa2 black-80">
    <div>
      <h1 class="f-subheadline-ns f1 lh-solid mb4 near-black">
        <span class="light-green">Co</span>Da
      </h1>
      <form @submit="formSubmit">
        <label for="question" class="f4 db mb3">Your question:</label>
        <input id="question" class="input-reset f4 ba b--black-20 pa2 mb1 db w-100 br2" type="text"
          v-model.lazy="question" />
        <input id="submit" class="dim mt3 pointer ph3 pv2 input-reset ba b--black br2 bg-transparent f4 mb3"
          type="submit" :value="button_text" />
        <input id="chart" v-if="answer.length"
          class="dim mt3 ml2 pointer ph3 pv2 input-reset ba b--black br2 bg-transparent f4 mb3" @click="sendChartData"
          type="submit" :value="chart_button_text" />
      </form>
      <div class="mt0 f4" v-html="answer"></div>
      <!-- chart -->
      <div class="mt3" v-if="chart_url.length && answer.length">
        <img :src="chart_url" class="br2 shadow-1" />
      </div>
      <div class="mt3 mb2" v-if="answer.length">
        <a class="light-green dim" href="#" @click="toggleText()">show workings</a>
      </div>
      <div id="context" v-if="sql.length" v-show="display" class="mv3 f5 bg-light-pink pt2 ph2 pb1 br2 lh-copy">
        <span class="near-white">Query:</span>
        <div v-html="sql" class="mv2"></div>
        <span class="near-white">Results:</span>
        <div v-html="results" class="mv2"></div>
        <span class="near-white mt2">Cost:</span> ${{ cost }} ({{ tokens }}
        tokens)<br />
        <span class="near-white mt2">Timing:</span>
        building query: {{ parseFloat(timings[0].toFixed(3)) }},
        running query: {{ parseFloat(timings[1].toFixed(3)) }},
        explaining results: {{ parseFloat(timings[2].toFixed(3)) }}
      </div>
    </div>
  </div>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        question: "",
        answer: "",
        results: "",
        tokens: 0,
        cost: 0,
        timings: [],
        sql: "",
        button_text: "Tell me",
        chart_button_text: "",
        chart_url: "",
        display: false,
      },
      methods: {
        formSubmit(e) {
          e.preventDefault();
          app.button_text = "Working it out...";
          app.answer = "";
          app.chart_url = "";
          app.sql = "";
          api_url = "/api/ask?q=" + app.question;
          fetch(api_url)
            .then(async function (response) {
              let json = await response.json();
              let resp = json["response"];
              app.answer = resp["answer"].replace(/\n/g, "<br />");
              app.results = resp["results"];
              app.plain_text_results = resp["plain_text_results"];
              app.tokens = resp["tokens"];
              app.sql = resp["sql"];
              app.cost = parseFloat(resp["cost"].toFixed(4));
              app.timings = resp["timings"];
              app.button_text = "Tell me";
              app.chart_button_text = "Generate chart";
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        sendChartData(e) {
          e.preventDefault();
          app.chart_button_text = "Generating chart...";
          const requestData = {
            question: app.question,
            results: app.plain_text_results,
          };
          fetch("/api/chart", {
            method: "POST",
            headers: { "Content-Type": "application/json", },
            body: JSON.stringify(requestData),
          })
            .then(async function (response) {
              let json = await response.json();
              let resp = json["response"];
              app.chart_url = "/" + resp["chart"];
              console.log(app.chart_url);
              app.chart_button_text = "Chart generated";
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        toggleText() {
          this.display = !this.display;
        },
      },
    });
  </script>
</body>

</html>