import { Select } from "@observablehq/inputs";
viewof tableSelector = Select(
  ["Overall Learning Score", "Weekly Coding Checkups Score", "In-Class Participation", "Teams Participation", "Professionalism", "Others"], 
  {
    label: "Choose a category:",
    width: "90%", // Slightly reduce width for better spacing
    padding: "10px", // Add padding
    style: {
      "background-color": "#0d6efd", // Static blue color (Bootstrap primary color)
      "color": "#ffffff", // White text for contrast
      "border-radius": "5px", // Rounded corners
      "border": "1px solid #0d6efd", // Border matches background
      "font-size": "16px", // Font size for better readability
      "padding": "8px", // Padding for dropdown options
      "cursor": "pointer" // Change cursor to pointer
    }    
  }
)

html`<div id="table-container" style="overflow-x:auto; max-width: 100%;"></div>`

{
  const selectedTable = tableSelector;
  let tableHTML;

  if (selectedTable === "Overall Learning Score") {
    tableHTML = final_overall_table_html;
  } else if (selectedTable === "Weekly Coding Checkups Score") {
    tableHTML = final_weekly_activity_table_html;
  } else if (selectedTable === "In-Class Participation") {
    tableHTML = final_in_class_table_html;
  } else if (selectedTable === "Teams Participation") {
    tableHTML = final_teams_table_html;
  } else if (selectedTable === "Professionalism") {
    tableHTML = final_professional_table_html;
  } else if (selectedTable === "Others") {
    tableHTML = final_others_table_html;
  } else {
    tableHTML = final_overall_table_html;
  }

  document.getElementById("table-container").innerHTML = tableHTML;
  // Explicitly return nothing to prevent "undefined" from being displayed
  return selectedTable ;
}