import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import {
  Box,
  Typography,
  IconButton,
  Dialog,
  DialogContent,
} from "@mui/material";
import Grid from '@mui/material/Grid2';
import defaultImage from "../../assets/images/default.png"

// Utility function to check if an object is empty
const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;

const ImageView = () => {

  const product = useSelector((state) => state.products.product.data)

  const [previewImage, setPreviewImage] = useState("");
  const [isZoomed, setIsZoomed] = useState(false);

  useEffect(() => {

    if (!isEmptyObject(product)) {
      setPreviewImage(product?.images[0]?.url)
    }

  }, [product])

  const handleThumbnailClick = (image) => {
    setPreviewImage(image);
  };

  const handleZoomToggle = () => {
    setIsZoomed(!isZoomed);
  };

  return (
    <Box sx={{ flexGrow: 1 }}>
      <Grid container spacing={2}>
        {/* Image Preview Section */}
        <Grid item size={12}>
          <Box
            sx={{
              overflow: "hidden",
              cursor: "pointer",
            }}
            onClick={handleZoomToggle}
          >
            <Box
              src={previewImage || defaultImage}
              component="img"
              alt="Preview"
              sx={{
                width:{
                  xs:"100%",
                  sm:"100%",
                  md:"70%"
                },
                height: "auto",
                display: "block",
                margin: "auto auto"
              }}
            />
          </Box>
        </Grid>

        {/* Image Control Section */}
        <Grid item size={12}>
          <Box
            sx={{
              display: "flex",
              flexDirection: "row",
              justifyContent: {
                xs:"left",
                sm:"left",
                md:"center"
              },
              flexWrap:"wrap",
              padding: 2,
              gap: 2
            }}
          >
            {product?.images?.map(({ src, url }, index) => (
              <IconButton
                key={index}
                onClick={() => handleThumbnailClick(url)}
                sx={{
                  borderRadius: 2,
                  overflow: "hidden",
                }}
              >
                <img
                  src={url}
                  alt={`img_${index + 1}`}
                  style={{
                    width: "100%",
                    height: "auto",
                    maxWidth: "75px",
                  }}
                />
              </IconButton>
            ))}
          </Box>
        </Grid>

      </Grid>

      {/* Zoom Dialog */}
      <Dialog open={isZoomed} onClose={handleZoomToggle} maxWidth="lg">
        <DialogContent>
          <img
            src={previewImage || defaultImage}
            alt="Zoomed Preview"
            style={{
              width: "100%",
              height: "auto",
            }}
          />
        </DialogContent>
      </Dialog>
    </Box>
  );
};

export default ImageView;
