temp/src/Components/CustomQueryExecutorCard.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";
// import "react-toastify/dist/ReactToastify.css";
import RotateLeftIcon from "@mui/icons-material/RotateLeft";
import RotateRightIcon from "@mui/icons-material/RotateRight";
import PlayGroundEditContainer from "./PlayGroundEditContainer"

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();
  const [showEditContainer,setShowEditContainer] = useState(false)
  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 updatePartAInstructions = async () => {
    console.log("update instrunction");
    const payload = {
      data,
    };
    try {
      setIsLoading(true);
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/updatePartAInstructions`,
        {
          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 updatePartAFront = async () => {
    console.log("update front");
    const payload = {
      data,
    };
    try {
      setIsLoading(true);
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partAFrontSideMarking`,
        {
          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 updateFront = async () => {
    console.log("update front");
    const payload = {
      data,
    };
    try {
      setIsLoading(true);
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvFrontSideMarking`,
        {
          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 updateBack = 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 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 updateEvCover = 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 markAsDummy = async () =>{
    const payload = {
      data,
    };
    try {
      setIsLoading(true);
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvDummyMarking`,
        {
          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) {
      setIsLoading(false)
      throw new Error(error);
    }
  }

  const showContainerAction = () =>{
    setShowEditContainer(true)
  }

  const buttonActions = {
    PartC: [
      { btnLabel: "Mark As Front", action: updateFront },
      { btnLabel: "Mark As Back", action: updateBack },
      { btnLabel: "Mark As Ev", action: updateEvCover },
      { btnLabel: "Mark As Dummy",action: markAsDummy},
      { btnLabel: "Edit",action: showContainerAction}
    ],
    PartA: [
      { btnLabel: "Mark As Front", action: updatePartAFront },
      { btnLabel: "Mark As Instruction", action: updatePartAInstructions },
      { btnLabel: "Initiate Process", action: initateProcess },
      { btnLabel: "Mark As Dummy",action:markAsDummy },
      { btnLabel: "Edit",action: showContainerAction}
    ],
  };

  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 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 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">
      <Box className="p-4 d-flex justify-content-between align-items-start">
        <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>
                </>
              )} */}

            {/* <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>
        <Box className="d-flex flex-column gap-2 mx-2 py-3" style={{minWidth:"250px"}}>
          {type &&
            buttonActions[type].map((action) => (
              <Button
                className="m-0 bg-primary text-white p-3 rounded"
                onClick={action?.action}
              >
                {action?.btnLabel}
              </Button>
            ))}
          <Box className="d-flex flex-column justify-content-between gap-2 my-2">
            <Button
              className="m-0 bg-primary text-white p-3 rounded"
              onClick={rotateLeft}
            >
              Rotate left<RotateLeftIcon/>
            </Button>

            <Button
              className="m-0 bg-primary text-white p-3 rounded"
              onClick={rotateRight}
            >
              Rotate Right<RotateRight/>
            </Button>
            <Button
              className="m-0 bg-primary text-white p-3 rounded"
              onClick={saveRotatedImage}
            >
              Save
            </Button>
          </Box>
        </Box>
        <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>
      {isLoading && <LoadingContainer loadingText={"Loading ..."} />}
      {showEditContainer && <PlayGroundEditContainer rotateAngle={rotateAngle} data={data} s3Path={data[s3_image_column]} tableName={tableName} imageName={data["image_name"]} setShowEditContainer={setShowEditContainer}/>}
    </Box>
  );
};

export default CustomQueryExecutorCard;