script.js

// Initialize CodeMirror editors
// Initialize CodeMirror editors with enhanced auto-completion
const htmlEditor = CodeMirror(document.getElementById("html-container"), {
  mode: "htmlmixed", // for HTML, CSS, and JS mixed content
  lineNumbers: true,
  theme: "dracula",
  placeholder: "Write HTML code here...",
  extraKeys: { "Ctrl-Space": "autocomplete" },
  matchBrackets: true, // Auto-close brackets
  autoCloseBrackets: true, // Close brackets automatically
  autoCloseTags: true, // Auto-close HTML tags
  hintOptions: {
    schemaInfo: true,
  },
  lint: true, // Optionally enable linting for validation
  htmlMode: true, // Enable HTML-specific features
  lineWrapping: true, // Optional for line wrapping
});

const cssEditor = CodeMirror(document.getElementById("css-container"), {
  mode: "css",
  lineNumbers: true,
  theme: "dracula",
  placeholder: "Write CSS code here...",
  extraKeys: { "Ctrl-Space": "autocomplete" },
  matchBrackets: true,
  autoCloseBrackets: true,
  lint: true, // Optionally enable linting for validation
});

const jsEditor = CodeMirror(document.getElementById("js-container"), {
  mode: "javascript",
  lineNumbers: true,
  theme: "dracula",
  placeholder: "Write JavaScript code here...",
  extraKeys: { "Ctrl-Space": "autocomplete" },
  matchBrackets: true,
  autoCloseBrackets: true,
  lint: true, // Optionally enable linting for validation
});

// Theme toggle functionality
let isLightMode = false;
// let darkTheme = true;
document.getElementById("theme-toggle-button").addEventListener("click", () => {
  isLightMode = !isLightMode;
  const newTheme = isLightMode ? "neo" : "dracula";
  // const body = document.body;

  // Update theme for each editor
  htmlEditor.setOption("theme", newTheme);
  cssEditor.setOption("theme", newTheme);
  jsEditor.setOption("theme", newTheme);
});

function showEditor(editorType) {
  // Get all editor containers
  const containers = document.querySelectorAll(".container");

  // Hide all containers
  containers.forEach((container) => container.classList.remove("active"));

  // Show the selected container
  const editor = document.getElementById(`${editorType}-editor`);
  if (editor) {
    editor.classList.add("active");
  }

  // Update button states
  const buttons = document.querySelectorAll(".editor-buttons button");
  buttons.forEach((button) => button.classList.remove("active"));

  const activeButton = document.getElementById(`${editorType}-button`);
  if (activeButton) {
    activeButton.classList.add("active");
  }
}

// Function to update the iframe preview
function runCode() {
  const htmlCode = htmlEditor.getValue();
  const cssCode = `<style>${cssEditor.getValue()}</style>`;
  const jsCode = `<script>${jsEditor.getValue()}</script>`;
  const output = htmlCode + cssCode + jsCode;
  const iframe = document.getElementById("output");
  iframe.srcdoc = output;
}

// Listen to changes in all editors and update the preview automatically
htmlEditor.on("change", runCode);
cssEditor.on("change", runCode);
jsEditor.on("change", runCode);

// Save Code to localStorage
function saveCode() {
  localStorage.setItem("htmlCode", htmlEditor.getValue());
  localStorage.setItem("cssCode", cssEditor.getValue());
  localStorage.setItem("jsCode", jsEditor.getValue());
  alert("Code saved successfully!");
}

// Load Code from localStorage
function loadCode() {
  htmlEditor.setValue(localStorage.getItem("htmlCode") || "");
  cssEditor.setValue(localStorage.getItem("cssCode") || "");
  jsEditor.setValue(localStorage.getItem("jsCode") || "");
  alert("Code loaded successfully!");
}

// Delete saved code from localStorage
function deleteCode() {
  localStorage.removeItem("htmlCode");
  localStorage.removeItem("cssCode");
  localStorage.removeItem("jsCode");
  htmlEditor.setValue("");
  cssEditor.setValue("");
  jsEditor.setValue("");
  alert("Saved code deleted successfully!");
}

// Download Code as files
function downloadCode() {
  const download = (filename, text) => {
    const link = document.createElement("a");
    link.setAttribute(
      "href",
      "data:text/plain;charset=utf-8," + encodeURIComponent(text)
    );
    link.setAttribute("download", filename);
    link.style.display = "none";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  download("index.html", htmlEditor.getValue());
  download("style.css", cssEditor.getValue());
  download("script.js", jsEditor.getValue());
}

// Set Preview Size Function
function setPreviewSize(size) {
  const iframe = document.getElementById("output");
  switch (size) {
    case "desktop":
      iframe.style.width = "100%";
      iframe.style.height = "100svh";
      break;
    case "tablet":
      iframe.style.width = "768px";
      iframe.style.height = "100svh";
      break;
    case "mobile":
      iframe.style.width = "375px";
      iframe.style.height = "100svh";
      break;
  }
}

document.getElementById("run-button").addEventListener("click", runCode);
document.getElementById("save-button").addEventListener("click", saveCode);
document.getElementById("load-button").addEventListener("click", loadCode);
document.getElementById("delete-button").addEventListener("click", deleteCode);
document
  .getElementById("download-button")
  .addEventListener("click", downloadCode);