import { createStyledElement } from "./utils.js";

export class DialogManager {
  static showCreateDialog(onCreateCallback) {
    const dialog = createStyledElement("div", {
      position: "fixed",
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)",
      padding: "20px",
      border: "2px solid #333",
      borderRadius: "8px",
      backgroundColor: "white",
      zIndex: "1001",
      boxShadow: "0 4px 8px rgba(0,0,0,0.3)",
    });

    const title = createStyledElement(
      "h3",
      { margin: "0 0 15px 0" },
      { textContent: "Create New Bar" },
    );

    const inputStyles = {
      display: "block",
      margin: "5px 0",
      padding: "8px",
      width: "200px",
    };

    const barIdInput = createStyledElement("input", inputStyles, {
      type: "text",
      placeholder: "Bar ID",
    });

    const urlInput = createStyledElement("input", inputStyles, {
      type: "text",
      placeholder: "WebSocket URL",
      value: "192.168.4.1",
    });

    const colorInput = createStyledElement("input", inputStyles, {
      type: "color",
      value: "#ff0000",
    });

    const xInput = createStyledElement("input", inputStyles, {
      type: "number",
      placeholder: "X Position",
      value: "100",
    });

    const yInput = createStyledElement("input", inputStyles, {
      type: "number",
      placeholder: "Y Position",
      value: "100",
    });

    const buttonStyles = {
      padding: "8px 12px",
      border: "none",
      borderRadius: "4px",
      cursor: "pointer",
      color: "white",
    };

    const createBtn = createStyledElement(
      "button",
      {
        ...buttonStyles,
        margin: "10px 5px 0 0",
        backgroundColor: "#4CAF50",
      },
      { textContent: "Create" },
    );

    const cancelBtn = createStyledElement(
      "button",
      {
        ...buttonStyles,
        margin: "10px 0 0 0",
        backgroundColor: "#f44336",
      },
      { textContent: "Cancel" },
    );

    createBtn.onclick = () => {
      const barData = {
        barId: barIdInput.value,
        url: `ws://${urlInput.value}/ws`,
        color: colorInput.value,
        x: parseInt(xInput.value),
        y: parseInt(yInput.value),
      };
      onCreateCallback(barData);
      document.body.removeChild(dialog);
    };

    cancelBtn.onclick = () => document.body.removeChild(dialog);

    dialog.append(
      title,
      barIdInput,
      urlInput,
      colorInput,
      xInput,
      yInput,
      createBtn,
      cancelBtn,
    );
    document.body.appendChild(dialog);
  }
}