"use client";

import { useState } from "react";
import * as actions from "@/actions";
import { Snippet } from "@prisma/client";
import { DiffEditor, Editor } from "@monaco-editor/react";

interface SnippetEditFormProps {
  snippet: Snippet;
}

export default function SnippetEditForm({ snippet }: SnippetEditFormProps) {
  const [code, setCode] = useState(snippet.code);
  const [originalCode, setOriginalCode] = useState(snippet.code);
  const [modifiedCode, setModifiedCode] = useState(snippet.code);

  const handleEditorChange = (value: string = "") => {
    setCode(value);
  };

  const editSnippetAction = actions.editSnippet.bind(null, snippet.id, code);

  const handleAskAI = () => {
    setModifiedCode("AI generated code");
  };

  return (
    <div className="flex flex-col">
      {/* <Editor
        height="40vh"
        theme="vs-light"
        language="c"
        defaultValue={snippet.code}
        options={{ minimap: { enabled: false } }}
        onChange={handleEditorChange}
      /> */}
      <DiffEditor
        height="40vh"
        theme="vs-light"
        language="c"
        original={originalCode}
        modified={modifiedCode}
        options={{ minimap: { enabled: false } }}
      />
      <div className="flex items-center justify-end gap-4">
        <button
          type="submit"
          className="p-2 border rounded"
          onClick={handleAskAI}
        >
          Ask AI
        </button>
        <button
          type="submit"
          className="p-2 border rounded"
          onClick={editSnippetAction}
        >
          Save
        </button>
      </div>
    </div>
  );
}