temp/src/Components/CustomQueryExecutorCard_BK.jsx

import { Box, Button } from "@mui/material";
import DownloadIcon from "@mui/icons-material/Download";
import { LazyLoadImage } from "react-lazy-load-image-component";
import { Label, MoreHorizTwoTone, RotateRight } from "@mui/icons-material";
import { useState, useEffect,useRef } from "react";
import { ToastContainer, toast } from "react-toastify";
import LoadingContainer from "./LoadingContainer";
import { useNavigate } from "react-router-dom";

const CustomQueryExecutorCard = ({
  data,
  s3_image_column,
  query,
  error,
  error_reason,
  reduxSystemNo,
  degreeType,
  type,
  tableName
}) => {
  // console.log("ERROR ============= ",error)
  // console.log("ERROR REASON ============== ",error_reason)
  // console.log("REDUX SYSTEM NO ================== ",reduxSystemNo)
  const navigate = useNavigate();
  const [dataValue, setDataValue] = useState({});
  const [isLoading, setIsLoading] = useState(false);
  //   console.log("data in query executor Card : ", data);
  const [keys, setKeys] = useState([]);
  const [values, setValues] = useState([]);
  const [rotateAngle, setRotateAngle] = useState(0);
  const [imageName,setImageName] = useState(null)
  const [tableNameData,setTableNameData] = useState(null)
  const imageEleRef = useRef()
  console.log("data =================== ",data)
  // console.log("image column ====== ", s3_image_column);
  // console.log("s3 image ======= ", data[s3_image_column]);
  //   console.log("Keys ==== ",keys)
  //   console.log("Values ===== ",values)

  useEffect(()=>{
    if(data){
      console.log("Image name ====== ",data?.image_name)
      setImageName(data?.image_name)
    }
    if(tableName){
      setTableNameData(tableName)
    }
  },[data])


  const updateFront = () => {
    console.log("update front");
  };

  const updateBack = () => {
    console.log("update back ..");
  };

  const initateProcess = () => {
    console.log("inititate process..");
  };

  const rotateLeft = () => {
    console.log("rotate left .....");
    const newAngle = rotateAngle - 90
    setRotateAngle((prev) => prev - 90);
    console.log("new angle ....",newAngle)
    const newStyle = `rotate(${newAngle}deg)`
    imageEleRef.current.style.transform = newStyle
  };

  const rotateRight = () => {
    console.log("rotate right");
    const newAngle = rotateAngle + 90
    setRotateAngle((prev) => prev + 90);
    const newStyle = `rotate(${newAngle}deg)`
    imageEleRef.current.style.transform = newStyle
  };

  const buttonActions = {
    PartC: [
      { btnLabel: "Mark As Front", action: updateFront },
      { btnLabel: "Mark As Back", action: updateBack },
      { btnLabel: "Initiate Process", action: initateProcess },
    ],
  };

  useEffect(() => {
    setDataValue(data);
    setKeys(Object.keys(data));
    setValues(Object.values(data));
  }, [data]);

  useEffect(() => {
    console.log("Data value ===== ", dataValue);
    setKeys(Object.keys(dataValue));
    setValues(Object.values(dataValue));
  }, [dataValue]);

  const mark_as_ev = async () => {
    const payload = {
      data,
    };
    try {
      setIsLoading(true);
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvCoverMarking`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        }
      );
      setIsLoading(false);
      const responseData = await response.json();
      if (responseData.status === "success") {
        const updatedData = { ...dataValue, is_cover: 1 };
        // console.log("Data ===== ", updatedData);
        setDataValue(updatedData);
        console.log("Updation successfull ....");
        toast.success("Record Marked As Ev !...");
      } else {
        throw new Error(responseData?.message);
      }
    } catch (error) {
      throw new Error(error);
    }
  };

  const mark_as_dummy = async () => {
    const payload = {
      data,
    };
    try {
      setIsLoading(true);
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcDummyMarking`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        }
      );
      setIsLoading(false);
      const responseData = await response.json();
      if (responseData.status === "success") {
        console.log("Updation successfull ....");
        const updatedData = { ...dataValue, type: 102 };
        // console.log("Data ===== ", updatedData);
        setDataValue(updatedData);
        toast.success("Record Marked as Dummy ! ....");
      } else {
        throw new Error(responseData?.message);
      }
    } catch (error) {
      throw new Error(error);
    }
  };


  const saveRotatedImage = async () =>{
    try{
      if(rotateAngle === 0){
        return
      }
      const payload = {
        imageName,
        tableNameData,
        rotateAngle,
        s3_path : data[s3_image_column]
      }
      setIsLoading(true);
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/saveRotatedImage`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        }
      );
      setIsLoading(false);
      const responseData = await response.json();
      if (responseData.status === "success") {
        toast.success("Image Rotation Saved Successfully")
      }

    }catch(error){
      setIsLoading(false)
      throw new Error(error)
    }
  }

  const mark_as_backpage = async () => {
    const payload = {
      data,
    };
    try {
      setIsLoading(true);
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvBacksideMarking`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        }
      );
      setIsLoading(false);
      const responseData = await response.json();
      if (responseData.status === "success") {
        console.log("Updation successfull ....");
        const updatedData = { ...dataValue, is_backpage: 1 };
        // console.log("Data ===== ", updatedData);
        setDataValue(updatedData);
        toast.success("Record Marked as Backpage ! ....");
      } else {
        throw new Error(responseData?.message);
      }
    } catch (error) {
      throw new Error(error);
    }
  };

  const rotate_and_process = async () => {
    setIsLoading(true);
    try {
      const payload = {
        data,
      };
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partCRotateProcess`,
        {
          method: "POST",
          header: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        }
      );
      const responseData = await response.json();
      setIsLoading(false);
      if (responseData.status === "success") {
        console.log("Response successfull ...");
      }
    } catch (error) {
      setIsLoading(false);
      throw new Error(error);
    }
  };

  return (
    <Box className="w-100 rounded shadow mb-5 bg-white">
      <ToastContainer />
      <Box className="p-4 d-flex justify-content-between align-items-start">
        <Box className="text-left p-3 d-flex flex-column justify-content-between align-items-between h-100">
          {keys.map((record, index) => (
            <p>
              <strong>{keys[index]}</strong> : {values[index]}
            </p>
          ))}
        </Box>
        <Box className="p-1">
          <Box className="p-2 d-flex justify-content-end gap-3 align-items-center">
            {/* {query.includes("ocr_scanned_part_c_v1") &&
              data[s3_image_column] && (
                <>
                  <Button
                    className="w-50 m-0 bg-primary text-white p-1 rounded"
                    onClick={() => navigate(`/sqlPlayground/edit?image_name=${data["image_name"]}&table=ocr_scanned_part_c_v1&error=${error}&error_reason=${error_reason}&sysNo=${reduxSystemNo}&degreeType=${degreeType}`)}
                  >
                    Edit
                  </Button>
                  <Button
                    className="w-50 m-0 bg-primary text-white p-1 rounded"
                    onClick={() => {
                      mark_as_backpage();
                    }}
                  >
                    Mark As Back
                  </Button>
                  <Button
                    className="w-50 m-0 bg-primary text-white p-1 rounded"
                    onClick={() => {
                      mark_as_ev();
                    }}
                  >
                    Mark As EV
                  </Button>
                  <Button
                    className="w-50 m-0 bg-primary text-white p-1 rounded"
                    onClick={() => {
                      mark_as_dummy();
                    }}
                  >
                    Mark As Dummy
                  </Button>
                </>
              )} */}
            {type &&
              buttonActions[type].map((action) => (
                <Button
                  className="w-50 m-0 bg-primary text-white p-1 rounded"
                  onClick={action?.action}
                >
                  {action?.btnLabel}
                </Button>
              ))}
            <Button className="bg-primary">
              <a
                href={`https://docs.exampaper.vidh.ai/${data[s3_image_column]}`}
              >
                <DownloadIcon className="text-light text-white" />
              </a>
            </Button>
          </Box>
          <Box className="border border-dark" id={imageName}>
            <img
              src={`https://docs.exampaper.vidh.ai/${data[s3_image_column]}`}
              width="800px"
              height="auto"
              alt="Image Alt"
              ref={imageEleRef}
            />
          </Box>
          <Box className="d-flex justify-content-between gap-2 my-2">
            <Button
              className="w-50 m-0 bg-primary text-white p-1 rounded"
              onClick={rotateLeft}
            >
              Rotate left
            </Button>
            <Button className="w-50 m-0 bg-primary text-white p-1 rounded" onClick={saveRotatedImage}>
              Save
            </Button>
            <Button
              className="w-50 m-0 bg-primary text-white p-1 rounded"
              onClick={rotateRight}
            >
              Rotate Right
            </Button>
          </Box>
        </Box>
      </Box>
      {isLoading && <LoadingContainer loadingText={"Loading ..."} />}
    </Box>
  );
};

export default CustomQueryExecutorCard;