html,
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: "Lato";
}

#mainContainer {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100%;
}

#menuBar {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
  background-color: #dddddd;
}

H1 {
  width: 100%;
  text-align: center;
  font-size: 25px;
}

.menu {
  display: flex;
  flex-direction: column;
}

.menuItem {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  list-style: none;
  border: none;
  background-color: #293e52;
  color: white;
  padding: 5px 10px 8px 10px;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 10px;
  margin-left: 0px;
  margin-right: 30px;
}

.menuItem:hover {
  background-color: #dd3333;
}

#contentPane {
  position: relative;
}

inmydata-copilot {
  flex-grow: 1;
  display: none;
  margin: 30px;
  width: calc(100% - 60px);
  height: calc(100% - 50px);
}

#chartsContainer {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: none;
}

#vis {
  width: 100%;
  height: 100%;
}

// This function opens the chat window allowing the user to ask a question on any subject
function askAQuestion() {
  addEventListener();
  document.getElementById("chat").style.display = "block";
}

// This function opens the chat window allowing the user to ask a question on a hard coded subject
function askAQuestionAboutInmystore() {
  addEventListener();
  document.getElementById("chat").setAttribute("subject", "Inmystore Sales");
  document.getElementById("chat").style.display = "block";
}

// This function opens the chat window and asks a hard coded question on a hard coded subject
function askAPredefinedQuestionAboutInmystore() {
  addEventListener();
  document.getElementById("chat").setAttribute("subject", "Inmystore Sales");
  document
    .getElementById("chat")
    .setAttribute(
      "question",
      "Give me the top 20 products for last year from the product group furniture"
    );
  document.getElementById("chat").style.display = "block";
}

// This function adds an event handler to respond when the user clicks the Show Charts button in the chat
function addEventListener() {
  document
    .getElementById("chat")
    .addEventListener("inmydata.copilot.showcharts", function (event) {
      chartDetails = event.detail;
      showCharts();
    });
}

// The chart details variable will contain the chart details returned by the showcharts event
var chartDetails = {};

// This function displays a chart. Item is the index of the chart in the array of available charts
function showChart(item) {
  document.getElementById("chartsContainer").style.display = "block";
  var vis = document.getElementById("vis");
  vis.setAttribute("show-toolbar", false);
  vis.setAttribute("show-tools", false);
  vis.setAttribute("show-tool-toggle", true);
  vis.setAttribute("copilot-session", chartDetails.chatSessionId);
  vis.setAttribute("copilot-sequence", chartDetails.aiChatMessage.sequence);
  vis.setAttribute("vis-id", chartDetails.dashboardObjectIds[item]);
  vis.render();
}

// This function is called when the user clicks the Show Charts button in the chat.
// The code below is specific to this example, simply adding the buttons in the menu
// bar to allow the user to display the charts delivered by the AI chat. 
function showCharts() {
  // First we'll build the buttons in the menu
  var chartsMenu = document.getElementById("chartMenu");
  chartsMenu.innerHTML = "";

  // The chat can return more than one chart. If it does, we'll create a button for each
  if (chartDetails.dashboardObjectIds.length > 1) {
    var i = 0;
    for (const dashboardId of chartDetails.dashboardObjectIds) {
      var entry = document.createElement("li");
      entry.appendChild(document.createTextNode("Chart " + (i + 1).toString()));
      entry.onclick = function () {
        showChart(i);
      };
      entry.className = "menuItem";
      chartsMenu.appendChild(entry);
      i++;
    }
  }

  // We'll also create a button that closes the chart view so we can see the chat
  var closeButton = document.createElement("li");
  closeButton.appendChild(document.createTextNode("Close Chart"));
  closeButton.onclick = function () {
    document.getElementById("chartsContainer").style.display = "none";
    document.getElementById("chartMenu").innerHTML = "";
  };
  closeButton.className = "menuItem";
  chartsMenu.appendChild(closeButton);
  showChart(0);
}