import React from 'react';
import { Button } from "@/components/ui/button";

// Predefined commands/snippets
const commands = [
  {
    name: 'set_global',
    displayName: 'Set Global Variable',
    text: 'globals["key"] = "value";\n'
  },
  {
    name: 'get_global',
    displayName: 'Get Global Variable',
    text: 'const value = globals["key"];\n'
  },
  {
    name: 'set_variable',
    displayName: 'Set Variable',
    text: 'variables["key"] = "value";\n'
  },
  {
    name: 'get_variable',
    displayName: 'Get Variable',
    text: 'const value = variables["key"];\n'
  },
  {
    name: 'get_response_body',
    displayName: 'Get Response Body',
    text: 'const body = response.body;\n'
  },
  {
    name: 'parse_response_body',
    displayName: 'Parse Response Body',
    text: 'JSON.parse(response.body);\n'
  },
  {
    name: 'get_response_headers',
    displayName: 'Get Response Header',
    text: 'const header_value = response.headers["header-key"];\n'
  }
];

const VariableSnippet = ({ editor }) => {
  const appendTextToEditor = (text) => {
    if (!editor) return;

    const model = editor.getModel();
    const position = editor.getPosition();
    editor.executeEdits('', [{
      range: new monaco.Range(
          position.lineNumber,
          position.column,
          position.lineNumber,
          position.column
      ),
      text: text,
      forceMoveMarkers: true
    }]);
    editor.focus();
  };

  return (
      <div className="flex flex-col gap-1">
        {commands.map((command) => (
            <Button
                key={command.name}
                variant="link"
                size="sm"
                className="justify-start h-8 text-sm px-2"
                onClick={() => appendTextToEditor(command.text)}
            >
              {command.displayName}
            </Button>
        ))}
      </div>
  );
};

export default VariableSnippet;
