import ReactJson from "react-json-view-ssr";
import React, { useState, useEffect, useRef, useCallback, memo, useContext} from "react";
import { toast } from "react-toastify";
import { 
  Search as SearchIcon,
} from "@mui/icons-material";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-gruvbox";
import {
  Paper,
  Button,
  Box,
  MenuItem,
  TextField,
  Tabs,
  Tab,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  Select,
  Typography,
  TableRow,
  InputAdornment,
  Divider,
  LinearProgress,
  Tooltip,
} from "@mui/material";
import throttle from "lodash/throttle";
import {getTheme} from "../theme.jsx";
import { validateJson, collapseField, } from "../views/Workflows2.jsx";

import DeleteIcon from "@mui/icons-material/Delete";
import { Context } from "../context/ContextApi.jsx";

function CustomTabPanel(props) {
  const { children, value, index, ...other } = props;
  const {themeMode} = useContext(Context);
  const theme = getTheme(themeMode)

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3, padding: 0, backgroundColor: theme.palette.backgroundColor}}>
          {children}
        </Box>
      )}
    </div>
  );
}

function a11yProps(index) {
  return {
    id: `simple-tab-${index}`,
    "aria-controls": `simple-tabpanel-${index}`,
  };
}

const RequestMethods = [
  {
    value: "GET",
    color: "#61afee",
  },
  {
    value: "POST",
    color: "#49cc90",
  },
  {
    value: "DELETE",
    color: "#f93e3e",
  },
  {
    value: "PUT",
    color: "#fca130",
  },
  {
    value: "PATCH",
    color: "#50e3c2",
  },
  {
    value: "CONNECT",
    color: "#ff69b4",
  },
  {
    value: "HEAD",
    color: "#9012fe",
  },
];

