import { useState } from 'react';
import {classes} from "../../../styles/tailwindStyles"
import React from 'react';
const RequestEditor = ({ setCustomRequests, sendBulkRequests }) => {
  const [currentRequest, setCurrentRequest] = useState({
    method: "GET",
    endpoint: "",
    body: "",
    headers: "",
    params: "",
    query: ""
  });
  
  const [allRequests, setAllRequests] = useState([]);

  const handleAddRequest = () => {
    const newRequests = [...allRequests, currentRequest];
    setAllRequests(newRequests);
    setCustomRequests(newRequests);
  };

  const handleSendRequests = () => {
    sendBulkRequests(allRequests);
  };

  return (
    <div>
    <h3 className={classes.title}>Build Your Request</h3>
    <div className={classes.formElement}>
      <select className={classes.select} value={currentRequest.method} onChange={e => setCurrentRequest({ ...currentRequest, method: e.target.value })}>
        <option value="GET">GET</option>
        <option value="POST">POST</option>
        {/* Add other HTTP methods as needed */}
      </select>
    </div>
    <div className={classes.formElement}>
      <input className={classes.input} placeholder="Endpoint" value={currentRequest.endpoint} onChange={e => setCurrentRequest({ ...currentRequest, endpoint: e.target.value })} />
    </div>
    <div>
      <button className={classes.button} onClick={handleAddRequest}>Add Request</button>
      <button className={classes.secondaryButton} onClick={handleSendRequests}>Send Requests</button>
    </div>
  </div>
  );
};

export default RequestEditor;