// import React, { useRef } from "react";
// import { GlobalContext, showToast } from "@/context/Global";
// import QrCodeGenerator from "../components/QrCodeGenerator";
// import QrCodeReader from "@/components/QrCodeReader";

// const TestQrCode = () => {
//   const { dispatch: globalDispatch } = React.useContext(GlobalContext);
//   const [generatedQrCode, setGeneratedQrCode] = React.useState();
//   const [scannedQrCodeText, setScannedQrCodeText] = React.useState();

//   React.useEffect(() => {
//     globalDispatch({
//       type: "SETPATH",
//       payload: {
//         path: "test",
//       },
//     });
//   }, []);

//   return (
//     <>
//       <div className="mb-10 rounded bg-white p-5 shadow">
//         <h4 className="text-2xl font-medium">QR Code Test</h4>
//         <QrCodeGenerator setResult={setGeneratedQrCode} />
//         <QrCodeReader setResult={setScannedQrCodeText} />
//       </div>
//     </>
//   );
// };

// export default TestQrCode;

import React, { useState, useContext } from "react";
// import { tokenExpireError, AuthContext } from "@/context/Auth";
// import { GlobalContext, showToast } from "@/context/Global";

import { MkdFileTable } from "@/components/MkdFileTable";
import { MkdTabContainer } from "@/components/MkdTabContainer";
import { AuthContext } from "@/context/Auth";
import { GlobalContext } from "@/context/Global";
import { InteractiveMap } from "@/components/InteractiveMap"
import { QrCodeGenerator } from "@/components/QrCodeGenerator";
import { QrCodeReader } from "@/components/QrCodeReader";

const FileUploadProcessPage = () => {
  const { state, dispatch } = useContext(AuthContext);
  const { state: globalState, dispatch: globalDispatch } =
    useContext(GlobalContext);

  const [currentTab, setCurrentTab] = useState(0);

  //  React.useEffect(() => {
  //    globalDispatch({
  //      type: "SETPATH",
  //      payload: {
  //        path: "{notes}",
  //      },
  //    });
  //  }, []);
  const interactiveMapCards = [
    {
      price: 78,
      latitude: 36.7783,
      longitude: -119.4179
    },
    {
      price: 42,
      latitude: -33.8688,
      longitude: 151.2093
    },
    {
      price: 63,
      latitude: 51.5074,
      longitude: -0.1278
    },
    {
      price: 89,
      latitude: 40.7128,
      longitude: -74.0060
    },
    {
      price: 25,
      latitude: -22.9068,
      longitude: -43.1729
    }
  ];



  return (
    <div className=" mx-auto rounded  p-5 shadow-md">
      <div className={`min-h-screen `}>
        <MkdFileTable className={``} title={"File Table"} fileType={"excel"} />
        <MkdTabContainer
          currentTab={currentTab}
          setCurrentTab={setCurrentTab}
          tabs={["1", "2", "3"]}
          className={`w-full`}
        >
          {currentTab === 0 ? (
            <div className="h-full w-full ">
              <div className={``}>
                Enter developer notes.
                <h1 className={``}>Enter heading text...</h1>
                <p className={``}>Enter Paragraph text...</p>
                <QrCodeReader
                  setResult={(data) => {
                    console.log(data);
                  }}
                />
              </div>
            </div>
          ) : null}

          {currentTab === 1 ? (
            <div className="h-full w-full ">
              <div className={``}>
                Enter developer notes.
                <QrCodeGenerator
                  setResult={(data) => {
                    console.log(data);
                  }}
                />
                <h1 className={``}>Enter heading text...</h1>
                <p className={``}>Enter Paragraph text...</p>
              </div>
            </div>
          ) : null}
        </MkdTabContainer>
        <InteractiveMap cards={interactiveMapCards} />
      </div>
    </div>
  );
};

export default FileUploadProcessPage;