const ApiExplorer = memo(({ openapi, globalUrl, userdata, HandleApiExecution, selectedAppData, ConfigurationTab, isLoggedIn, isLoaded }) => {
  const [actions, setActions] = useState([]);
  const [info, setInfo] = useState({});
  const [serverurl, setServerUrl] = useState("");
  const [selectedActionIndex, setSelectedActionIndex] = useState(0);
  const [ExampleBody, setExampleBody] = useState({});
  const [filteredActions, setFilteredActions] = useState([]);
  const {themeMode} = useContext(Context);
  const theme = getTheme(themeMode)

  const [firstSendDone, setFirstSendDone] = useState(false)

  const getJsonObject = (properties) => {

    let jsonObject = {};
    for (let key in properties) {
      const property = properties[key];

      let subloop = false;
      if (property.hasOwnProperty("type")) {
        if (property.type === "object" || property.type === "array") {
          subloop = true;
        }
      }

      if (subloop) {
        if (
          property.hasOwnProperty("items") &&
          property.items.hasOwnProperty("properties")
        ) {
          const jsonret = getJsonObject(property.items.properties);
          if (property.type === "array") {
            jsonObject[key] = [jsonret];
          } else {
            jsonObject[key] = jsonret;
          }
        } else {
          if (property.hasOwnProperty("properties")) {
            const jsonret = getJsonObject(property.properties);
            if (property.type === "array") {
              jsonObject[key] = [jsonret];
            } else {
              jsonObject[key] = jsonret;
            }
          } else {
          }
        }
      } else {
        if (property.hasOwnProperty("example")) {
          jsonObject[key] = property.example;
        } else if (
          property.hasOwnProperty("enum") &&
          property.enum.length > 0
        ) {
          jsonObject[key] = property.enum[0];
        } else if (property.hasOwnProperty("default")) {
          jsonObject[key] = property.default;
        } else if (property.hasOwnProperty("maximum")) {
          jsonObject[key] = property.maximum;
        } else if (property.hasOwnProperty("minimum")) {
          jsonObject[key] = property.minimum;
        } else if (property.hasOwnProperty("type")) {
          if (property.type === "integer" || property.type === "number") {
            jsonObject[key] = 0;
          } else if (property.type === "boolean") {
            jsonObject[key] = false;
          } else if (property.type === "string") {
            jsonObject[key] = "";
          } else {
          }
        } else {
        }
      }
    }

    return jsonObject;
  };

  const handleGetRef = (parameter, data) => {
    try {
      if (parameter === null || parameter["$ref"] === undefined) {
        return parameter;
      }
    } catch (e) {
      return parameter;
    }

    const paramsplit = parameter["$ref"].split("/");
    if (paramsplit[0] !== "#") {
      return parameter;
    }

    var newitem = data;
    for (let paramkey in paramsplit) {
      var tmpparam = paramsplit[paramkey];
      if (tmpparam === "#") {
        continue;
      }

      if (newitem[tmpparam] === undefined) {
        return parameter;
      }

      newitem = newitem[tmpparam];
    }
    return newitem;
  };

  useEffect(() => {
    if (openapi !== undefined && openapi !== null) {
      parseIncomingOpenapiData(openapi);
    }
  }, [openapi]);

  const parseIncomingOpenapiData = useCallback((data) => {
    if (data.info !== null && data.info !== undefined) {
      setInfo(data.info);
    }

    try {
      if (data.info !== null && data.info !== undefined) {
        if (data.info.title !== undefined && data.info.title !== null) {
          if (data.info.title.endsWith(" API")) {
            data.info.title = data.info.title.substring(
              0,
              data.info.title.length - 4
            );
          } else if (data.info.title.endsWith("API")) {
            data.info.title = data.info.title.substring(
              0,
              data.info.title.length - 3
            );
          }
        }

        document.title = data.info.title + " Rest API"

        if (
          data.info["x-catefies"] !== undefined &&
          data.info["x-categories"].length > 0
        ) {
          if (Array.isArray(data.info["x-categories"])) {
          } else {
          }
        }
      }
    } catch (e) {}

    try {
      if (data.tags !== undefined && data.tags.length > 0) {
        var newtags = [];
        for (let tagkey in data.tags) {
          if (data.tags[tagkey]?.name.length > 50) {
            continue;
          }

          newtags.push(data.tags[tagkey]?.name);
        }

        if (newtags.length > 10) {
          newtags = newtags.slice(0, 9);
        }
      }
    } catch (e) {}

    // This is annoying (:
    // Weird generator problems to be handle
    var securitySchemes = undefined;
    try {
      if (data.securitySchemes !== undefined) {
        securitySchemes = data.securitySchemes;
        if (securitySchemes === undefined) {
          securitySchemes = data.securityDefinitions;
        }
      }

      if (securitySchemes === undefined && data.components !== undefined) {
        securitySchemes = data.components.securitySchemes;
        if (securitySchemes === undefined) {
          securitySchemes = data.components.securityDefinitions;
        }
      }
    } catch (e) {}

    const allowedfunctions = [
      "GET",
      "CONNECT",
      "HEAD",
      "DELETE",
      "POST",
      "PATCH",
      "PUT",
    ];

    var newActions = [];
    var wordlist = {};
    var all_categories = [];
    var parentUrl = "";

    if (data.paths !== null && data.paths !== undefined) {
      for (let [path, pathvalue] of Object.entries(data.paths)) {
        for (let [method, methodvalue] of Object.entries(pathvalue)) {
          if (methodvalue === null) {
            continue;
          }

          if (!allowedfunctions.includes(method.toUpperCase())) {
            // Typical YAML issue
            if (method !== "parameters") {
              //toast("Skipped method (not allowed): " + method);
            }
            continue;
          }

          var tmpname = methodvalue.summary;
          if (
            methodvalue.operationId !== undefined &&
            methodvalue.operationId !== null &&
            methodvalue.operationId.length > 0 &&
            (tmpname === undefined || tmpname.length === 0)
          ) {
            tmpname = methodvalue.operationId;
          }

          if (tmpname !== undefined && tmpname !== null) {
            tmpname = tmpname.replaceAll(".", " ");
          }

          if (
            (tmpname === undefined || tmpname === null) &&
            methodvalue.description !== undefined &&
            methodvalue.description !== null &&
            methodvalue.description.length > 0
          ) {
            tmpname = methodvalue.description
              .replaceAll(".", " ")
              .replaceAll("_", " ");
          }

          var newaction = {
            name: tmpname,
            description: methodvalue.description,
            url: path,
            file_field: "",
            method: method.toUpperCase(),
            headers: "",
            queries: [],
            paths: [],
            body: "",
            errors: [],
            example_response: "",
            action_label: "No Label",
            required_bodyfields: [],
          };

          if (
            methodvalue["x-label"] !== undefined &&
            methodvalue["x-label"] !== null
          ) {
            // FIX: Map labels only if they're actually in the category list
            newaction.action_label = methodvalue["x-label"];
          }

          if (
            methodvalue["x-required-fields"] !== undefined &&
            methodvalue["x-required-fields"] !== null
          ) {
            newaction.required_bodyfields = methodvalue["x-required-fields"];
          }

          if (
            newaction.url !== undefined &&
            newaction.url !== null &&
            newaction.url.includes("_shuffle_replace_")
          ) {
            //const regex = /_shuffle_replace_\d/i;
            const regex = /_shuffle_replace_\d+/i;

            newaction.url = newaction.url.replaceAll(
              new RegExp(regex, "g"),
              ""
            );
          }

          // Finding category
          if (path.includes("/")) {
            const pathsplit = path.split("/");
            // Stupid way of finding a category/grouping
            for (let splitkey in pathsplit) {
              if (pathsplit[splitkey].includes("_shuffle_replace_")) {
                //const regex = /_shuffle_replace_\d/i;
                const regex = /_shuffle_replace_\d+/i;
                pathsplit[splitkey] = pathsplit[splitkey].replaceAll(
                  new RegExp(regex, "g"),
                  ""
                );
              }

              if (
                pathsplit[splitkey].length > 0 &&
                pathsplit[splitkey] !== "v1" &&
                pathsplit[splitkey] !== "v2" &&
                pathsplit[splitkey] !== "api" &&
                pathsplit[splitkey] !== "1.0" &&
                pathsplit[splitkey] !== "apis"
              ) {
                newaction["category"] = pathsplit[splitkey];
                if (!all_categories.includes(pathsplit[splitkey])) {
                  all_categories.push(pathsplit[splitkey]);
                }
                break;
              }
            }
          }

          if (path === "/files/{file_id}/content") {
          }

          // Typescript? I think not ;)
          if (methodvalue["requestBody"] !== undefined) {
            if (
              methodvalue["requestBody"]["$ref"] !== undefined &&
              methodvalue["requestBody"]["$ref"] !== null
            ) {
              // Handle ref
              const parameter = handleGetRef(
                { $ref: methodvalue["requestBody"]["$ref"] },
                data
              );
              if (
                parameter.content !== undefined &&
                parameter.content !== null
              ) {
                methodvalue["requestBody"]["content"] = parameter.content;
              }
            }

            if (methodvalue["requestBody"]["content"] !== undefined) {
              // Handle content - XML or JSON
              //
              if (
                methodvalue["requestBody"]["content"]["application/json"] !==
                undefined
              ) {
                if (
                  methodvalue["requestBody"]["content"]["application/json"][
                    "schema"
                  ] !== undefined &&
                  methodvalue["requestBody"]["content"]["application/json"][
                    "schema"
                  ] !== null
                ) {
                  try {
                    if (
                      methodvalue["requestBody"]["content"]["application/json"][
                        "schema"
                      ]["properties"] !== undefined
                    ) {
                      // Read out properties from a JSON object
                      const jsonObject = getJsonObject(
                        methodvalue["requestBody"]["content"][
                          "application/json"
                        ]["schema"]["properties"]
                      );
                      if (jsonObject !== undefined && jsonObject !== null) {
                        try {
                          newaction["body"] = JSON.stringify(
                            jsonObject,
                            null,
                            2
                          );
                        } catch (e) {}
                      }

                      //newaction["body"] = JSON.stringify(jsonObject, null, 2);

                      var tmpobject = {};
                      for (let prop of methodvalue["requestBody"]["content"][
                        "application/json"
                      ]["schema"]["properties"]) {
                        tmpobject[prop] = `\$\{${prop}\}`;
                      }
                      for (let subkey in methodvalue["requestBody"]["content"][
                        "application/json"
                      ]["schema"]["required"]) {
                        const tmpitem =
                          methodvalue["requestBody"]["content"][
                            "application/json"
                          ]["schema"]["required"][subkey];
                        tmpobject[tmpitem] = `\$\{${tmpitem}\}`;
                      }

                      newaction["body"] = JSON.stringify(tmpobject, null, 2);
                    } else if (
                      methodvalue["requestBody"]["content"]["application/json"][
                        "schema"
                      ]["$ref"] !== undefined &&
                      methodvalue["requestBody"]["content"]["application/json"][
                        "schema"
                      ]["$ref"] !== null
                    ) {
                      const retRef = handleGetRef(
                        methodvalue["requestBody"]["content"][
                          "application/json"
                        ]["schema"],
                        data
                      );
                      var newbody = {};
                      for (let propkey in retRef.properties) {
                        const parsedkey = propkey
                          .replaceAll(" ", "_")
                          .toLowerCase();
                        newbody[parsedkey] = "${" + parsedkey + "}";
                      }

                      newaction["body"] = JSON.stringify(newbody, null, 2);
                    }
                  } catch (e) {}
                }
              } else if (
                methodvalue["requestBody"]["content"]["application/xml"] !==
                undefined
              ) {
                //newaction["headers"] = ""
                //"Content-Type=application/xml\nAccept=application/xml";
                if (
                  methodvalue["requestBody"]["content"]["application/xml"][
                    "schema"
                  ] !== undefined &&
                  methodvalue["requestBody"]["content"]["application/xml"][
                    "schema"
                  ] !== null
                ) {
                  try {
                    if (
                      methodvalue["requestBody"]["content"]["application/xml"][
                        "schema"
                      ]["properties"] !== undefined
                    ) {
                      for (let [prop, propvalue] of Object.entries(
                        methodvalue["requestBody"]["content"][
                          "application/xml"
                        ]["schema"]["properties"]
                      )) {
                        tmpobject[prop] = `\$\{${prop}\}`;
                      }

                      for (let [subkey, subkeyval] in Object.entries(
                        methodvalue["requestBody"]["content"][
                          "application/xml"
                        ]["schema"]["required"]
                      )) {
                        const tmpitem =
                          methodvalue["requestBody"]["content"][
                            "application/xml"
                          ]["schema"]["required"][subkey];
                        tmpobject[tmpitem] = `\$\{${tmpitem}\}`;
                      }

                      //newaction["body"] = XML.stringify(tmpobject, null, 2)
                    }
                  } catch (e) {}
                }
              } else {
                if (
                  methodvalue["requestBody"]["content"]["example"] !== undefined
                ) {
                  if (
                    methodvalue["requestBody"]["content"]["example"][
                      "example"
                    ] !== undefined
                  ) {
                    newaction["body"] =
                      methodvalue["requestBody"]["content"]["example"][
                        "example"
                      ];
                  }
                }

                if (
                  methodvalue["requestBody"]["content"][
                    "multipart/form-data"
                  ] !== undefined
                ) {
                  if (
                    methodvalue["requestBody"]["content"][
                      "multipart/form-data"
                    ]["schema"] !== undefined &&
                    methodvalue["requestBody"]["content"][
                      "multipart/form-data"
                    ]["schema"] !== null
                  ) {
                    try {
                      if (
                        methodvalue["requestBody"]["content"][
                          "multipart/form-data"
                        ]["schema"]["type"] === "object"
                      ) {
                        const fieldname =
                          methodvalue["requestBody"]["content"][
                            "multipart/form-data"
                          ]["schema"]["properties"]["fieldname"];

                        if (fieldname !== undefined) {
                          newaction.file_field = fieldname["value"];
                        } else {
                          for (const [subkey, subvalue] of Object.entries(
                            methodvalue["requestBody"]["content"][
                              "multipart/form-data"
                            ]["schema"]["properties"]
                          )) {
                            if (subkey.includes("file")) {
                              newaction.file_field = subkey;
                              break;
                            }
                          }

                          if (
                            newaction.file_field === undefined ||
                            newaction.file_field === null ||
                            newaction.file_field.length === 0
                          ) {
                          }
                        }
                      } else {
                      }
                    } catch (e) {}
                  }
                } else {
                  var schemas = [];
                  const content = methodvalue["requestBody"]["content"];
                  if (content !== undefined && content !== null) {
                    for (const [subkey, subvalue] of Object.entries(content)) {
                      if (
                        subvalue["schema"] !== undefined &&
                        subvalue["schema"] !== null
                      ) {
                        if (
                          subvalue["schema"]["$ref"] !== undefined &&
                          subvalue["schema"]["$ref"] !== null
                        ) {
                          if (!schemas.includes(subvalue["schema"]["$ref"])) {
                            schemas.push(subvalue["schema"]["$ref"]);
                          }
                        }
                      } else {
                        if (
                          subvalue["example"] !== undefined &&
                          subvalue["example"] !== null
                        ) {
                          newaction["body"] = subvalue["example"];
                        } else {
                        }
                      }
                    }
                  }

                  try {
                    if (schemas.length === 1) {
                      const parameter = handleGetRef(
                        { $ref: schemas[0] },
                        data
                      );
                      if (
                        parameter.properties !== undefined &&
                        parameter["type"] === "object"
                      ) {
                        var newbody = {};
                        for (let propkey in parameter.properties) {
                          const parsedkey = propkey
                            .replaceAll(" ", "_")
                            .toLowerCase();
                          if (
                            parameter.properties[propkey].type === undefined
                          ) {
                            continue;
                          }

                          if (parameter.properties[propkey].type === "string") {
                            if (
                              parameter.properties[propkey].description !==
                              undefined
                            ) {
                              newbody[parsedkey] =
                                parameter.properties[propkey].description;
                            } else {
                              newbody[parsedkey] = "";
                            }
                          } else if (
                            parameter.properties[propkey].type.includes(
                              "int"
                            ) ||
                            parameter.properties[propkey].type.includes(
                              "uint64"
                            )
                          ) {
                            newbody[parsedkey] = 0;
                          } else if (
                            parameter.properties[propkey].type.includes(
                              "boolean"
                            )
                          ) {
                            newbody[parsedkey] = false;
                          } else if (
                            parameter.properties[propkey].type.includes("array")
                          ) {
                            newbody[parsedkey] = [];
                          } else {
                            newbody[parsedkey] = [];
                          }
                        }

                        newaction["body"] = JSON.stringify(newbody, null, 2);
                      } else {
                      }
                    }
                  } catch (e) {}
                }
              }
            }
          }

          if (
            methodvalue.responses !== undefined &&
            methodvalue.responses !== null
          ) {
            if (methodvalue.responses.default !== undefined) {
              if (methodvalue.responses.default.content !== undefined) {
                if (
                  methodvalue.responses.default.content["text/plain"] !==
                  undefined
                ) {
                  if (
                    methodvalue.responses.default.content["text/plain"][
                      "schema"
                    ] !== undefined
                  ) {
                    if (
                      methodvalue.responses.default.content["text/plain"][
                        "schema"
                      ]["example"] !== undefined
                    ) {
                      newaction.example_response =
                        methodvalue.responses.default.content["text/plain"][
                          "schema"
                        ]["example"];
                    }

                    if (
                      methodvalue.responses.default.content["text/plain"][
                        "schema"
                      ]["format"] === "binary" &&
                      methodvalue.responses.default.content["text/plain"][
                        "schema"
                      ]["type"] === "string"
                    ) {
                      newaction.example_response = "shuffle_file_download";
                    }
                  }
                }
              }
            } else {
              var selectedReturn = "";
              if (methodvalue.responses["200"] !== undefined) {
                selectedReturn = "200";
              } else if (methodvalue.responses["201"] !== undefined) {
                selectedReturn = "201";
              }

              // Parsing examples. This should be standardized lol
              if (methodvalue.responses[selectedReturn] !== undefined) {
                const selectedExample = methodvalue.responses[selectedReturn];
                if (selectedExample["content"] !== undefined) {
                  if (
                    selectedExample["content"]["application/json"] !== undefined
                  ) {
                    if (
                      selectedExample["content"]["application/json"][
                        "schema"
                      ] !== undefined &&
                      selectedExample["content"]["application/json"][
                        "schema"
                      ] !== null
                    ) {
                      if (
                        selectedExample["content"]["application/json"][
                          "schema"
                        ]["properties"] !== undefined &&
                        selectedExample["content"]["application/json"][
                          "schema"
                        ]["properties"] !== null
                      ) {
                        const jsonObject = getJsonObject(
                          selectedExample["content"]["application/json"][
                            "schema"
                          ]["properties"]
                        );
                        if (jsonObject !== undefined && jsonObject !== null) {
                          try {
                            newaction.example_response = JSON.stringify(
                              jsonObject,
                              null,
                              2
                            );
                          } catch (e) {}
                        }
                      }

                      if (
                        selectedExample["content"]["application/json"][
                          "schema"
                        ]["$ref"] !== undefined
                      ) {
                        const parameter = handleGetRef(
                          selectedExample["content"]["application/json"][
                            "schema"
                          ],
                          data
                        );
                        if (
                          parameter.properties !== undefined &&
                          parameter["type"] === "object"
                        ) {
                          var newbody = {};
                          for (let propkey in parameter.properties) {
                            const parsedkey = propkey
                              .replaceAll(" ", "_")
                              .toLowerCase();
                            if (
                              parameter.properties[propkey].type === undefined
                            ) {
                              continue;
                            }

                            if (
                              parameter.properties[propkey].type === "string"
                            ) {
                              if (
                                parameter.properties[propkey].description !==
                                undefined
                              ) {
                                newbody[parsedkey] =
                                  parameter.properties[propkey].description;
                              } else {
                                newbody[parsedkey] = "";
                              }
                            } else if (
                              parameter.properties[propkey].type.includes("int")
                            ) {
                              newbody[parsedkey] = 0;
                            } else if (
                              parameter.properties[propkey].type.includes(
                                "boolean"
                              )
                            ) {
                              newbody[parsedkey] = false;
                            } else if (
                              parameter.properties[propkey].type.includes(
                                "array"
                              )
                            ) {
                              //const parameter = handleGetRef(selectedExample["content"]["application/json"]["schema"], data)
                              newbody[parsedkey] = [];
                            } else {
                              newbody[parsedkey] = [];
                            }
                          }
                          newaction.example_response = JSON.stringify(
                            newbody,
                            null,
                            2
                          );
                        } else {
                        }
                      } else {
                        // Just selecting the first one. bleh.
                        if (
                          selectedExample["content"]["application/json"][
                            "schema"
                          ]["allOf"] !== undefined
                        ) {
                          var selectedComponent =
                            selectedExample["content"]["application/json"][
                              "schema"
                            ]["allOf"];
                          if (selectedComponent.length >= 1) {
                            selectedComponent = selectedComponent[0];

                            const parameter = handleGetRef(
                              selectedComponent,
                              data
                            );
                            if (
                              parameter.properties !== undefined &&
                              parameter["type"] === "object"
                            ) {
                              var newbody = {};
                              for (let propkey in parameter.properties) {
                                const parsedkey = propkey
                                  .replaceAll(" ", "_")
                                  .toLowerCase();
                                if (
                                  parameter.properties[propkey].type ===
                                  undefined
                                ) {
                                  continue;
                                }

                                if (
                                  parameter.properties[propkey].type ===
                                  "string"
                                ) {
                                  if (
                                    parameter.properties[propkey]
                                      .description !== undefined
                                  ) {
                                    newbody[parsedkey] =
                                      parameter.properties[propkey].description;
                                  } else {
                                    newbody[parsedkey] = "";
                                  }
                                } else if (
                                  parameter.properties[propkey].type.includes(
                                    "int"
                                  )
                                ) {
                                  newbody[parsedkey] = 0;
                                } else if (
                                  parameter.properties[propkey].type.includes(
                                    "boolean"
                                  )
                                ) {
                                  newbody[parsedkey] = false;
                                } else {
                                  newbody[parsedkey] = [];
                                }
                              }

                              newaction.example_response = JSON.stringify(
                                newbody,
                                null,
                                2
                              );
                              //newaction.example_response = JSON.stringify(parameter.properties, null, 2)
                            } else {
                              //newaction.example_response = parameter.properties
                            }
                          } else {
                          }
                        } else if (
                          selectedExample["content"]["application/json"][
                            "schema"
                          ]["properties"] !== undefined
                        ) {
                          if (
                            selectedExample["content"]["application/json"][
                              "schema"
                            ]["properties"]["data"] !== undefined
                          ) {
                            const parameter = handleGetRef(
                              selectedExample["content"]["application/json"][
                                "schema"
                              ]["properties"]["data"],
                              data
                            );
                            if (
                              parameter.properties !== undefined &&
                              parameter["type"] === "object"
                            ) {
                              var newbody = {};
                              for (let propkey in parameter.properties) {
                                const parsedkey = propkey
                                  .replaceAll(" ", "_")
                                  .toLowerCase();
                                if (
                                  parameter.properties[propkey].type ===
                                  undefined
                                ) {
                                  continue;
                                }

                                if (
                                  parameter.properties[propkey].type ===
                                  "string"
                                ) {
                                  if (
                                    parameter.properties[propkey]
                                      .description !== undefined
                                  ) {
                                    newbody[parsedkey] =
                                      parameter.properties[propkey].description;
                                  } else {
                                    newbody[parsedkey] = "";
                                  }
                                } else if (
                                  parameter.properties[propkey].type.includes(
                                    "int"
                                  )
                                ) {
                                  newbody[parsedkey] = 0;
                                } else {
                                  newbody[parsedkey] = [];
                                }
                              }

                              newaction.example_response = JSON.stringify(
                                newbody,
                                null,
                                2
                              );
                              //newaction.example_response = JSON.stringify(parameter.properties, null, 2)
                            } else {
                              //newaction.example_response = parameter.properties
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          for (let paramkey in methodvalue.parameters) {
            const parameter = handleGetRef(
              methodvalue.parameters[paramkey],
              data
            );

            if (parameter.in === "query") {
              var tmpaction = {
                description: parameter.description,
                name: parameter?.name,
                required: parameter.required,
                in: "query",
              };

              if (
                parameter.example !== undefined &&
                parameter.example !== null
              ) {
                tmpaction.example = parameter.example;
              }

              if (parameter.required === undefined) {
                tmpaction.required = false;
              }

              newaction.queries.push(tmpaction);
            } else if (parameter.in === "path") {
              // FIXME - parse this to the URL too
              newaction.paths.push(parameter?.name);

              // FIXME: This doesn't follow OpenAPI3 exactly.
              // https://swagger.io/docs/specification/describing-request-body/
              // https://swagger.io/docs/specification/describing-parameters/
              // Need to split the data.
            } else if (parameter.in === "body") {
              // FIXME: Add tracking for components
              // E.G: https://raw.githubusercontent.com/owentl/Shuffle/master/gosecure.yaml
              if (
                parameter.example !== undefined &&
                parameter.example !== null
              ) {
                if (
                  newaction.body === undefined ||
                  newaction.body === null ||
                  newaction.body.length < 5
                ) {
                  newaction.body = parameter.example;
                }
              }
            } else if (parameter.in === "header") {
              newaction.headers += `${parameter?.name}=${parameter.example}\n`;
            } else {
            }
          }

          // Check if body is valid JSON.
          if (
            newaction.body !== undefined &&
            newaction.body !== null &&
            newaction.body.length > 0
          ) {
            // Trim starting / ending newlines, spaces and tabs
            newaction.body = newaction.body.trim();
          }

          if (newaction?.name === "" || newaction?.name === undefined) {
            // Find a unique part of the string
            // FIXME: Looks for length between /, find the one where they differ
            // Should find others with the same START to their path
            // Make a list of reserved names? Aka things that show up only once
            if (Object.getOwnPropertyNames(wordlist).length === 0) {
              for (let [newpath, pathvalue] of Object.entries(data.paths)) {
                const newpathsplit = newpath.split("/");

                for (let splitkey in newpathsplit) {
                  const pathitem = newpathsplit[splitkey].toLowerCase();
                  if (wordlist[pathitem] === undefined) {
                    wordlist[pathitem] = 1;
                  } else {
                    wordlist[pathitem] += 1;
                  }
                }
              }
            }

            // Remove underscores and make it normal with upper case etc
            const urlsplit = path.split("/");
            if (urlsplit.length > 0) {
              var curname = "";
              for (let urlkey in urlsplit) {
                var subpath = urlsplit[urlkey];
                if (wordlist[subpath] > 2 || subpath.length < 1) {
                  continue;
                }

                curname = subpath;
                break;
              }

              // FIXME: If name exists,
              // FIXME: Check if first part of parsedname is verb, otherwise use method
              const parsedname = curname
                .split("_")
                .join(" ")
                .split("-")
                .join(" ")
                .split("{")
                .join(" ")
                .split("}")
                .join(" ")
                .trim();
              if (parsedname.length === 0) {
                newaction.errors.push("Missing name");
              } else {
                const newname =
                  method.charAt(0).toUpperCase() +
                  method.slice(1) +
                  " " +
                  parsedname;
                const searchactions = newActions.find(
                  (data) => data?.name === newname
                );

                if (searchactions !== undefined) {
                  newaction.errors.push("Missing name");
                } else {
                  newaction.name = newname;
                }
              }
            } else {
              newaction.errors.push("Missing name");
            }
          }

          //newaction.action_label = "No Label"
          newActions.push(newaction);
        }
      }

      if (data.servers !== undefined && data.servers.length > 0) {
        var firstUrl = data.servers[0].url;
        if (
          firstUrl.includes("{") &&
          firstUrl.includes("}") &&
          data.servers[0].variables !== undefined
        ) {
          const regex = /{\w+}/g;
          const found = firstUrl.match(regex);
          if (found !== null) {
            for (let foundkey in found) {
              const item = found[foundkey].slice(1, found[foundkey].length - 1);
              const foundVar = data.servers[0].variables[item];
              if (foundVar["default"] !== undefined) {
                firstUrl = firstUrl.replace(
                  found[foundkey],
                  foundVar["default"]
                );
              }
            }
          }
        }

        if (firstUrl.endsWith("/")) {
          parentUrl = firstUrl.slice(0, firstUrl.length - 1);
        } else {
          parentUrl = firstUrl;
        }
      }
    }

    var prefixCheck = "/v1";
    if (parentUrl.includes("/")) {
      const urlsplit = parentUrl.split("/");
      if (urlsplit.length > 2) {
        // Skip if http:// in it too
        prefixCheck = "/" + urlsplit.slice(3).join("/");
      }

      if (
        prefixCheck.length > 0 &&
        prefixCheck !== "/" &&
        prefixCheck.startsWith("/")
      ) {
        for (var actionKey in newActions) {
          const action = newActions[actionKey];

          if (
            action.url !== undefined &&
            action.url !== null &&
            action.url.startsWith(prefixCheck)
          ) {
            newActions[actionKey].url = action.url.slice(
              prefixCheck.length,
              action.url.length
            );
          }
        }
      }
    }

    setServerUrl(parentUrl);
    var newActions2 = [];
    // Remove with duplicate action URLs
    for (var actionKey in newActions) {
      const action = newActions[actionKey];
      if (action.url === undefined || action.url === null) {
        continue;
      }

      var found = false;
      for (var actionKey2 in newActions2) {
        const action2 = newActions2[actionKey2];
        if (action2.url === undefined || action2.url === null) {
          continue;
        }

        if (action.url === action2.url) {
          found = true;
          break;
        }
      }

      if (!found) {
        newActions2.push(action);
      } else {
        newActions2.push(action);
      }
    }

    newActions = newActions2

    // Rearrange them by which has action_label
    const firstActions = newActions.filter(
      (data) =>
        data.action_label !== undefined &&
        data.action_label !== null &&
        data.action_label !== "No Label"
    );
    const secondActions = newActions.filter(
      (data) =>
        data.action_label === undefined ||
        data.action_label === null ||
        data.action_label === "No Label"
    );
    newActions = firstActions.concat(secondActions)
    setActions(newActions)
    setExampleBody(newActions[0]?.body)
  }, [openapi]);

  return (
    <div
      style={{
        display: "flex",
        flexDirection: 'row',
        height: (isLoggedIn && isLoaded) ? "auto" : "calc(100vh - 80px)",
      }}
    >
        <ActionsList info={info} openapi={openapi} isLoggedIn={isLoggedIn} isLoaded={isLoaded} userdata={userdata} actions={actions} filteredActions={filteredActions} setFilteredActions={setFilteredActions} selectedActionIndex={selectedActionIndex} setSelectedActionIndex={setSelectedActionIndex} setExampleBody={setExampleBody }/>

        <ActionResponseAndRequest isLoaded={isLoaded} isLoggedIn={isLoggedIn} ConfigurationTab={ConfigurationTab} selectedAppData={selectedAppData} HandleApiExecution={HandleApiExecution} userdata={userdata} info={info} filteredActions={filteredActions} setFilteredActions={setFilteredActions} actions={actions} selectedActionIndex={selectedActionIndex} ExampleBody={ExampleBody} setExampleBody={setExampleBody} openapi={openapi} serverurl={serverurl} globalUrl={globalUrl} setSelectedActionIndex={setSelectedActionIndex}/>

    </div>
  );
});

export default ApiExplorer;


const ActionResponseAndRequest = memo(({ isLoggedIn, isLoaded, ConfigurationTab, selectedAppData,actions, info, HandleApiExecution, userdata, filteredActions, setFilteredActions, serverurl, globalUrl, setSelectedActionIndex, ExampleBody, setExampleBody, selectedActionIndex}) => {
  const [apiResponse, setApiResponse] = useState({});
  const [isLoading, setIsLoading] = useState(false);
  const loadAction = 10;
  const loadedAction = useRef(null);

  const loadMoreActions = useCallback(() => {
    if (isLoading || filteredActions.length >= actions.length) return;
  
    setIsLoading(true);
  
    setFilteredActions((prevActions) => {
      const newActions = actions.slice(prevActions.length, prevActions.length + loadAction);
      setIsLoading(false);
      return [...prevActions, ...newActions];
    });
  }, [isLoading, actions.length, filteredActions.length, loadAction]);
  
  // Scroll position reference
  const scrollPosition = useRef(0);
  
  // Handle scroll event with debounce
  const handleScroll = useCallback(() => {
    const actionContainer = loadedAction.current;
    if (
      actionContainer &&
      actionContainer.scrollTop + actionContainer.clientHeight >= actionContainer.scrollHeight - 10
    ) {
      loadMoreActions();
    }
    scrollPosition.current = actionContainer?.scrollTop || 0;
  }, [loadMoreActions]);
  
  // Add scroll event listener on mount and remove on unmount
  useEffect(() => {
    const actionContainer = loadedAction.current;
    if (actionContainer) {
      actionContainer.addEventListener("scroll", handleScroll);
    }
    return () => {
      if (actionContainer) {
        actionContainer.removeEventListener("scroll", handleScroll);
      }
    };
  }, [handleScroll]);

  
  // Restore scroll position when the component rerenders or new items are added
  useEffect(() => {
    const actionContainer = loadedAction.current;
    if (actionContainer) {
      actionContainer.scrollTop = scrollPosition.current;
    }
  }, [actions, filteredActions]);

  useEffect(() => {
    if (actions?.length > 0 && filteredActions?.length === 0) {
      setFilteredActions(actions.slice(0, loadAction));
    }
  }, [actions?.length]);

  return (

    <div ref={loadedAction} style={{ width: "100%",   overflowY:'auto', justifyContent: 'center', alignItems: "center", paddingTop: 20}}>
            <div style={{ display: "flex", flexDirection: "column", gap: "10px",  paddingTop: 40, height: "calc(100vh - 80px)"}}> 
                {filteredActions.map((action, index) => (
                    <div key={index} style={{ width: "100%", boxSizing: "border-box", borderBottom: index === filteredActions.length - 1 ? "none" : "1px solid #494949",  paddingBottom: index === filteredActions.length - 1 ? 250 : 30 , paddingTop: index !== 0 ? 30 : 0 }}>
                        <Action
                            id={action.name.replace(/ /g, "-").replace(/_/g, "-")}
                            action={action}
                            index={index}
                            serverurl={serverurl}
                            setApiResponse={setApiResponse}
                            setExampleBody={setExampleBody}
                            globalUrl={globalUrl}
                            setSelectedActionIndex={setSelectedActionIndex}
                            selectedActionIndex={selectedActionIndex}
                            info={info}
                            HandleApiExecution={HandleApiExecution}
                            selectedAppData={selectedAppData}
                            userdata={userdata}
                            ConfigurationTab={ConfigurationTab}
                        />
                    </div>
                ))}
        </div>

        <ActionResponse isLoaded={isLoaded} isLoggedIn={isLoggedIn} apiResponse={apiResponse} ExampleBody={ExampleBody}/>
    </div>
  )})


const ActionsList = memo(({
  actions,
  selectedActionIndex,
  setSelectedActionIndex,
  setExampleBody,
  setFilteredActions,
  filteredActions,
  userdata,
  info,
  openapi,
  isLoggedIn,
  isLoaded
}) => {

  const [searchQuery, setSearchQuery] = useState("");
  const [visibleActions, setVisibleActions] = useState([]);
  const {themeMode} = useContext(Context);
  const theme = getTheme(themeMode);
  

  useEffect(() => {
    if (visibleActions?.length === 0 && actions?.length > 0) {
      setVisibleActions(actions)
    }
  }, [actions?.length])

  const handleActionClick = (index, action) => {
    const actionId = action.name.replace(/ /g, "-").replace(/_/g, "-");
    setSelectedActionIndex(index);
    setExampleBody(action.example_response);

    const actionIndex = actions.findIndex((act) => {
      const id = act.name.replace(/ /g, "-").replace(/_/g, "-");
      return id === actionId;
    });

    if (actionIndex !== -1 && !filteredActions.some((act) => {
        const id = act.name.replace(/ /g, "-").replace(/_/g, "-");
        return id === actionId;
    })) {
      const newActionToLoad = [
        ...filteredActions,
        ...actions.slice(filteredActions.length, actionIndex + 1)
      ];
      setFilteredActions(newActionToLoad);
    }

    // Update URL hash and scroll to action
    window.history.pushState(null, "", `#${actionId}`);
    const actionElement = document.getElementById(actionId);
    if (actionElement) {
      actionElement.scrollIntoView({ behavior: "smooth", block: "start" });
    }
};

  const handleSearch = (e) => {
    const query = e?.target?.value?.toLowerCase().replaceAll("_", " ");

    setSearchQuery(query)
    if (query.length === 0) {
      setVisibleActions(actions)
    } else {
      setVisibleActions(
        actions?.filter((action) =>
          action?.name?.toLowerCase()?.replaceAll("_", " ")?.includes(searchQuery)
        )
      )
    }
  }

  return (
    <div style={{ maxWidth: '350px', width: "25%", overflow: 'hidden', marginLeft: !(isLoggedIn || isLoaded) ? 5 : 0}}>
    <div style={{ borderBottom: '1px solid #494949', paddingTop: 10, paddingBottom: 10}}>
            <div>
                {info?.title ? (
					<a 
						href={`/apps/${openapi?.id}`}
						style={{ textDecoration: 'none', }} 
						target="_blank" 
						rel="noreferrer"
					>
						<Tooltip title="Go to app" placement="right">
							<div style={{ display: "flex", alignItems: "center" }}>
								<img
									src={openapi?.info["x-logo"]?.length > 0 ? openapi?.info["x-logo"] : theme?.palette?.defaultImage}
									width={48}
									height={48}
									alt="app logo"
									style={{ marginLeft: 20, borderRadius: 8 }}
								/>
								<Typography style={{ fontSize: 24, fontWeight: 'bold', marginLeft: 20, overflow: 'hidden', color: theme.palette.textColor
								}}> 
									{info.title}
								</Typography>
                    		</div>
						</Tooltip>
					</a>
                ) : (
                  <Typography style={{ fontSize: 24, fontWeight: 'bold', marginLeft: 20, overflow: 'hidden', color: theme.palette.textColor
                  }}> 
                      Api Explorer
                  </Typography>
                )}
            </div>
     </div>

      <TextField
        value={searchQuery}
        placeholder="Search endpoints"
        onChange={handleSearch}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <SearchIcon />
            </InputAdornment>
          ),
          style: { height: "100%", marginTop: 10, width: '90%', },
        }}
        sx={{
          marginLeft: 2,
          width:'100%',
          "& .MuiOutlinedInput-root fieldset": {
            border: "1px solid rgba(73, 73, 73, 1)",
          },
        }}
      />

      <div
        style={{
          marginLeft: 20,
          marginTop: 15,
          backgroundColor: theme.palette.backgroundColor,
          overflowY: "auto",
          height: (isLoaded && isLoggedIn) ? "calc(100vh - 190px)" : "calc(100vh - 260px)",
          paddingRight: 5,
        }}
      >
        {visibleActions.length > 0 ? (
          visibleActions.map((action, actionIndex) => (
            <Button
              id={`action-list-${actionIndex}`}
              key={`action-list-${actionIndex}`}
              sx={{
                padding: "15px 5px",
                color: "none",
                fontWeight: "normal",
                textTransform: "none",
                backgroundColor:
                  selectedActionIndex === actionIndex
                    ? theme.palette.hoverColor
                    : "transparent",
                border: "none",
                justifyContent: "flex-start",
                boxShadow: "none",
                pointerEvents: "auto",
                marginBottom: 0.625,
                width: "100%",
                display: "flex",
                alignItems: "center",
                textWrap: "nowrap",
                textOverflow: "ellipsis",
                "&:hover": {
                  backgroundColor: theme.palette.hoverColor,
                },
              }}
              onClick={() => handleActionClick(actionIndex, action)}
            >
              <span
                style={{
                  color: RequestMethods.find(
                    (method) => method.value === action.method
                  )?.color,
                  fontWeight: "bold",
                  minWidth: 70,
                  textAlign: "start",
                }}
              >
                {action.method}
              </span>
              <span
                style={{
                  color: theme.palette.textColor,
                  textOverflow: "ellipsis",
                  overflow: "hidden",
                }}
              >
                {action?.name?.replaceAll("_", " ")}
              </span>
            </Button>
          ))
        ) : (
          <div style={{ padding: "15px", color: theme.palette.textColor, textAlign: "center" }}>
            No actions found
          </div>
        )}
      </div>
    </div>
  );
});



const Action = memo((
    { 
      action, 
      index, 
      serverurl, 
      setApiResponse,
      setExampleBody,
      globalUrl,
      info,
      setSelectedActionIndex,
      selectedActionIndex,
      HandleApiExecution,
      ConfigurationTab,
    }, 
  ) =>
      {
        const [RequestHeader, setRequestHeader] = useState([{ key: "Content-Type", value: "application/json" }]);
        const [RequestBody, setRequestBody] = useState(action?.body);
        const editorRef = useRef(null);
        const [AceEditorHeight, setAceEditorHeight] = useState(275)
        const [baseUrl, setBaseUrl] = useState(serverurl)
        const [path, setPath] = useState(action?.url)
        const inputRef = useRef(null);
        const [shouldChageInputFocus, setShouldChangeInputFocus] = useState(true);
        const [disableExecuteButton, setDisableExecuteButton] = useState(false);
        const [showResponseLoader, setShowResponseLoader] = useState(false);
        const [appAuthentication, setAppAuthentication] = useState([])
        const {themeMode} = useContext(Context);
        const theme = getTheme(themeMode);
        const parseHeaders = (headersString) => {
          if (headersString?.length > 0) {
            const headersArray = headersString.split("\n");
            const parsedHeaders = headersArray
              .map((header) => {
                const [key, value] = header.split("="); // Split by '=' to get key-value pairs
          
                // Only proceed if both key and value exist, and neither is undefined
                if (key && value) {
                  return { key: key.trim(), value: value.trim() };
                }
                return null; // Return null if the header is invalid
              })
              .filter(Boolean); // Filter out any null values
            
            setRequestHeader(parsedHeaders);
          }
        };        

        useEffect(() => {
          if (action?.headers) {
            parseHeaders(action.headers);
          }
        }, []);

        const [RequestParams, setRequestParams] = useState([
          {
            key: "",
            value: "",
          },
        ]);

        const [curTab, setCurTab] = useState(0)
        const [actionUrl, setActionUrl] = useState(action?.url)

        const [selectedMethod, setSelectedMethod] = useState(action?.method)
        
        const fix_url = (newUrl) => {
          if (newUrl.includes("hhttp")) {
            newUrl = newUrl.replace("hhttp", "http");
          }
      
          if (newUrl.includes("http:/") && !newUrl.includes("http://")) {
            newUrl = newUrl.replace("http:/", "http://");
          }
          if (newUrl.includes("https:/") && !newUrl.includes("https://")) {
            newUrl = newUrl.replace("https:/", "https://");
          }
          if (newUrl.includes("http:///")) {
            newUrl = newUrl.replace("http:///", "http://");
          }
          if (newUrl.includes("https:///")) {
            newUrl = newUrl.replace("https:///", "https://");
          }
          if (!newUrl.includes("http://") && !newUrl.includes("https://")) {
            newUrl = `http://${newUrl}`;
          }
          return newUrl;
        };  

        function isValidMethod(method) {
          const validMethods = ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "HEAD"];
          method = method.toUpperCase();
      
          if (validMethods.includes(method)) {
              return method;
          } else {
              throw new Error(`Invalid HTTP method: ${method}`);
          }
        }      
        
        function fixHeader(headers) {
          if (Array.isArray(headers)) {
              return headers.reduce((acc, header) => {
                  if (header.key.trim() !== "" || header.value.trim() !== "") {
                      acc[header.key.trim()] = header.value.trim();
                  }
                  return acc;
              }, {});
          }
      
          const parsedHeaders = {};
          
          if (typeof headers === 'string' && headers) {
              const splitHeaders = headers.split("\n");
              
              splitHeaders.forEach(header => {
                  let splitItem;
                  if (header.includes(":")) {
                      splitItem = ":";
                  } else if (header.includes("=")) {
                      splitItem = "=";
                  } else {
                      return;
                  }
      
                  const splitHeader = header.split(splitItem);
                  if (splitHeader.length >= 2) {
                      const key = splitHeader[0].trim();
                      const value = splitHeader.slice(1).join(splitItem).trim();
                      parsedHeaders[key] = value;
                  }
              });
          }
      
          return parsedHeaders;
        }

        function fixParams(queries) {
          if (Array.isArray(queries)) {
            return queries
              .filter(query => query.key.trim() !== "" || query.value.trim() !== "")
              .map(query => ({ key: query.key.trim(), value: query.value.trim() }));
          }
          
          const parsedQueries = [];
          if (typeof queries === 'string') {
            if (!queries.trim()) return parsedQueries;
            const cleanedQueries = queries.trim().replace(/\s+/g, " ");
            const splittedQueries = cleanedQueries.split("&");
            splittedQueries.forEach(query => {
              if (!query.includes("=")) {
                console.info("Skipping as there is no '=' in the query");
                return;
              }
              const [key, value] = query.split("=");
              if (!key.trim() || !value.trim()) {
                console.info("Skipping because either key or value is not present in query");
                return;
              }
              parsedQueries.push({ key: key.trim(), value: value.trim() });
            });
          }
          
          return parsedQueries;
        }
        
        async function prepareResponse(response) {
          try {
              const parsedHeaders = {};
              response.headers.forEach((value, key) => {
                  parsedHeaders[key] = value;
              });
      
              const cookies = {};
              if (response.headers.has("set-cookie")) {
                  const cookieHeader = response.headers.get("set-cookie").split(";");
                  cookieHeader.forEach(cookie => {
                      const [key, value] = cookie.split("=");
                      if (key && value) {
                          cookies[key.trim()] = value.trim();
                      }
                  });
              }
      
              const textData = await response.text();
             
              let parsedBody;
              try {
                  parsedBody = JSON.parse(textData);
              } catch (error) {
                  console.error("Error parsing JSON response:", error);
                  parsedBody = textData;
              }
      
              return {
                  success: true,
                  status: response.status,
                  url: response.url,
                  body: parsedBody,
                  headers: parsedHeaders,
                  cookies: cookies,
              };
          } catch (error) {
                  console.error("Error preparing response:", error);
                  return {
                      success: false,
                      status: response?.status,
                      error: error.message,
                  };
          }
        }
            
        const handleRequestWithCustomAction = async (selectedMethod, baseUrl, path, RequestHeader, RequestBody, RequestParams, info, action) => {
          
          if((HandleApiExecution !== undefined || HandleApiExecution !== null) && typeof HandleApiExecution === 'function'){  

            try {
              if (baseUrl.length === 0) {
                setBaseUrl(serverurl)
              }
              if (path.length === 0) {
                setPath(action.url)
              }
            
              const apiResponse = await HandleApiExecution(
                selectedMethod, baseUrl, path, RequestHeader, RequestBody, RequestParams, info, action, setCurTab,
              )
            
              const response = {
                "action name" : action.name.replaceAll("_", " "),
                 ...apiResponse 
                };
              
              if (typeof response.result === "string") {
                try {
                  response.result = JSON.parse(response.result);
                } catch (parseError) {
                  console.error("Error parsing result:", parseError);
                  //toast.error("Error parsing response result.");
                }
              }
            
              setDisableExecuteButton(false);
              setApiResponse(response);  // Set the response with the action name added
              setShowResponseLoader(false);
              
              return apiResponse;
            
            } catch (error) {
              console.error("Error during HandleApiExecution:", error);
              toast.error(`Error: ${error.message}`);
              return { error: error.message };
            }            
          } else{

            const newUrl = fix_url(baseUrl);
            let validMethod;
            try {
                validMethod = isValidMethod(selectedMethod);
            } catch (error) {
                console.error(error);
                toast.error(error.message);
                return { error: error.message };
            }
              try {
        
                if (path && !path.startsWith('/')) {
                    path = '/' + path;
                }
        
                const finalUrl = newUrl + path;
                const newHeader = fixHeader(RequestHeader);
                const newParams = fixParams(RequestParams);

                if (typeof RequestBody === 'object') {
                    try {
                        RequestBody = JSON.stringify(RequestBody);
                    } catch (error) {
                        console.error(`Error: ${error}`);
                        toast.error("Invalid JSON format for request body: ", error);
                        return { error: "Invalid JSON format for request body" };
                    }
                }
                const queryString = new URLSearchParams(newParams.map(param => [param.key, param.value])).toString();
                const fullUrl = queryString ? `${finalUrl}?${queryString}` : finalUrl;
                const response = await fetch(fullUrl, {
                    method: validMethod,
                    headers: newHeader,
                    body: validMethod !== 'GET' ? RequestBody : undefined,
                });
        
                const preparedResponse = await prepareResponse(response);

                setApiResponse(preparedResponse);
                
                return preparedResponse;
        
            } catch (error) {
                console.error("Error:", error);
                toast.error(`${error.message} Please ensure all fields are filled out correctly and try again.`);
                return { error: error.message };
            }
          }
        };

        const addRequestParamsRow = () => {
          setRequestParams((prevRows) => {
            const updatedRows = [...RequestParams, { key: "", value: "" }];
            return updatedRows;
          });
        };

        const handleRequestParamsChange = (rowIndex, field, value) => {
          setRequestParams(
            RequestParams.map((row, index) => {
              return {
                ...row,
                [field]: index === rowIndex ? value : row[field],
              };
            })
          );
        };

        const addRow = () => {
          setRequestHeader((prevRows) => {
            const updatedRows = [...RequestHeader, { key: "", value: "" }];
            return updatedRows;
          });
        };

        const handleInputChange = (rowIndex, field, value) => {
          setRequestHeader(
            RequestHeader.map((row, i) => {
              return {
                ...row,
                [field]: i === rowIndex ? value : row[field],
              };
            })
          );
        };
        const handleChangeTab = (actionIndex, newValue) => {
          setCurTab(newValue);
        };

        const shouldShowBodyTab = ![
          "GET",
          "CONNECT",
          "OPTIONS",
          "TRACE",
          "HEAD",
        ].includes(selectedMethod);

        const extractParamsFromText = (text) => {
          const params = [];
          const queryString = text.split("?")[1];

          if (queryString) {
            const pairs = queryString.split("&");
            pairs.forEach((pair) => {
              const [key, value] = pair.split("=");
              if (key && value) {
                params.push({ key, value });
              }
            });
          }

          return params.length > 0 ? params : [{ key: "", value: "" }];
        };
        
        const actionRef = useRef(null);
        const scrollTimeoutRef = useRef(null);
        const [isUserInteracting, setIsUserInteracting] = useState(false);

          useEffect(() => {
              const observer = new IntersectionObserver(
                  throttle((entries) => {
                    if (!isUserInteracting) return;
                      let nextSelectedActionIndex = null;

                      entries.forEach((entry) => {
                          if (entry.isIntersecting && selectedActionIndex !== index) {
                              nextSelectedActionIndex = index;
                          }
                      });

                      if (scrollTimeoutRef.current) {
                          clearTimeout(scrollTimeoutRef.current);
                      }

                      if (nextSelectedActionIndex !== null) {
                          scrollTimeoutRef.current = setTimeout(() => {
                              if (selectedActionIndex !== nextSelectedActionIndex) {
                                  setSelectedActionIndex(nextSelectedActionIndex);
                                  const actionId = action.name.replace(/ /g, "-").replace(/_/g, "-");
                                  window.history.pushState(null, "", `#${actionId}`);
                                  setExampleBody(action?.example_response);
                                  document.getElementById(`action-list-${nextSelectedActionIndex}`)?.scrollIntoView({ behavior: "smooth", block: "center" });
                              }
                          }, 300);
                      }
                  }, 200),
                  { threshold: 0.5 }
              );

              if (actionRef.current) {
                  observer.observe(actionRef.current);
              }

              return () => {
                  if (actionRef.current) {
                      observer.unobserve(actionRef.current);
                  }
                  if (scrollTimeoutRef.current) {
                      clearTimeout(scrollTimeoutRef.current);
                  }
              };
          }, [isUserInteracting]);

          const handleAceEditorChange = (value) => {
            setRequestBody(value);
            if (editorRef.current) {
              const editor = editorRef.current.editor;
              const lineHeight = editor.renderer.lineHeight;
              const minHeight = 100;
              const maxHeight = 300;
              const session = editor.getSession();
              const screenLength = session.getScreenLength();
              const contentHeight = screenLength * lineHeight;
              const padding = 20; 
              
              // Calculate new height
              let newHeight = Math.min(
                Math.max(
                  minHeight,
                  contentHeight + padding
                ),
                maxHeight
              );
          
              if (newHeight !== AceEditorHeight) {
                if (value.length < (editorRef.current._lastValue || '').length) {
                  if (contentHeight + padding < AceEditorHeight) {
                    setAceEditorHeight(newHeight);
                  }
                } else {
                  if (contentHeight + padding > AceEditorHeight) {
                    setAceEditorHeight(newHeight);
                  }
                }
              }
              editorRef.current._lastValue = value;
            }
          };

          useEffect(() => {
            if (editorRef.current) {
              const editor = editorRef.current.editor;
              editor.commands.addCommand({
                name: "executeOnCtrlEnter",
                bindKey: { win: "Ctrl-Enter", mac: "Command-Enter" },
                exec: () => {
                  setShowResponseLoader(true);
                  setDisableExecuteButton(true);
                  handleRequestWithCustomAction(
                    selectedMethod,
                    baseUrl,
                    path,
                    RequestHeader,
                    RequestBody,
                    RequestParams,
                    info,
                    action
                  );
                },
              });
            }
          }, [editorRef.current]);
          
          
		const actionname = action?.name.charAt(0).toUpperCase() + action?.name.slice(1).replaceAll("_", " ")
        return (
          <div
            ref={actionRef}
            id={action.name.replace(/ /g, "-").replace(/_/g, "-")}
            data-index={index}
            key={action.name.replace(/ /g, "-").replace(/_/g, "-")}
            style={{ 
			  marginTop: 50, 
              display: "flex", 
              flexDirection: "row", 
              minHeight: 400,
              justifyContent: 'center'
            }}
            onClick={() => setIsUserInteracting(true)}
          >
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                maxWidth: 1024,
                width: "100%",
              }}
            >
                  <Typography
                    style={{
                      fontSize: 24,
                      fontWeight: 700,
                      marginLeft: 40,
                      marginBottom: 5,
                      color: theme.palette.textColor
                    }}
                  >
                    {actionname}
              </Typography>
              <div
                style={{
                  border: "1px solid rgba(73, 73, 73, 1)",
                  display: "flex",
                  minWidth: 694,
                  borderRadius: 6,
                  marginLeft: "40px",
                  marginTop: 2,
                  backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                  height: 51,
                  alignItems: 'center',
                }}
              >
                <Select
                  value={selectedMethod}
                  onChange={(e) => setSelectedMethod(e.target.value)}
                  sx={{
                    minWidth: 130,
                    height: "100%",
                    backgroundColor: "transparent",
                    "& .MuiSelect-select": {
                      color: RequestMethods.find((method) => method.value === selectedMethod)
                        ?.color || theme.palette.textFieldStyle.backgroundColor,
                    },
                  }}
                  MenuProps={{
                    PaperProps: {
                      sx: {
                        padding: 0,
                        margin: 0,
                        backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                      },
                    },
                    MenuListProps: {
                      sx: {
                        padding: 0,
                        margin: 0,
                        backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                      },
                    },
                  }}
                >
                  {RequestMethods.map((method, methodIndex) => (
                    <MenuItem
                      key={`${method.value}-${methodIndex}`}
                      value={method.value}
                      sx={{
                        color: method.color,
                        backgroundColor: theme.palette.textFieldStyle.backgroundColor,
                        border: "none",
                        marginBottom: 0.25,
                        "&:hover": {
                          backgroundColor: method.color,
                          color: theme.palette.textFieldStyle.color, 
                        },
                        "&.Mui-selected": {
                          backgroundColor: method.color,
                          color: theme.palette.textFieldStyle.color,
                          border: "none",
                          "&:hover": {
                            backgroundColor: method.color,
                            color: theme.palette.textFieldStyle.color,
                          },
                        },
                        "&.Mui-focusVisible": {
                          outline: "none",
                        },
                      }}
                    >
                      {method.value}
                    </MenuItem>
                  ))}
                </Select>
                <TextField
                  fullWidth
                  ref={inputRef}
                  value={actionUrl}
                  inputProps={{
                    style: {
                      margin: "auto",
                      border: "none",
                      color: theme.palette.textFieldStyle.color,
                      display: 'flex',
                      height: '100%',
                      alignItems: 'center',

                    },
                  }}
                  sx={{
                    "& .MuiOutlinedInput-root": {
                      "& fieldset": {
                        border: "none",
                      },
                      "&:hover fieldset": {
                        border: "none",
                      },
                      "&.Mui-focused fieldset": {
                        border: "none",
                      },
                      margin: "auto",
                    },
                    margin: "auto",
                  }}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      if (actionUrl.length === 0) {
                        toast.error("URL cannot be empty");
                        return;
                      }else{
                        setShowResponseLoader(true);
                        setDisableExecuteButton(true)
                        handleRequestWithCustomAction(selectedMethod, baseUrl, path, RequestHeader, RequestBody, RequestParams, info, action);
                      }
                    }}
                  }
                  onClick={(e) => {
                    const clickPosition = e.target.selectionStart;
                    const baseUrlLength = baseUrl.length;
                    if (shouldChageInputFocus) {
                        e.target.setSelectionRange(baseUrlLength + clickPosition, baseUrlLength + clickPosition);
                        setShouldChangeInputFocus(false);
                    }
                  }}
                  onFocus={(e) => {
                    const validParams = RequestParams.filter(param => param.key.trim().length > 0 && param.value.trim().length > 0);
                    const fullUrl = validParams.length > 0 ? `${baseUrl}${path}?${validParams.map(param => `${param.key}=${param.value}`).join("&")}` : `${baseUrl}${path}`;
                    if (fullUrl.length === 0) {
                      setActionUrl(serverurl + action?.url);
                    }else{
                      setActionUrl(fullUrl);
                    }
                    if(!shouldChageInputFocus){
                      setShouldChangeInputFocus(true);
                    }
                  }}

                  onBlur={(e) => {
                    if(e.target.value.trim().length === 0) {
                      setActionUrl(path);
                    }else if(path.length === 0){
                      setActionUrl(action?.url);
                    }else if(baseUrl.length === 0){
                      setBaseUrl(serverurl)
                      setActionUrl(path)
                    }else{
                      const validParams = RequestParams.filter(param => param.key.trim().length > 0 && param.value.trim().length > 0);
                     const validPath = validParams?.length > 0 ? `${path}?${validParams.map(param => `${param.key}=${param.value}`).join("&")}` : path;
                     setActionUrl(validPath)
                    }
                    setShouldChangeInputFocus(false);
                  }}

                  onChange={(e) => {
                    const newUrl = e.target.value
                    setActionUrl(newUrl);
                    const params = extractParamsFromText(newUrl);
                    setRequestParams(params);


                    if (newUrl.startsWith("http://") || newUrl.startsWith("https://")) {
                      try {
                        const url = new URL(newUrl);
                        setBaseUrl(url.origin);
                        const newPath = decodeURIComponent(url.pathname);;
                  
                        setPath(newPath);
                      } catch (error) {
                        console.error("Invalid URL:", newUrl, error);
						toast("The URL is not a valid one. Please check and try again.")
                      }
                    } else {
						//toast("The URL needs to start with http:// or https://")
					}
                  }}
                />
                
                <Button
                  variant="contained"
                  sx={{
                    width: "107px",
                    height: 35,
                    borderRadius: 200,
                    padding: "16px 24px 16px 24px",
                    backgroundColor: "rgba(2, 203, 112, 0.2)",
                    color: "rgba(2, 203, 112, 1)",
                    cursor:  "pointer",
                    textTransform: "none",
                    "&:hover": {
                      backgroundColor: "rgba(2, 203, 112, 0.1)",
                    },
                    marginRight: "5px"
                  }}
                  disabled={disableExecuteButton}
                  onClick={() => {
					/*
					if (!firstSendDone) {
						setFirstSendDone(true)
        				setCurTab(2)
					}
					*/

                    if (actionUrl.length === 0) {
                      toast.error("URL cannot be empty");
                      return;
                    }else{
                      setShowResponseLoader(true);
                      setDisableExecuteButton(true)
                      handleRequestWithCustomAction(selectedMethod, baseUrl, path, RequestHeader, RequestBody, RequestParams, info, action)
                    }
                  }}
                >
                  Send
                </Button>
              </div>
              {showResponseLoader? (
                <LinearProgress
                variant="indeterminate"
                sx={{
                  backgroundColor: "#252525",
                  "& .MuiLinearProgress-bar": {
                    backgroundColor: "#ff4500",
                  },
                  minWidth: "694px",
                  maxWidth: "1024px",
                  marginLeft: "40px",
                  height: '1px',
                  borderRadius: '8px',
                }}
              />
              ) : null}              
              <Paper
                style={{
                  minWidth: 696,
                  marginTop: 16,
                  marginLeft: "40px",
                  position: "sticky",
                  boxShadow: "none",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    justifyContent: "center",
                    background: theme.palette.backgroundColor,
                  }}
                >
                  <Tabs
                    value={curTab}
                    onChange={(event, newValue) =>
                      handleChangeTab(index, newValue)
                    }
                    aria-label="basic tabs example"
                  >
                    <Tab
                      label=<span
                        style={{ textTransform: "none", fontSize: 16 }}
                      >
                        Headers
                      </span>
                      {...a11yProps(0)}
                    />
                    {shouldShowBodyTab && (
                      <Tab
                        label=<span
                          style={{ textTransform: "none", fontSize: 16 }}
                        >
                          Body
                        </span>
                        {...a11yProps(1)}
                      />
                    )}
                    <Tab
                      label=<span
                        style={{ textTransform: "none", fontSize: 16 }}
                      >
                        Params
                      </span>
                      {...a11yProps(shouldShowBodyTab ? 2 : 1)}
                    />
                    {ConfigurationTab ? (
                      <Tab
                      label=<span
                        style={{ textTransform: "none", fontSize: 16 }}
                      >
                        Configuration
                      </span>
                      {...a11yProps(shouldShowBodyTab ? 3 : 2)}
                    />
                    ) : null}
                  </Tabs>
                </div>
                <CustomTabPanel
                  value={curTab}
                  index={0}
                >
                  <TableContainer
                    style={{
                      minWidth: 696,
                      backgroundColor: theme.palette.platformColor,
                      borderRadius: 6,
                      border: "1px solid rgba(73, 73, 73, 1)",
                    }}
                  >
                    <Table aria-label="simple table">
                      <TableHead>
                        <TableRow>
                          <TableCell
                            style={{
                              border: "1px solid rgba(73, 73, 73, 1)",
                              fontSize: 16
                            }}
                          >
                            Key
                          </TableCell>
                          <TableCell
                            style={{
                              border: "1px solid rgba(73, 73, 73, 1)",
                              fontSize: 16
                            }}
                          >
                            Value
                          </TableCell>
                        </TableRow>
                      </TableHead>
                      <TableBody>
                        {RequestHeader.map((row, rowIndex) => (
                          <TableRow key={rowIndex} sx={{ height: 60 }}>
                            <TableCell
                              style={{
                                border: "1px solid rgba(73, 73, 73, 1)",
                                padding: "0px 4px",
                              }}
                            >
                              <TextField
                                fullWidth
                                variant="outlined"
                                type="text"
                                id={`header-key-${index}-${rowIndex}`}
                                value={row.key}
                                onChange={(e) =>
                                  handleInputChange(
                                    rowIndex,
                                    "key",
                                    e.target.value
                                  )
                                }
                                inputProps={{
                                  style: {
                                    backgroundColor: theme.palette.platformColor,
                                    padding: "4px 8px",
                                  },
                                }}
                                sx={{
                                  "& .MuiOutlinedInput-root": {
                                    "& fieldset": {
                                      border: "none",
                                    },
                                    "&:hover fieldset": {
                                      border: "none",
                                    },
                                    "&.Mui-focused fieldset": {
                                      border: "none",
                                    },
                                  },
                                }}
                                onKeyDown={(e) => {
                                  if (e.key === "Enter") {
                                    document.getElementById(
                                      `header-value-${index}-${rowIndex}`
                                    ).focus();
                                  }
                                  if (e.key === "Backspace" && row.key.length === 0 && rowIndex !== 0) {
                                    setRequestHeader(RequestHeader.filter((header, i) => i !== rowIndex));
                                    document.getElementById(
                                      `header-value-${index}-${rowIndex - 1}`
                                    ).focus();
                                    e.preventDefault()
                                  }
                                }}
                              />
                            </TableCell>
                            <TableCell
                              style={{
                                border: "1px solid rgba(73, 73, 73, 1)",
                                padding: "0px 4px",
                              }}
                            >
                              <TextField
                                fullWidth
                                type="text"
                                value={row.value}
                                id={`header-value-${index}-${rowIndex}`}
                                onChange={(e) =>
                                  handleInputChange(
                                    rowIndex,
                                    "value",
                                    e.target.value
                                  )
                                }
                                inputProps={{
                                  endAdornment: (
                                    <InputAdornment position="end">
                                      <DeleteIcon sx={{ color: "red" }} />
                                    </InputAdornment>
                                  ),
                                  style: {
                                    backgroundColor: theme.palette.platformColor,
                                    padding: "4px 8px",
                                  },
                                }}
                                sx={{
                                  "& .MuiOutlinedInput-root": {
                                    "& fieldset": {
                                      border: "none",
                                    },
                                    "&:hover fieldset": {
                                      border: "none",
                                    },
                                    "&.Mui-focused fieldset": {
                                      border: "none",
                                    },
                                  },
                                }}
                                onKeyDown={(e) => {
                                  if (e.key === "Enter" && !e.ctrlKey) {
                                    addRow();
                                    setTimeout(() => {
                                      document.getElementById(
                                        `header-key-${index}-${rowIndex + 1}`
                                      ).focus();
                                    }, 0);
                                  }
                                  if (e.ctrlKey && e.key === "Enter") {
                                    setShowResponseLoader(true);
                                    setDisableExecuteButton(true)
                                    handleRequestWithCustomAction(selectedMethod, baseUrl, path, RequestHeader, RequestBody, RequestParams, info, action);
                                  }
                                  if (e.key === "Backspace" && row.value.length === 0 && rowIndex !== 0) {
                                    setRequestHeader(RequestHeader.filter((header, i) => i !== rowIndex));
                                    document.getElementById(
                                      `header-value-${index}-${rowIndex - 1}`
                                    ).focus();
                                    e.preventDefault()
                                  }}
                                }
                              />
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </TableContainer>
                  <Button
                    onClick={() => addRow()}
                    variant="contained"
                    color="primary"
                    style={{
                      width: 127,
                      height: 35,
                      borderRadius: 200,
                      padding: "16px 24px",
                      marginTop: 26,
                      textTransform: "none",
                      backgroundColor: "rgba(255, 132, 68, 0.2)",
                      color: "rgba(255, 132, 68, 1)",
                    }}
                  >
                    Add Row
                  </Button>
                </CustomTabPanel>
                {shouldShowBodyTab && (
                  <CustomTabPanel
                    value={curTab}
                    index={1}
                  >
                    <AceEditor
                      id="shuffle-codeeditor-api-Explorer"
                      name="shuffle-codeeditor-api-Explorer"
                      mode="json"
                      ref={editorRef}
                      value={RequestBody}
                      theme="gruvbox"
                      width="100%"
                      fontSize={16}
                      setOptions={{ useWorker: false }}   
                      onChange={handleAceEditorChange}
                      highlightActiveLine={false}
                      style={{
                          wordBreak: "break-word",
                          marginTop: 0,
                          paddingBottom: 10,
                          overflowY: "auto",
                          whiteSpace: "pre-wrap",
                          wordWrap: "break-word",
                          backgroundColor: "#212121",
                          color: "white",
                          justifyContent: "center",
                          minHeight: `${AceEditorHeight}px`,
                          maxHeight: `${AceEditorHeight}px`,
                          border: "1px solid rgb(73, 73, 73)",
                          borderRadius: 6,
                      }}
                  />
                  </CustomTabPanel>
                )}
                <CustomTabPanel
                  value={curTab}
                  index={shouldShowBodyTab ? 2 : 1}
                >
                  <TableContainer
                    style={{
                      minWidth: 696,
                      backgroundColor: theme.palette.platformColor,
                      borderRadius: 6,
                      border: "1px solid rgba(73, 73, 73, 1)",
                    }}
                  >
                    <Table aria-label="simple table">
                      <TableHead>
                        <TableRow>
                          <TableCell
                            style={{
                              border: "1px solid rgba(73, 73, 73, 1)",
                              fontSize: 16
                            }}
                          >
                            Key
                          </TableCell>
                          <TableCell
                            style={{
                              border: "1px solid rgba(73, 73, 73, 1)",
                              fontSize: 16
                            }}
                          >
                            Value
                          </TableCell>
                        </TableRow>
                      </TableHead>
                      <TableBody>
                        {RequestParams.map((row, rowIndex) => (
                          <TableRow key={rowIndex} sx={{ height: 60 }}>
                            <TableCell
                              style={{
                                border: "1px solid rgba(73, 73, 73, 1)",
                                padding: "0px 4px",
                              }}
                            >
                              <TextField
                                fullWidth
                                type="text"
                                inputProps={{
                                  style: {
                                    backgroundColor: theme.palette.platformColor ,
                                    padding: "4px 8px",
                                  },
                                }}
                                id={`param-key-${index}-${rowIndex}`}
                                sx={{
                                  "& .MuiOutlinedInput-root": {
                                    "& fieldset": {
                                      border: "none",
                                    },
                                    "&:hover fieldset": {
                                      border: "none",
                                    },
                                    "&.Mui-focused fieldset": {
                                      border: "none",
                                    },
                                  },
                                }}
                                value={row.key}
                                onChange={(e) =>
                                  handleRequestParamsChange(
                                    rowIndex,
                                    "key",
                                    e.target.value
                                  )
                                }
                                onKeyDown={(e) => {
                                  if (e.key === "Enter") {
                                    document.getElementById(
                                      `param-value-${index}-${rowIndex}`
                                    ).focus();
                                  }
                                  if (e.key === "Backspace" && row.value.length === 0 && rowIndex !== 0) {
                                    setRequestParams(RequestParams.filter((param, i) => i !== rowIndex));
                                    document.getElementById(
                                      `param-value-${index}-${rowIndex - 1}`
                                    ).focus();
                                  }
                                }}
                              />
                            </TableCell>
                            <TableCell
                              style={{
                                border: "1px solid rgba(73, 73, 73, 1)",
                                padding: "0px 4px",
                              }}
                            >
                              <TextField
                                fullWidth
                                type="text"
                                id={`param-value-${index}-${rowIndex}`}
                                value={row.value}
                                inputProps={{
                                  style: {
                                    backgroundColor: theme.palette.platformColor,
                                    padding: "4px 8px",
                                  },
                                }}
                                sx={{
                                  "& .MuiOutlinedInput-root": {
                                    "& fieldset": {
                                      border: "none",
                                    },
                                    "&:hover fieldset": {
                                      border: "none",
                                    },
                                    "&.Mui-focused fieldset": {
                                      border: "none",
                                    },
                                  },
                                }}
                                onChange={(e) =>
                                  handleRequestParamsChange(
                                    rowIndex,
                                    "value",
                                    e.target.value
                                  )
                                }
                                onKeyDown={(e) => {
                                  if (e.key === "Enter" && !e.ctrlKey) {
                                    addRequestParamsRow();
                                    setTimeout(() => {
                                      document.getElementById(
                                        `param-key-${index}-${rowIndex + 1}`
                                      ).focus();
                                    }, 0);
                                  }
                                  if (e.ctrlKey && e.key === "Enter") {
                                    setShowResponseLoader(true);
                                    setDisableExecuteButton(true)
                                    handleRequestWithCustomAction(selectedMethod, baseUrl, path, RequestHeader, RequestBody, RequestParams, info, action);
                                  }

                                  if (e.key === "Backspace" && row.value.length === 0 && rowIndex !== 0) {
                                    setRequestParams(RequestParams.filter((param, i) => i !== rowIndex));
                                    document.getElementById(
                                      `param-value-${index}-${rowIndex - 1}`
                                    ).focus();
                                    e.preventDefault()
                                  }
                                }
                                }
                              />
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </TableContainer>
                  <Button
                    onClick={addRequestParamsRow}
                    variant="contained"
                    color="primary"
                    style={{
                      width: 127,
                      height: 35,
                      borderRadius: 200,
                      padding: "16px 24px 16px 24px",
                      marginTop: 26,
                      textTransform: "none",
                      backgroundColor: "rgba(255, 132, 68, 0.2)",
                      color: "rgba(255, 132, 68, 1)",
                    }}
                  >
                    Add Row
                  </Button>
                </CustomTabPanel>
                {(ConfigurationTab && ((shouldShowBodyTab && curTab === 3 ) || (!shouldShowBodyTab && curTab === 2)))? (
                  <ConfigurationTab
					setCurTab={setCurTab}
					shouldShowBodyTab={shouldShowBodyTab}
				  />
                ) : null}
              </Paper>
            </div>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                width: 354,
                marginLeft: 10,
                marginRight: 5,
              }}
            >
              <div
                key={index}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  paddingTop: index === 0 ? "20px" : "40px",
                  minWidth: 200,
                  marginLeft: 10
                }}
              >
                  <span style={{ fontSize: 16, fontWeight: 600, color: theme.palette.textColor }}>
                    {action.name.replaceAll("_", " ")}
                  </span>
                  <p style={{color: theme.palette.textColor}}>
                    {action.description
                      ? action.description
                      : ""}
                  </p>
              </div>
            </div>
          </div>
        );
})

const ActionResponse = memo(({ apiResponse, ExampleBody, isLoggedIn, isLoaded }) => {
  const [height, setHeight] = useState("14vh")
  const [responseTabIndex, setResponseTabIndex] = useState(0)
  const [oldResponse, setOldResponse] = useState(apiResponse)
  const [highlight, setHighlight] = useState(false)
  const {themeMode } = useContext(Context)
  const theme = getTheme(themeMode)

  const MIN_HEIGHT = 50

  useEffect(() => {
	  var apiResp = apiResponse
	  var oldResp = oldResponse
	  try {
		  apiResp = JSON.stringify(apiResponse)
	  } catch (error) {
		  //console.error("Error parsing JSON response:", error);
	  }

	  try {
		  oldResp = JSON.stringify(oldResponse)
	  } catch (error) {
		  //console.error("Error parsing JSON response:", error);
	  }

	  if (apiResp === oldResp) {
		  return
	  }

	  setOldResponse(apiResponse)

	  //console.log("CHANGES MADE: ", apiResponse, oldResponse)
	  //toast("CHANGES!")
	  //console.log("HEIGHT: ", height)
	  
	  if (height === "14vh") {
		  setHeight("30vh")
	  } else {
		  // Check if height is less than 250px
		  var heightNum = 0
		  try {
		  	heightNum = parseInt(height.slice(0, -2))
		  } catch (error) {
		  }

		  if (heightNum < 350) {
			  setHeight("350px")
		  } 
	  }

	  setHighlight(true)
	  setTimeout(() => {
	      setHighlight(false)
	  }, 2000)
  }, [apiResponse, ExampleBody])

  const handleReactJsonClipboard = (copy) => {
    const elementName = "copy_element_shuffle";
    let copyText = document.getElementById(elementName);

    if (copyText) {
      if (copy.namespace && copy.name && copy.src) {
        copy = copy.src;
      }

      const clipboard = navigator.clipboard;
      if (!clipboard) {
        toast("Can only copy over HTTPS (port 3443)");
        return;
      }

      let stringified = JSON.stringify(copy);
      if (stringified.startsWith('"') && stringified.endsWith('"')) {
        stringified = stringified.slice(1, -1);
      }

      navigator.clipboard.writeText(stringified);
      toast("Copied value to clipboard, NOT json path.");
    } else {
      console.log("Failed to copy from " + elementName + ": ", copyText);
    }
  };

  const stopResizing = () => {
    window.removeEventListener("mousemove", startResizing);
    window.removeEventListener("mouseup", stopResizing);
  };

  const initResize = (e) => {
    e.preventDefault();
    window.addEventListener("mousemove", startResizing);
    window.addEventListener("mouseup", stopResizing);
  };

  const startResizing = useCallback((e) => {
    const newHeight = window.innerHeight - e.clientY;
    if (newHeight >= MIN_HEIGHT) { 
      setHeight(`${newHeight}px`);
    }
  }, []);

  const formData = (exampleBody) => {
    try {
      return exampleBody ? JSON.parse(exampleBody) : {};
    } catch (error) {
      console.error("Error parsing the example string:", error);
      return {};
    }
  };

  useEffect(() => {
    const handleResize = () => {
      const newHeight = window.innerHeight * 0.1;
      setHeight(`${newHeight}px`);
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <ApiResponseWrapper isLoggedIn={isLoggedIn} isLoaded={isLoaded}>
      <div
        style={{
          width: '100%',
          height: height,
          backgroundColor: theme.palette.backgroundColor,
          display: 'flex',
          flexDirection: 'column',
          borderTop: '1px solid rgba(255,255,255,0.2)',
          maxHeight: "80vh",
		  transition: "height 0.3s ease",
        }}
      >
	  	{highlight === true ? 
			<LinearProgress fullWidth color="secondary" style={{height: 1, }}/>
			: null
		}
        <div
          style={{
            overflow: 'auto',
            cursor: 'row-resize',
          }}
          onMouseDown={initResize}
        >
          <Tabs
            value={responseTabIndex}
            onChange={(e, newValue) => setResponseTabIndex(newValue)}
          >
            <Tab
              label={<span style={{ textTransform: 'none', fontSize: 16 }}>Response</span>}
              {...a11yProps(0)}
            />
            <Tab
              label={<span style={{ textTransform: 'none', fontSize: 16 }}>Example Response</span>}
	  		  disabled={ExampleBody === undefined || ExampleBody === null || ExampleBody === ""}
              {...a11yProps(1)}
            />
            <Tab
              label={<span style={{ textTransform: 'none', fontSize: 16 }}>History</span>}
	  		  disabled={true}
              {...a11yProps(2)}
            />
          </Tabs>
        </div>
        <div style={{ flex: 1, overflowY: 'auto' }}>
          <CustomTabPanel
            value={responseTabIndex}
            index={0}
          >
            <ResponseTabWrapper apiResponse={apiResponse} />
          </CustomTabPanel>

          <CustomTabPanel
            value={responseTabIndex}
            index={1}
          >
            <ReactJson
              src={formData(ExampleBody)}
              theme={theme.palette.jsonTheme}
              style={{...theme.palette.reactJsonStyle, border: "none"}}
              collapsed={false}
              iconStyle={theme.palette.jsonIconStyle}
              collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
              enableClipboard={handleReactJsonClipboard}
              displayDataTypes={false}
              name={false}
            />
          </CustomTabPanel>

        </div>
      </div>
    </ApiResponseWrapper>
  );
});

const ResponseTabWrapper = memo(({ apiResponse }) => {

  const {themeMode } = useContext(Context)
  const theme = getTheme(themeMode)

  const handleReactJsonClipboard = (copy) => {
    const elementName = "copy_element_shuffle";
    let copyText = document.getElementById(elementName);

    if (copyText) {
      if (copy.namespace && copy.name && copy.src) {
        copy = copy.src;
      }

      const clipboard = navigator.clipboard;
      if (!clipboard) {
        toast("Can only copy over HTTPS (port 3443)");
        return;
      }

      let stringified = JSON.stringify(copy);
      if (stringified.startsWith('"') && stringified.endsWith('"')) {
        stringified = stringified.slice(1, -1);
      }

      navigator.clipboard.writeText(stringified);
      toast("Copied value to clipboard, NOT json path.");
    } else {
      console.log("Failed to copy from " + elementName + ": ", copyText);
    }
  };

  return(
    <ReactJson
          src={apiResponse}
          theme={theme.palette.jsonTheme}
          style={{...theme.palette.reactJsonStyle, border: "none"}}
		  shouldCollapse={(jsonField) => {
			return collapseField(jsonField)
		  }}
          iconStyle={theme.palette.jsonIconStyle}
          collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
          enableClipboard={handleReactJsonClipboard}
          displayDataTypes={false}
          name={false}
        />
  )})

const PaddingWrapper = memo(({ isLoggedIn, isLoaded, children }) => {
  const { leftSideBarOpenByClick, windowWidth, themeMode } = useContext(Context);
  const theme = getTheme(themeMode)
  return (
    <div
      style={{
        width: (isLoggedIn && isLoaded)
          ? leftSideBarOpenByClick
            ? windowWidth >= 1920  ? "calc(100% - 630px)" : "calc(100% - 570px)"
            : windowWidth >= 1920 ? "calc(100vw - 460px)": "calc(100% - 410px)"
          : windowWidth >= 1920 ? "calc(100% - 370px)" : "calc(100% - 320px)",
        backgroundColor: theme.palette.backgroundColor,
        position: "fixed",
        bottom: 0,
        right: 0,
        display: "flex",
        flexDirection: "column",
        borderTop: "1px solid #212121",
        transition: "width 0.3s ease",
        minHeight: "10%",
      }}
    >
      {children}
    </div>
  );
});

const ApiResponseWrapper = memo(({ children, isLoaded, isLoggedIn }) => {
  return (
    <PaddingWrapper isLoggedIn={isLoggedIn} isLoaded={isLoaded}>
      {children}
    </PaddingWrapper>
  );
});