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 {toast} from "react-toastify"

const PlayGroundEditContainer = ({
  data,
  s3Path,
  imageName,
  tableName,
  setShowEditContainer,
  rotateAngle,
}) => {
  const type = "PartC";
  const dialogText = "This is dialog text";
  const [marks, setMarks] = 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)
    }
  }, [data]);

  const updateRecord = 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);
    }
  };

  return (
    <Dialog open={open} onClose={handleClose} maxWidth="lg" 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"}
            />
            <TextInputField
              value={marks}
              setValue={setMarks}
              placeholder={"Marks"}
            />
            <Button
              className="bg-primary text-white p-3"
              onClick={() => updateRecord()}
            >
              Update
            </Button>
            <Button
              className="bg-primary text-white p-3"
              onClick={() => setShowEditContainer(false)}
            >
              Close
            </Button>
          </Box>
        </Box>
      </DialogContent>
    </Dialog>
  );
};

export default PlayGroundEditContainer;