"use client";

import React, { useState, useEffect, useRef } from "react";
import {
  Card,
  Box,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableFooter,
  TablePagination,
  TableRow,
  Paper,
  IconButton,
  TableHead,
  Button,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormHelperText,
  InputLabel,
  FormControlLabel,
  Checkbox
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import ClearIcon from "@mui/icons-material/Clear";
import { ToastContainer, toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { FoorplanAttchImgValidationSchema,floorPlanImageAttchFormValues,floorplanattchTouchFields } from '@lib/ValidationSchemas';
import { useFormik  } from 'formik';
import BootstrapDialog from "../../BootstrapModel";
import withAuth from "@/withAuth";
import routes from "@/routes";
import {RoleEnum} from '@constant/StaticData';
import {handleFetchWithTokenRefresh} from '@utils/common';
import { useCookies } from 'react-cookie';
import Image from 'next/image';
import { useRouter,usePathname } from 'next/navigation';
import FloorPlanService, {FloorplanOPData, FloorplanIdOPData} from "@/service/FloorPlanService";
import FloorPlanAttachmentService,{FloorPlanAttachmentCreateOPData,PFloorPlanAttachmentsUploadOPData,FloorPlanAttachmentsUploadIPData} from "@/service/FloorPlanAttachmentService";
import { Fancybox } from '@fancyapps/ui'; 
import "@fancyapps/ui/dist/fancybox/fancybox.css";

const FPGallery: React.FC = () => {
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);
  const [FloorPlanData, setFloorPlanData] = useState<FloorplanOPData | undefined>(undefined); 
  const [FloorPlanDataById, setFloorPlanDataById] = useState<FloorplanIdOPData | undefined>(undefined);
  const [open, setOpen] = useState(false);
  const [delOpen, setDelOpen] = useState(false);
  const [title, setTitle] = useState("Add New");
  const [delId, setDelId] = useState(0);
  const [refId, setRefId] = useState(0);
  const [PWGId, setPWGId] = useState(0);
  const [changes, setChanges] = useState("");
  const [btnName, setBtnName] = useState("Create");
  const [cookies, setCookie, removeCookie] = useCookies();
  const fileImageInputRef = useRef<HTMLInputElement | null>(null);
  const router = useRouter();
  const params = usePathname();
  const segments = params.split('/');
  const ParentUID = segments[4]; 
  const [insertCurrentDate, setInsertCurrentDate] = useState(false);
  const [isMainUpdate, setIsMainUpdate] = useState(false);

  const addData = async (values: any) => {
    try {
      const attachmentImg: File[] = [];
      if (values.file_image) {
        attachmentImg.push(values.file_image);
      }
      if (attachmentImg.length > 0) {
      const fpAttachmentImgUpload = {
        attachmentImg,
        input: {
          ref_id: `${ParentUID}`,
          file_field: "FILE_ATTACHMENT",
        },
      };
 
  
      // Upload floor plan attachment image
      const FloorPlansAttachmentUploadImg = await FloorPlanAttachmentService.UploadFloorPlanAttachmentImg(fpAttachmentImgUpload);
      
      if(FloorPlansAttachmentUploadImg?.FloorPlanAttachmentsUpload?.[0]?.id){
        const FlpmainID=FloorPlansAttachmentUploadImg?.FloorPlanAttachmentsUpload?.[0]?.id
        
        if(insertCurrentDate === true ){
          //const UpdateFloorPlansAttachment = await FloorPlanAttachmentService.updateFloorPlanAttachment(values, Number(FlpmainID));
          const UpdateFloorPlansAttachment = await FloorPlanAttachmentService.createFloorPlanAttachment( Number(FlpmainID),Number(ParentUID));
          setIsMainUpdate(prevState => !prevState);
        }
      }
    }
      // Fetch updated floor plan data
      const PrevFloorPlanData = await FloorPlanService.getFloorplanById(parseInt(ParentUID));
  
      setFloorPlanData((prevData) => {
        if (!prevData || !prevData.FloorPlanFind) {
          return prevData;
        }
  
        const newRow = PrevFloorPlanData?.FloorPlanFindOneById;
  
        if (!newRow) {
          return prevData;
        }
  
        const existingRows = prevData?.FloorPlanFind?.rows || [];
        const total = prevData?.FloorPlanFind?.total || 0;
        const pages = Math.ceil(total / rowsPerPage);
  
        return {
          ...prevData,
          FloorPlanFind: {
            rows: [newRow],
            total: total + 1,
            pages: pages,
          },
        };
      });

      toast.success("Inserted data successfully !!", {
        position: "bottom-left",
        autoClose: 2000,
    });
    } catch (error:any) {
      console.error("Error adding data:", error);
      toast.error(error, {
        position: "bottom-left",
        autoClose: 2000,
    });
    }
  };
  
  const handleSubmit = async(values:any) =>{
    const errors = await formik.validateForm();
      formik.setTouched(floorplanattchTouchFields);  
      
      if (Object.keys(errors).length === 0) {
        try {
          
          let successMsg;

       if (changes === 'Add') {

            addData(values);

          } else if (changes === 'Edit') {

              successMsg = "Updated data successfully !!";
              if(typeof formik.values.file_image != null && insertCurrentDate===true && formik.values.FimgID != null){
               const ID =  formik.values.FimgID
              
               const UpdateFloorPlansAttachment = await FloorPlanAttachmentService.createFloorPlanAttachment( Number(ID),Number(ParentUID));
               setIsMainUpdate(prevState => !prevState);
              }else{
                if(insertCurrentDate===true){
                  const UpdateFloorPlansAttach = await FloorPlanAttachmentService.updateFloorPlanAttachment(Number(formik.values.FimgID),Number(ParentUID));
                  setIsMainUpdate(prevState => !prevState);
                }else{
                  const FloorPlanAttachmentData = await FloorPlanAttachmentService.deleteFloorPlanAttachment(PWGId);
                  await addData(values)
                }
              }
            
              const PrevFloorPlanData = await FloorPlanService.getFloorplanById(parseInt(ParentUID));
               setFloorPlanData((prevData) => {
                  if (!prevData || !prevData.FloorPlanFind) {
                    return prevData;
                  }
                   const newRow = PrevFloorPlanData?.FloorPlanFindOneById;
                  if (!newRow) {
                    return prevData; 
                  } 
                  const existingRows = prevData?.FloorPlanFind?.rows || [];
                  const total = prevData?.FloorPlanFind?.total  || 0;   
                  const pages = Math.ceil(total / rowsPerPage); 
                            
                  return {
                    ...prevData,
                    FloorPlanFind: {
                      rows: [newRow],
                      total:total + 1,
                      pages: pages
                    },
                  }; 
              }); 
          }
          
          
          
          setOpen(false);
          setPWGId(0);
          setInsertCurrentDate(false)
          toast.success(successMsg, {
              position: "bottom-left",
              autoClose: 2000,
          });
        }catch (error:any) {
          handleFetchWithTokenRefresh(error, cookies, setCookie, handleSubmit, "Error during insert/update entry!!", values);
        }
      } 
  }


  
  const formik = useFormik<floorPlanImageAttchFormValues>({
    initialValues: {
      file_image: "",
      cover:"",
      FimgID:0
    },
    validationSchema: FoorplanAttchImgValidationSchema,
    onSubmit: async(values) => {
      handleSubmit(values);
    },
  });

  const fileHandleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    formik.handleChange;
    const file = event.currentTarget.files?.[0] || null;
    if (file) {
      formik.setFieldValue('file_image', file); 
    } else {
      formik.setFieldValue('file_image', null); 
    }
  };

  const fetchData = async () => {
    try {		
      const start = (page)*rowsPerPage;
      const FloorPlanData = await FloorPlanService.getFloorplanAttachment(ParentUID);
       if(FloorPlanData != undefined && FloorPlanData != null && FloorPlanData?.FloorPlanFind){
        setFloorPlanData(FloorPlanData);
      } 
    } catch (err:any) {
      console.error('Error during fetch data:', err);
      handleFetchWithTokenRefresh(err, cookies, setCookie, fetchData, "Error during fetch data");
    }
  };

  useEffect(() => {
    fetchData();
  },[isMainUpdate]);

  const fetchDataByID = async () => {
    try {		
      const FloorPlanDataById = await FloorPlanService.getFloorplanById(parseInt(ParentUID));
      if(FloorPlanDataById != undefined && FloorPlanDataById != null && FloorPlanDataById?.FloorPlanFindOneById){
        setFloorPlanDataById(FloorPlanDataById);
      }
    } catch (err:any) {
      console.error('Error during fetch data:', err);
      handleFetchWithTokenRefresh(err, cookies, setCookie, fetchDataByID, "Error during fetch data");
    }
  };

  useEffect(() => {
   if(PWGId!=0){
    fetchDataByID();
   }
     
  },[PWGId]);

  
  const setFormikValues = () => {
    if (FloorPlanDataById?.FloorPlanFindOneById) {
      const floorPlanData = FloorPlanDataById.FloorPlanFindOneById;
      const floorPlanDate = FloorPlanDataById?.FloorPlanFindOneById?.fr_floor_plan_attachments?.map((item) => item?.cover) || "";

      const defaultFileImages = floorPlanData.fr_floor_plan_attachments?.map((item) => ({
        id: item?.id || null, 
        thumb: item?.file_attachment_url?.thumb ,
      })) || [];
      
      const fileImageString = defaultFileImages.find((image) => image.id === PWGId)
     
      formik.setValues({
        file_image: fileImageString?.thumb, 
        id: floorPlanData.id || 0, 
        cover:floorPlanDate!=undefined && floorPlanDate?.[0]?.toString() || "",
        FimgID:fileImageString && fileImageString?.id 
      });
    }
  };

  
  useEffect(() => {
    // Initialize Fancybox
    Fancybox.bind("[data-fancybox='gallery']", {
      Carousel: {
        infinite: false,
      },
    });

    // Cleanup on component unmount
    return () => {
      Fancybox.destroy();
    };
  }, []);
  
  useEffect(() => {
    setFormikValues();
  }, [FloorPlanDataById,PWGId]);


  const emptyRows =
    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - (FloorPlanData?.FloorPlanFind?.total || 0)) : 0;


  const handleClickOpen = (Title:string) => {
    setTitle(Title);
    setOpen(true);
    formik.resetForm();  
    setChanges("Add");  
    setBtnName("Create");
  };


  const handleEditOpen = (Title:string, Id:number,cover:string) => {
    setTitle(Title);
    setPWGId(Id);
    setOpen(true); 
    /* if(formik.values.housesec_id === ""){
      setFormikValues();
    } */
   
   if(cover!=null){
    setInsertCurrentDate(true)
   }
    setChanges("Edit"); 
    setBtnName("Update");
  };
  const handleClose = () => {
    setOpen(false);
    setPWGId(0);
    setInsertCurrentDate(false)
    formik.resetForm();
  };

  const handleDelClickOpen = (Id:number, fp_id:number) => {
    setDelId(Id); 
    setRefId(fp_id); 
    setDelOpen(true);
  };
  const handleDelClose = () => {
    setDelOpen(false);
    setPWGId(0);
  };

 
  const handleDelSubmit = async() => {
    try {		
      
      const FloorPlanAttachmentData = await FloorPlanAttachmentService.deleteFloorPlanAttachmentByID(delId,refId);
      if(FloorPlanAttachmentData && FloorPlanAttachmentData?.FloorPlanAttachmentsDelete?.affected == 1){
        const PrevFloorPlanData = await FloorPlanService.getFloorplanById(refId);
        setFloorPlanData((prevData) => {
            if (!prevData || !prevData.FloorPlanFind) {
              return prevData;
            }
             const newRow = PrevFloorPlanData?.FloorPlanFindOneById;
             
            if (!newRow) {
              return prevData; 
            } 
            const existingRows = prevData?.FloorPlanFind?.rows || [];
            const total = prevData?.FloorPlanFind?.total  || 0;   
            const pages = Math.ceil(total / rowsPerPage); 
                      
            return {
              ...prevData,
              FloorPlanFind: {
                rows: [newRow],
                total: total + 1,
                pages: pages
              },
            }; 
        }); 
        toast.success('Entry Deleted Successfully !!', {
          position: "bottom-left",
          autoClose: 2000,
        });
        setPage(0);
        setDelOpen(false);
      }
    } catch (err:any) {
      console.error('Error during delete data:', err);
      handleFetchWithTokenRefresh(err, cookies, setCookie, handleDelSubmit, "Error during delete data");
    }
  };

  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInsertCurrentDate(event.target.checked);
    if (event.target.checked) {
      formik.setFieldValue('cover', new Date().toISOString()); 
    }else{
      formik.setFieldValue('cover', "");
    }
  };
 
  console.log(FloorPlanData);
  

  return (
    <>
      <Card
        sx={{
          boxShadow: "none",
          borderRadius: "7px",
          mb: "25px",
          padding: { xs: "18px", sm: "20px", lg: "25px" },
        }}
        className="rmui-card"
      >
        <Box
          sx={{
            display: { xs: "block", sm: "flex" },
            alignItems: "center",
            justifyContent: "space-between",
            mb: "25px",
            float:"right"
          }}
        >

            <Button
            onClick={() => router.push(`/admin/floor-plan`,{ scroll: false })}
            variant="outlined"
            sx={{
              textTransform: "capitalize",
              borderRadius: "7px",
              fontWeight: "500",
              fontSize: "13px",
              padding: "6px 13px",
            }}
            color="primary"
          >
         Back
          </Button>
          <Button
            onClick={() => handleClickOpen("Add New Image")}
            variant="outlined"
            sx={{
              textTransform: "capitalize",
              borderRadius: "7px",
              fontWeight: "500",
              fontSize: "13px",
              padding: "6px 13px",
              marginLeft:"5px"
            }}
            color="primary"
            title="Add"
          >
            <AddIcon sx={{ position: "relative", top: "-1px" }} /> Add New
          </Button>
        </Box>

        {/* Table */}
        <Box
          sx={{
            marginLeft: "-25px",
            marginRight: "-25px",
          }}
        >
          <TableContainer
            component={Paper}
            sx={{
              boxShadow: "none",
              borderRadius: "0",
            }}
            className="rmui-table"
          >
            <Table sx={{ minWidth: 1000 }} aria-label="Offer Strength Table">
              <TableHead className="bg-primary-50">
                <TableRow>
                  <TableCell
                    sx={{
                      fontWeight: "500",
                      padding: "10px 24px",
                      fontSize: "14px",
                      width:"30%"
                    }}
                    className="text-black border-bottom"
                  >
                    Image
                 
                  </TableCell>
                  <TableCell
                    sx={{
                      fontWeight: "500",
                      padding: "10px 24px",
                      fontSize: "14px",
                      width:"30%"
                    }}
                    className="text-black border-bottom"
                  >
                   Plan Number
                 
                  </TableCell>

                  <TableCell
                    sx={{
                      fontWeight: "500",
                      padding: "10px 20px",
                      fontSize: "14px",
                      width:"30%"
                    }}
                    className="text-black border-bottom"
                  >
                     Category Cover Photo
                  </TableCell>

                 <TableCell
                    sx={{
                      fontWeight: "500",
                      padding: "10px 20px",
                      fontSize: "14px",
                      width:"10%",
                      textAlign:"left"
                    }}
                    className="text-black border-bottom"
                  >
                    Action
                  </TableCell>
                </TableRow>
              </TableHead>

              <TableBody>
              {FloorPlanData?.FloorPlanFind?.rows && FloorPlanData.FloorPlanFind.rows.length > 0 ? (
                FloorPlanData.FloorPlanFind.rows.map((row, rowIndex) => (
                    row.fr_floor_plan_attachments && row.fr_floor_plan_attachments.length > 0 ? (
                    row.fr_floor_plan_attachments.map((attachment, attachmentIndex) => (
                        <TableRow key={`${rowIndex}-${attachmentIndex}`}>
                       

                        <TableCell
                            sx={{
                            padding: "10px 24px",
                            fontSize: "14px",
                            }}
                            className="border-bottom"
                            >
                           {/*  <a
                            key={rowIndex}
                            href={attachment.file_attachment_url?.direct || ""}
                            data-fancybox="gallery"
                            data-caption={"image" +"-"+(attachmentIndex+1)}
                            > */}
                             {
                             attachment.file_attachment_url?.direct!= null ?
                             <Image
                             src={attachment.file_attachment_url?.direct || ""}
                             alt="floorplan-gallery"
                             width={60}
                             height={60}
                             style={{
                                 borderRadius: "7px",
                             }}
                             />
                             :
                            <Image
                            src="https:/api-landandroots-com.thatsend.dev/rest/cdn/assets/upload/floor-plan-attachments/95/thumbnail.20241206T055058223Z.q47h8xu1b9m.TUE9PS5UbUZPLmRXNWtaV1pwYm1Waw==+download(1).jpeg"
                            alt="gallery"
                            width={60}
                            height={60}
                            style={{
                                borderRadius: "7px",
                            }}/>
                            }
                           {/*  </a> */}
                        </TableCell>

                        <TableCell
                            sx={{
                            padding: "10px 24px",
                            fontSize: "14px",
                            width: "75px",
                            }}
                            className="border-bottom"
                        >
                          {attachment?.fr_floor_plan?.number }
                        </TableCell>

                        <TableCell
                            sx={{
                            padding: "10px 24px",
                            fontSize: "14px",
                            width: "75px",
                            }}
                            className="border-bottom"
                        >
                          {attachment?.cover ? "Yes" : ""}
                        </TableCell>

                        <TableCell
                            sx={{
                            padding: "10px 24px",
                            }}
                            className="border-bottom"
                        >
                            <Box
                            sx={{
                                display: "flex",
                                alignItems: "center",
                                float: "left",
                            }}
                            >
                            <IconButton
                                aria-label="edit"
                                color="secondary"
                                sx={{ padding: "5px" }}
                                title="Edit"
                                onClick={() => handleEditOpen("Edit Image", attachment?.id,attachment?.cover)}
                            >
                                <i
                                className="material-symbols-outlined"
                                style={{ fontSize: "16px" }}
                                >
                                edit
                                </i>
                            </IconButton>

                            <IconButton
                                aria-label="delete"
                                color="error"
                                sx={{ padding: "5px" }}
                                title="Delete"
                                onClick={() => handleDelClickOpen(attachment?.id, row.id)}
                            >
                                <i
                                className="material-symbols-outlined"
                                style={{ fontSize: "16px" }}
                                >
                                delete
                                </i>
                            </IconButton>
                            </Box>
                        </TableCell>
                        </TableRow>
                    ))
                    ) : (
                    <TableRow key={`no-attachments-${rowIndex}`}>
                        <TableCell colSpan={8} align="center">
                        No attachments available for this row.
                        </TableCell>
                    </TableRow>
                    )
                ))
                ) : (
                <TableRow>
                    <TableCell colSpan={8} align="center">
                    No data available.
                    </TableCell>
                </TableRow>
                )}

                {emptyRows > 0 && (
                  <TableRow style={{ height: 53 * emptyRows }}>
                    <TableCell colSpan={8} />
                  </TableRow>
                )}
              </TableBody>

              <TableFooter>
                <TableRow>
                 {/*  <TablePagination
                    rowsPerPageOptions={[
                      5,
                      10,
                      25,
                      { label: "All", value: -1 },
                    ]}
                    colSpan={8}
                    count={PastWorkGalleryData?.PastWorkGalleryFind?.total || 0}
                    rowsPerPage={rowsPerPage}
                    page={page}
                    slotProps={{
                      select: {
                        inputProps: {
                          "aria-label": "rows per page",
                        },
                        native: true,
                      },
                    }}
                    onPageChange={handleChangePage}
                    onRowsPerPageChange={handleChangeRowsPerPage}
                    ActionsComponent={TablePaginationActions}
                    sx={{
                      border: "none",
                    }}
                  /> */}
                </TableRow>
              </TableFooter>
            </Table>
          </TableContainer>
        </Box>
      </Card>

      <BootstrapDialog
        onClose={handleClose}
        aria-labelledby="customized-dialog-title"
        open={open}
        className="rmu-modal"
        PaperProps={{
            sx: { width: { xs: '100%', sm: '100%', md: '100%' }, maxWidth: '500px' }
          }}
      >
        <Box>
          <Box
            sx={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              background: "#f6f7f9",
              padding: { xs: "15px 20px", md: "25px" },
            }}
            className="rmu-modal-header"
          >
            <Typography
              id="modal-modal-title"
              variant="h6"
              sx={{
                fontWeight: "600",
                fontSize: { xs: "16px", md: "18px" },
              }}
              className="text-black"
            >
              {title}
            </Typography>

            <IconButton aria-label="remove" size="small" onClick={handleClose}>
              <ClearIcon />
            </IconButton>
          </Box>

          <Box className="rmu-modal-content">
            <Box component="form" onSubmit={formik.handleSubmit}>
              <Box
                sx={{
                  padding: "25px",
                  borderRadius: "8px",
                }}
                className="bg-white"
              >
             
                 <Box flex={1} mr={1}>
                    <Typography
                          component="h5"
                          sx={{
                            fontWeight: "500",
                            fontSize: "14px",
                            mb: "12px",
                          }}
                          className="text-black"
                        >
                          Image
                        </Typography>

                        <input
                            name="file_image"
                            type="file"
                            onChange={fileHandleChange}
                            onBlur={formik.handleBlur}
                            ref={fileImageInputRef}
                            style={{
                              display: 'block',
                              width: '100%',
                              padding: '12px',
                              margin: '10px 0',
                              border: '1px solid #D5D9E2',
                              borderRadius: '7px',
                              backgroundColor: 'white',
                            }}
                          />
                          {formik.touched.file_image && (typeof formik.errors.file_image== 'string')  && (
                            <FormHelperText sx={{ color: "red" }}>{formik.errors.file_image}</FormHelperText>
                          )}

                        {(formik.values.file_image  && typeof formik.values.file_image === 'string') && (
                        <Image
                            src={formik.values.file_image || "https:/api-landandroots-com.thatsend.dev/rest/cdn/assets/upload/floor-plan-attachments/95/thumbnail.20241206T055058223Z.q47h8xu1b9m.TUE9PS5UbUZPLmRXNWtaV1pwYm1Waw==+download(1).jpeg"}
                            alt="gallery"
                            width={60}
                            height={60}
                            style={{
                            borderRadius: "7px",
                            }}
                        />
                        )}

                  </Box>
                  <Box mt={5}>  
                  <FormControlLabel  
                    control={  
                      <Checkbox  
                        checked={insertCurrentDate}  
                        onChange={handleCheckboxChange}  
                        name="cover"  
                        id="cover"  
                      />  
                    }  
                    label={<span style={{ color: 'black', fontWeight: '600px' }}>Category Cover Photo</span>}  
                  />  
                </Box>
                
                <Box mt={1} display="flex" justifyContent="flex-end" gap="10px">
                    <Box
                      sx={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "end",
                        gap: "10px",
                      }}
                    >
                      <Button
                        onClick={handleClose}
                        variant="outlined"
                        color="error"
                        sx={{
                          textTransform: "capitalize",
                          borderRadius: "8px",
                          fontWeight: "500",
                          fontSize: "13px",
                          padding: "11px 30px",
                        }}
                      >
                        Cancel
                      </Button>

                      <Button
                        type="submit"
                        variant="contained"
                        sx={{
                          textTransform: "capitalize",
                          borderRadius: "8px",
                          fontWeight: "500",
                          fontSize: "13px",
                          padding: "11px 30px",
                          color: "#fff !important",
                        }}
                      >
                        <AddIcon
                          sx={{
                            position: "relative",
                            top: "-2px",
                          }}
                          className="mr-5px"
                        />{" "}
                        {btnName}
                      </Button>
                    </Box>
                </Box>
              </Box>
            </Box>
          </Box>
        </Box>
      </BootstrapDialog>

      <BootstrapDialog
        onClose={handleDelClose}
        aria-labelledby="customized-dialog-title"
        open={delOpen}
        className="rmu-modal"
      >
        <Box>
          <Box
            sx={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              background: "#f6f7f9",
              padding: { xs: "15px 20px", md: "5px" },
            }}
            className="rmu-modal-header"
          >
            <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
              Delete Confirmation
            </DialogTitle>
            <IconButton aria-label="remove" size="small" onClick={handleDelClose}>
              <ClearIcon />
            </IconButton>
          </Box>

           <DialogContent dividers>
              <Typography gutterBottom>
                Are you sure want to delete this entry ?
              </Typography>
              
            </DialogContent>
            
            <DialogActions>
                <Button variant="outlined"
                          color="error" 
                          onClick={handleDelSubmit}>Delete</Button>
                <Button variant="outlined"
                          onClick={handleDelClose}>Cancel</Button>
            </DialogActions> 
            
         
        </Box>
      </BootstrapDialog> 
      <ToastContainer/>

    </>
  );
};

export default withAuth(FPGallery, routes.gallery.auth, RoleEnum.ADMIN);