import React, { useState, useEffect } from "react";
import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import { Button, Box } from "@mui/material";
import TextField from "@mui/material/TextField";
import { NavLink, Link } from "react-router-dom";
import TextInputField from "./TextInputField";
import { Height } from "@mui/icons-material";
import HighlightOffIcon from "@mui/icons-material/HighlightOff";
import LoadingContainer from "./LoadingContainer";
import { toast } from "react-toastify";
import { updatePlayGroundAttendence } from "./Utilities/AttendencePlaygroundUtilities";
import { updateAttendenceBlank } from "./Utilities/AttendencePlaygroundUtilities";


const PlayGroundEditContainer = ({
  data,
  s3Path,
  imageName,
  tableName,
  setShowEditContainer,
  rotateAngle,
  type,
}) => {
  // const type = "PartC";
  // const type = type;
  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 [isLoading, setIsLoading] = useState(false);
  const [qrcode, setQrcode] = useState(null);
  const [subjectCode, setSubjectCode] = useState(null);
  const [open, setOpen] = useState(true); // Set open state to true by default
  const handleClose = () => {
    setOpen(false);
  };

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

  const updateRecordPartC = async () => {
    if (!marks) {
      return;
    }
    setIsLoading(true);
    try {
      const payload = {
        qrcode,
        barcode,
        table: tableName,
        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 ...");
        setShowEditContainer(false);
      }
    } catch (error) {
      setIsLoading(false);
      toast.error("Something Went Wrong ...");
      throw new Error(error);
    }
  };

  const updateRecordPartA = async () => {
    console.log(registerNumber);
    console.log(subjectCode);
    console.log(barcode, qrcode);
    console.log(!registerNumber && !subjectCode && (!barcode || !qrcode));
    if (!registerNumber && !subjectCode && (!barcode || !qrcode)) {
      return;
    }
    setIsLoading(true);
    try {
      const payload = {
        qrcode,
        barcode,
        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 ...");
        setShowEditContainer(false);
      }
    } catch (error) {
      setIsLoading(false);
      toast.error("Something Went Wrong ...");
      throw new Error(error);
    }
  };

  const imageStyle = {
    transform: `rotate(${rotateAngle})deg !important`,
  };

  console.log("Image style ====== ", imageStyle);

  return (
    <Dialog
      open={open}
      sx={{ zIndex: "fab" }}
      onClose={handleClose}
      maxWidth="xl"
      style={{ zIndex: 100 }}
      fullWidth
    >
      <DialogContent>
        <Box className="d-flex justify-content-between align-items-start gap-4">
          <Box className="d-flex flex-column" style={imageStyle}>
            <img
              src={`https://docs.exampaper.vidh.ai/${s3Path}`}
              height={"100%"}
              width={"100%"}
            />
          </Box>
          <Box className="py-3 d-flex flex-column justify-content-end w-100 gap-3">
            {type !== "Attendence" ? (
              <>
                <TextInputField
                  value={qrcode}
                  setValue={setQrcode}
                  placeholder={"QR code"}
                />
                <TextInputField
                  value={barcode}
                  setValue={setBarcode}
                  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}
            {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"
              onClick={() => setShowEditContainer(false)}
            >
              Close
            </Button>
          </Box>
        </Box>
      </DialogContent>
      {isLoading && <LoadingContainer />}
    </Dialog>
  );
};

export default PlayGroundEditContainer;