temp/src/Components/QueryCardEditor.jsx

import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { useSearchParams } from "react-router-dom";
import { Box, Button } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";

import AntdesignLayout from "./AntdesignLayout";
import TextInputField from "./TextInputField";
import { toast } from "react-toastify";
import LoadingContainer from "./LoadingContainer";
import SimpleDialog from "./SimpleDialog";
import RotateLeftIcon from "@mui/icons-material/RotateLeft";
import RotateRightIcon from "@mui/icons-material/RotateRight";
import { updatePartCErrorData, updateSystemNo } from "../redux/actions/actions";
import { updatePartCErrorList } from "../redux/actions/actions";
import { DiscFullTwoTone } from "@mui/icons-material";

const QueryCardEditor = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const [barcode, setBarcode] = useState();
  const [qrcode, setQrcode] = useState();
  const [marks, setMarks] = useState(null);
  const [subjectCode, setSubjectCode] = useState(null);
  const [imageName, setImageName] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [recordData, setRecordData] = useState([]);
  const [s3Path, setS3Path] = useState(null);
  const [showDialog, setShowDialog] = useState(false);
  const [rotationResults, setRotationResults] = useState([]);
  const [rotateAngle, setRotateAngle] = useState(0);
  const evErrorsList = useSelector((state) => state?.partCErrorList);
  const table = searchParams.get("table");
  const image_name = searchParams.get("image_name");
  const paramsError = searchParams.get("error");
  const paramsErrorReason = searchParams.get("error_reason");
  const paramsSysNo = searchParams.get("sysNo");
  const paramsDegreeType = searchParams.get("degreeType");
  const [items, setItems] = useState([]);
  const [evErrorsData,setEvErrorsData] = useState([]);

  const navigate = useNavigate();
  const dispatch = useDispatch();
  console.log("Ev errors list ==== ", evErrorsList);
  console.log("table is : ", table);
  // const evErrorsData = useSelector((state) => state?.partCErrorData);
  // console.log("evErrorData: ", evErrorsData);

  const fetchPrimaryKeyData = async () => {
    try {
      const payload = {
        image_name,
        table,
      };
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchPrimaryKeyData`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        }
      );
      return await response.json();
    } catch (error) {
      throw new Error(error);
      return null;
    }
  };

  useEffect(() => {
    const marksLocalData = localStorage.getItem("marks_manual_data");
    console.log("Marks local data 123 ========= ",marksLocalData)
    if (marksLocalData) {
      console.log("Into if and updating .......")
      console.log("marks local data ==== ",marksLocalData)
      setEvErrorsData(JSON.parse(marksLocalData));
    }
  }, []);

 useEffect(()=>{
    dispatch(updateSystemNo(paramsSysNo))
 },[paramsSysNo])


  useEffect(()=>{
     console.log("Ev error data =============== ",evErrorsData)
  },[evErrorsData])

  useEffect(() => {
    const fetchData = async () => {
      if (table && image_name) {
        setIsLoading(true);
        const response = await fetchPrimaryKeyData();
        setIsLoading(false);
        console.log("Response is : ", response);
        if (response?.status === "success") {
          console.log("=========== Success ============");
          const data = response?.data;
          if (data.length > 0) {
            setRecordData(data[0]);
          }
        }
      }
    };
    fetchData();
  }, []);

  useEffect(() => {
    console.log("=========== Use effect triggered ===========");
    setBarcode(recordData?.barcode);
    setMarks(recordData?.marks);
    setQrcode(recordData?.qrcode);
    setImageName(recordData?.image_name);
    setSubjectCode(recordData?.subject_code);
    setS3Path(recordData?.s3_path);
  }, [recordData]);
  

  const updateRecord = async () => {
    if(!marks){
      return
    }
    setIsLoading(true);
    try {
      const payload = {
        qrcode,
        barcode,
        table,
        s3Path,
        subjectCode,
        marks,
        imageName,
        rotateAngle
      };
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/editPartCdata`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        }
      );
      const responseData = await response.json();
      setIsLoading(false);
      console.log("response data ========= ", responseData);
      if (responseData?.status === "success") {
        toast.success("Record Updated Successfully ...");
        var currentIndex = null;
        console.log("Ev errors data before filter ============= ",evErrorsData)
        var newRecords = evErrorsData.filter((data, index) => {
          if (data?.image_name === imageName) {
            currentIndex = index;
            return false;
          }
          return true;
        });
        if(!currentIndex){
          currentIndex = 0
        }
        console.log("new records ======1 ", newRecords);
        console.log("Current Index ===== ", currentIndex);
        dispatch(updatePartCErrorData(newRecords));
        if (newRecords.length > 0) {
          console.log("Has to navigte 12 .....");
          localStorage.setItem("marks_manual_data", JSON.stringify(newRecords));
          const newUrl = `/sqlPlayground/edit?image_name=${newRecords[currentIndex]?.image_name}&table=ocr_scanned_part_c_v1&error=${paramsError}&error_reason=${paramsErrorReason}&degreeType=${paramsDegreeType}&sysNo=${paramsSysNo}`;
          console.log("new url ==== ", newUrl);
          window.location.href = newUrl;
        } else {
          navigate("/");
        }
      }
    } catch (error) {
      setIsLoading(false);
      throw new Error(error);
    }
  };

  useEffect(() => {
    console.log("Rotate angle changed to ========== ", rotateAngle);
    const imageContainer = document.getElementById("img-container");
    console.log("Imge container ===== ", imageContainer);
    if (imageContainer) {
      imageContainer.style.transform = `rotate(${rotateAngle}deg)`;
    }
  }, [rotateAngle]);

  const initateRotation = async () => {
    console.log("Rotating initiated ...");
    setIsLoading(true);
    const payload = {
      imageName,
    };
    try {
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/initateRotation`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        }
      );
      setIsLoading(false);
      const responseData = await response.json();
      console.log("Response data ======= ", responseData);
      if (responseData?.status === "success") {
        setShowDialog(true);
        setRotationResults(responseData?.result);
      }
    } catch (error) {
      setIsLoading(false);
      throw new Error(error);
    }
  };

const skipPage = () =>{
  try{
    if(evErrorsData){
      var currentIndex = null
        var newRecords = evErrorsData.filter((data, index) => {
          if (data?.image_name === imageName) {
            currentIndex = index;
            return false;
          }
          return true;
        });
        if(!currentIndex){
          currentIndex = 0
        }
        console.log("Current Index ===== ", currentIndex);
        const newIndex = currentIndex+1
        console.log("new index ===== ",newIndex)
        if (newRecords.length > 0) {
          console.log("Has to navigte 12 .....");
          const newUrl = `/sqlPlayground/edit?image_name=${evErrorsData[newIndex]?.image_name}&table=ocr_scanned_part_c_v1&error=${paramsError}&error_reason=${paramsErrorReason}&degreeType=${paramsDegreeType}&sysNo=${paramsSysNo}`;
          console.log("new url ==== ", newUrl);
          window.location.href = newUrl;
      }
    }
  }catch(error){
    throw new Error(error)
  }
}

  return (
    <AntdesignLayout>
      <Box className="d-flex justify-content-between align-items-center">
        <Box className="d-flex flex-column gap-3 w-25">
          {imageName && <h5 className="text-left">ID : {imageName}</h5>}
          <TextInputField
            placeholder={"Barcode"}
            value={barcode}
            setValue={setBarcode}
          />
          <TextInputField
            placeholder={"QR Code"}
            value={qrcode}
            setValue={setQrcode}
          />
          <TextInputField
            placeholder={"Marks"}
            value={marks}
            setValue={setMarks}
          />
          <TextInputField
            placeholder={"Subject Code"}
            value={subjectCode}
            setValue={setSubjectCode}
          />
          <Button
            className="bg-primary text-white rounded p-3"
            onClick={() => {
              updateRecord();
            }}
          >
            Update
          </Button>
          <Button
            className="bg-primary text-white rounded p-3"
            onClick={() => {
              skipPage()
            }}
          >
            Skip
          </Button>
          <Box className="d-flex justify-content-between">
            <Button
              className="bg-primary text-white rounded p-3"
              onClick={() => setRotateAngle((prev) => prev - 90)}
            >
              Rotate <RotateLeftIcon />
            </Button>
            <Button
              className="bg-primary text-white rounded p-3"
              onClick={() => setRotateAngle((prev) => prev + 90)}
            >
              Rotate <RotateRightIcon />
            </Button>
          </Box>
        </Box>
        <Box className="w-75">
          <Box className="px-5" id="img-container">
            <img
              src={`https://docs.exampaper.vidh.ai/${recordData?.s3_path}`}
              width="100%"
              height="auto"
            />
          </Box>
        </Box>
      </Box>
      {isLoading && <LoadingContainer />}
      {showDialog && (
        <SimpleDialog
          type="rotation_results"
          rotationResults={rotationResults}
          setShowDialog={setShowDialog}
        />
      )}
    </AntdesignLayout>
  );
};

export default QueryCardEditor;