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"

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 [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)
    }
    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`
  }

  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">
            <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">
            <TextInputField
              value={qrcode}
              setValue={setQrcode}
              placeholder={"QR code"}
            />
            <TextInputField
              value={barcode}
              setValue={setBarcode}
              placeholder={"BarCode"}
            />
            <TextInputField
              value={subjectCode}
              setValue={setSubjectCode}
              placeholder={"Subject code"}
            />
            {
              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>
              ):null
            }
            <Button
              className="bg-primary text-white p-3"
              onClick={() => setShowEditContainer(false)}
            >
              Close
            </Button>
          </Box>
        </Box>
      </DialogContent>
      {isLoading && <LoadingContainer/>}
    </Dialog>
  );
};

export default PlayGroundEditContainer;