import React, { useRef, useEffect } from "react";
import { TextField } from "@mui/material";
import { useQuery } from "@tanstack/react-query";

import TitleCard from "pages/titleCard";
// import { Helmet } from "react-helmet";
import {
  fetchOrderInsight,
  fetchOrderSummary,
  fetchLocationSummary,
  fetchLocations,
} from "pages/api/api";

const Requests = () => {
  const textFieldRef = useRef(null);

  /* ============================================= || handleKeyPress (ctrl+k)| ============================================= */

  useEffect(() => {
    const handleKeyPress = (event) => {
      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
        event.preventDefault();

        textFieldRef.current.focus();
      }
      if (
        event.key === "Escape" &&
        document.activeElement === textFieldRef.current
      ) {
        // Remove focus from the TextField
        textFieldRef.current.blur();
      }
    };
    document.addEventListener("keydown", handleKeyPress);

    return () => {
      document.removeEventListener("keydown", handleKeyPress);
    };
  }, []);
  return (
    <>
      {/* <Helmet>
        <title>Request-Nearle Admin</title>
        <meta name="description" content="Helmet application" />
      </Helmet> */}
      <TitleCard title="Requests" />
      <TextField fullWidth label="Enter text" inputRef={textFieldRef} />
    </>
  );
};

export default Requests;
