import { DemoModule } from "./demo-framework/types";
import { demoUtils } from "./demo-fixtures/index";

const demo: DemoModule = {
  title: "Sketch Monaco Viewer Demo",
  description:
    "Monaco editor with code comparison functionality for different languages",
  imports: ["../sketch-monaco-view.ts"],

  customStyles: `
    button {
      padding: 8px 12px;
      background-color: #4285f4;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 8px;
    }

    button:hover {
      background-color: #3367d6;
    }

    sketch-monaco-view {
      margin-top: 20px;
      height: 500px;
    }
  `,

  setup: async (container: HTMLElement) => {
    const section = demoUtils.createDemoSection(
      "Monaco Code Viewer",
      "Demonstrates the Monaco editor component with side-by-side code comparison for different programming languages.",
    );

    // Create control panel
    const controlPanel = document.createElement("div");
    controlPanel.style.marginBottom = "2rem";
    controlPanel.style.padding = "1rem";
    controlPanel.style.backgroundColor = "var(--demo-control-bg);";
    controlPanel.style.borderRadius = "4px";

    const buttonsContainer = document.createElement("div");
    buttonsContainer.style.marginTop = "1rem";

    // Create example buttons
    const jsButton = demoUtils.createButton("Example 1: JavaScript", () => {
      diffEditor.setOriginalCode(
        `function calculateTotal(items) {
  return items
    .map(item => item.price * item.quantity)
    .reduce((a, b) => a + b, 0);
}`,
        "original.js",
      );

      diffEditor.setModifiedCode(
        `function calculateTotal(items) {
  // Apply discount if available
  return items
    .map(item => {
      const price = item.discount ?
        item.price * (1 - item.discount) :
        item.price;
      return price * item.quantity;
    })
    .reduce((a, b) => a + b, 0);
}`,
        "modified.js",
      );
    });

    const htmlButton = demoUtils.createButton("Example 2: HTML", () => {
      diffEditor.setOriginalCode(
        `<!DOCTYPE html>
<html>
<head>
  <title>Demo Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>This is a paragraph.</p>
</body>
</html>`,
        "original.html",
      );

      diffEditor.setModifiedCode(
        `<!DOCTYPE html>
<html>
<head>
  <title>Demo Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Hello World</h1>
  </header>
  <main>
    <p>This is a paragraph with some <strong>bold</strong> text.</p>
  </main>
  <footer>
    <p>&copy; 2025</p>
  </footer>
</body>
</html>`,
        "modified.html",
      );
    });

    const goButton = demoUtils.createButton("Example 3: Go", () => {
      diffEditor.setOriginalCode(
        `package main

import "fmt"

func main() {
	fmt.Println("Hello, world!")
}`,
        "original.go",
      );

      diffEditor.setModifiedCode(
        `package main

import (
	"fmt"
	"time"
)

func main() {
	fmt.Println("Hello, world!")
	fmt.Printf("The time is %s\n", time.Now().Format(time.RFC3339))
}`,
        "modified.go",
      );
    });

    buttonsContainer.appendChild(jsButton);
    buttonsContainer.appendChild(htmlButton);
    buttonsContainer.appendChild(goButton);

    controlPanel.innerHTML = `<p>Select an example to see code comparison in different languages:</p>`;
    controlPanel.appendChild(buttonsContainer);

    // Create the Monaco view component
    const diffEditor = document.createElement("sketch-monaco-view") as any;
    diffEditor.id = "diffEditor";

    // Set initial example
    diffEditor.originalCode = `function hello() {
  console.log("Hello World");
  return true;
}`;

    diffEditor.modifiedCode = `function hello() {
  // Add a comment
  console.log("Hello Updated World");
  return true;
}`;

    section.appendChild(controlPanel);
    section.appendChild(diffEditor);
    container.appendChild(section);
  },
};

export default demo;