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";
import saveRotatedImage from "./Utilities/PartCPlaygroundUtilities";
import markAsPartc from "./Utilities/PartAPlaygroundUtilities";
import { updateAttendenceBlank } from "./Utilities/AttendencePlaygroundUtilities";
import TextInputField from "./TextInputField";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";

const UpdatedPlaygroundUpdater = ({
  oldData,
  s3_image_column,
  query,
  error,
  error_reason,
  reduxSystemNo,
  degreeType,
  type,
  tableName,
  currentCardIndex,
  setCurrentCardIndex,
  setCardData,
  totalData,
}) => {
  // 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);
  const [editorType, setEditorType] = useState(null);
  const dialogText = "This is dialog text";
  const [marks, setMarks] = useState(null);
  const [registerNumber, setRegisterNumber] = useState(null);
  const [totalStudents, setTotalStudents] = useState(null);
  const [totalPresent, setTotalPresent] = useState(null);
  const [totalAbsent, setTotalAbsent] = useState(null);
  // const [barcode, setBarcode] = useState(null);
  const [qrcode, setQrcode] = useState(null);
  const [bar_code, set_Barcode] = useState(null);
  const [s3Path, setS3Path] = useState(null);
  const [subjectCode, setSubjectCode] = useState(null);
  const [data,setData] = useState(null)

  const [open, setOpen] = useState(true); // Set open state to true by default
  const handleClose = () => {
    setOpen(false);
  };

  useEffect(() => {
    console.log("data ========== ", data);
    if (data) {
      console.log("barcode = ", data.barcode)
      setQrcode(data.qrcode);
      // set_Barcode(data.barcode)
      set_Barcode(data.barcode === '' ? null : data.barcode);
      setMarks(data.marks);
      setS3Path(data.s3_path);
      setSubjectCode(data.subject_code);
      setRegisterNumber(data.register_number);
      setTotalAbsent(data?.total_absent);
      setTotalPresent(data?.total_present);
      setTotalStudents(data?.total_students);
      setRotateAngle(0);
    }
    console.log("the currect editor type: ", type);
  }, [data]);

  // useEffect(() => {
  //   console.log("barcode in use effect ==== ", barcode);
  // }, [barcode]);


  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);
    }
    if (data?.subject_code) {
    }
  }, [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 Frontpage ! ....");
      } else {
        toast.error("Something Went Wrong !...");
        setIsLoading(false);
        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 {
        setIsLoading(false);
        toast.error("Something Went Wrong !...");
        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 {
        setIsLoading(false);
        toast.error("Something Went Wrong !...");
        throw new Error(responseData?.message);
      }
    } catch (error) {
      setIsLoading(false);
      toast.error("Something Went Wrong !...");
      throw new Error(error);
    }
  };

  const showContainerAction = () => {
    setShowEditContainer(true);
    console.log("type === ", type);
    // setEditorType(type)
  };

  const updateAttendenceBlankAction = () => {
    updateAttendenceBlank(setIsLoading, data, setShowEditContainer);
  };

  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 Backpage", action: updatePartAInstructions },
      // { btnLabel: "Initiate Process", action: initateProcess },
      { btnLabel: "Mark As Dummy", action: markAsDummy },
      { btnLabel: "Mark As Part-C", action: markAsPartc },
      { btnLabel: "Edit", action: showContainerAction },
    ],
    Attendence: [
      { btnLabel: "Mark As Blank", action: updateAttendenceBlankAction },
      { 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 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);
    }
  };

  const updateRecordPartA = async () => {
    console.log(registerNumber);
    console.log(subjectCode);
    console.log(bar_code, qrcode);
    console.log(!registerNumber && !subjectCode && (!bar_code || !qrcode));
    if (!registerNumber && !subjectCode && (!bar_code || !qrcode)) {
      return;
    }
    setIsLoading(true);
    try {
      const payload = {
        qrcode,
        barcode: bar_code,
        table: tableName,
        s3Path,
        subjectCode,
        registerNumber,
        imageName,
        rotateAngle,
      };
      const response = await fetch(
        `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/editPartAdata`,
        {
          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 ...");
        if (totalData) {
          console.log("current total length ... ", totalData?.length);
          console.log("current current index ...", currentCardIndex);
          if (currentCardIndex < totalData?.length - 1) {
            setCurrentCardIndex((prev) => prev + 1);
          }
        }
        const newCurrentIndex = currentCardIndex + 1;
      }
    } catch (error) {
      setIsLoading(false);
      //toast.error("Something Went Wrong ...");
      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");
      } else {
        toast.error("Something Went Wrong !...");
      }
    } catch (error) {
      setIsLoading(false);
      toast.error("Something Went Wrong !...");
      throw new Error(error);
    }
  };

  useEffect(() => {
    if (oldData?.image_name && tableName) {
      const fetchPrimaryKeyData = async () => {
        setIsLoading(true)
        try {
          const payload = {
            table: tableName,
            image_name: oldData?.image_name,
          };
          const response = await fetch(
            `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchPrimaryKeyData`,
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify(payload),
            }
          );
          const responseData = await response.json();
          console.log("response json 11 === ", responseData);
          setIsLoading(false)
          if (responseData?.status === "success") {
            const results = responseData?.data;
            console.log("results ==== ", results);
            if (results?.length > 0) {
              console.log("results === ", results);
              setData(results[0]);
            }
          }
        } catch (error) {
          setIsLoading(false)
          throw new Error(error);
        }
      };
      setTimeout(() => {
        fetchPrimaryKeyData();
      }, 200);
    }
  }, [oldData]);

  return (
    <Box className="w-100 rounded shadow mb-5 bg-white">
      <ToastContainer />
      <Box className="p-4 d-flex justify-content-between align-items-center">
        <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/${oldData[s3_image_column]}`}
              width="850px"
              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(
                  imageName,
                  tableNameData,
                  rotateAngle,
                  data,
                  setIsLoading
                )
              }
            >
              Save
            </Button>
          </Box>
        </Box> */}
        <Box className="py-3 d-flex flex-column justify-content-end w-100 gap-3 p-3">
          {type !== "Attendence" ? (
            <>
              <TextInputField
                value={qrcode || ''}
                setValue={setQrcode}
                placeholder={"QR code"}
              />
              <TextInputField
                value={bar_code || ''}
                setValue={set_Barcode}
                placeholder={"BarCode"}
              />
              <TextInputField
                value={subjectCode || ''}
                setValue={setSubjectCode}
                placeholder={"Subject code"}
              />
            </>
          ) : (
            <>
              <TextInputField
                value={qrcode}
                setValue={setQrcode}
                placeholder={"QR code"}
              />
              <TextInputField
                value={subjectCode}
                setValue={setSubjectCode}
                placeholder={"Subject Code"}
              />
              <TextInputField
                value={totalStudents}
                setValue={setTotalStudents}
                placeholder={"Total Students"}
              />
              <TextInputField
                value={totalPresent}
                setValue={setTotalPresent}
                placeholder={"Total Present"}
              />
              <TextInputField
                value={totalAbsent}
                setValue={setTotalAbsent}
                placeholder={"Total Absent"}
              />
            </>
          )}
          {type == "PartC" ? (
            <TextInputField
              value={marks}
              setValue={setMarks}
              placeholder={"Marks"}
            />
          ) : type == "PartA" ? (
            <TextInputField
              value={registerNumber || ''}
              setValue={setRegisterNumber}
              placeholder={"Register no"}
            />
          ) : null}
            <Box display="flex" justifyContent="space-between">
              <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
                <RotateRightIcon />
              </Button>
            </Box>
            {/* <Button
              className="m-0 bg-primary text-white p-3 rounded"
              onClick={() =>
                saveRotatedImage(
                  imageName,
                  tableNameData,
                  rotateAngle,
                  data,
                  setIsLoading
                )
              }
            >
              Save
            </Button> */}

          {type == "PartC" ? (
            <Button
              className="bg-primary text-white p-3"
              onClick={() => updateRecordPartC()}
            >
              Update
            </Button>
          ) : type == "PartA" ? (
            <Button
              className="bg-primary text-white p-3"
              onClick={() => updateRecordPartA()}
            >
              Update
            </Button>
          ) : type == "Attendence" ? (
            <Button
              className="bg-primary text-white p-3"
              onClick={() =>
                updatePlayGroundAttendence(
                  setIsLoading,
                  qrcode,
                  subjectCode,
                  totalStudents,
                  totalPresent,
                  totalAbsent,
                  data,
                  setShowEditContainer
                )
              }
            >
              Update
            </Button>
          ) : null}
          {/* <Button className="bg-primary text-white p-3">Skip</Button> */}

          

          <Box className="d-flex justify-content-between gap-5">
            <Button
              className="bg-primary text-white p-3 w-50"
              onClick={() => {
                if (totalData) {
                  if (currentCardIndex >= 1) {
                    setCurrentCardIndex((prev) => prev - 1);
                  }
                }
              }}
            >
              <ArrowBackIcon />
            </Button>
            <Button
              className="bg-primary text-white p-3 w-50"
              onClick={() => {
                if (totalData) {
                  console.log("current total length ... ", totalData?.length);
                  console.log("current current index ...", currentCardIndex);
                  if (currentCardIndex < totalData?.length - 1) {
                    setCurrentCardIndex((prev) => prev + 1);
                  }
                }
              }}
            >
              <ArrowForwardIcon />
            </Button>
          </Box>
        </Box>
      </Box>
      {isLoading && <LoadingContainer loadingText={"Loading ..."} />}
      {showEditContainer && (
        <PlayGroundEditContainer
          type={type}
          rotateAngle={rotateAngle}
          data={data}
          s3Path={data[s3_image_column]}
          tableName={tableName}
          imageName={data["image_name"]}
          setShowEditContainer={setShowEditContainer}
        />
      )}
    </Box>
  );
};

export default UpdatedPlaygroundUpdater;