This componet is too big, please separate it into 2 components "import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchProducts, deleteProductById, updateProductById } from '../features/products/productSlice'; // Adjust the path as needed
import { Box, Card, CardContent, CardMedia, Grid, Typography, Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, TextField } from '@mui/material';
import { styled } from '@mui/system';
import store from '../store';

const backendURL = 'http://localhost:8000';

const StyledImage = styled('img')({
  maxWidth: '100%',
  maxHeight: '200px',
  margin: '8px',
});


const ProductList = () => {
  const dispatch = useDispatch();
  const { products, loading, error } = useSelector((state) => state.products);
  const updateStatus = useSelector((state) => state.products.updateProductByIdStatus);

  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [productToDelete, setProductToDelete] = useState(null);
  const [productToEdit, setProductToEdit] = useState(null);
  const [editedProduct, setEditedProduct] = useState({
    product_Name: '',
    product_Description: '',
    product_Price: '',
    product_Stock: '',
    product_isSale: '',
    category_Name:'',
    imageGallery_Id:'',
    image1:'',
    image2:'',
    image3:'',
    image4:'',
  });

  // useEffect(() => {
  //   dispatch(fetchProducts());
  // }, [dispatch]);

  useEffect(() => {
    dispatch(fetchProducts());

    // Listen for the update action to complete
    if (updateStatus === 'fulfilled') {
      dispatch(fetchProducts());
    }

    // Cleanup logic (if any)
    return () => {
      // You might want to reset the status or perform any cleanup here
    };
  }, [dispatch, updateStatus]);
  
  const handleDeleteClick = (productId) => {
    setProductToDelete(productId);
    setDeleteDialogOpen(true);
  };

  const handleDeleteConfirm = () => {
    if (productToDelete !== null) {
      dispatch(deleteProductById(productToDelete));
      setDeleteDialogOpen(false);
    }
  };

  const handleDeleteCancel = () => {
    setDeleteDialogOpen(false);
    setProductToDelete(null);
  };

  const handleEditClick = (product) => {
    setProductToEdit(product.product_Id);
    setEditedProduct({
      product_Name: product.product_Name,
      product_Description: product.product_Description,
      product_Price: product.product_Price,
      product_Stock: product.product_Stock,
      product_isSale: product.product_isSale,
      category_Name: product.product_category.category_Name,
      imageGallery_Id: product.imageGallery.id,
      image1: `${backendURL}${product.imageGallery?.image1}`,
      image2: `${backendURL}${product.imageGallery?.image2}`,
      image3: `${backendURL}${product.imageGallery?.image3}`,
      image4: `${backendURL}${product.imageGallery?.image4}`,
    });
    setEditDialogOpen(true);
  };

  const handleEditChange = (event) => {
    const { name, value } = event.target;
    setEditedProduct({ ...editedProduct, [name]: value });
  };

  const handleEditConfirm = () => {
    console.log(editedProduct);
    if (productToEdit !== null) {
      dispatch(updateProductById({ productId: productToEdit, ...editedProduct }));
      setEditDialogOpen(false);
    }
  };

  const handleEditCancel = () => {
    setEditDialogOpen(false);
    setProductToEdit(null);
  };

  if (loading) {
    return <div>Loading…</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <Box sx={{ flexGrow: 1, padding: 2 }}>
      <Grid container spacing={3}>
        {products.map((product) => (
          <Grid item xs={12} sm={6} md={4} lg={3} key={product.product_Id}>
            <Card>
              <CardMedia
                component="img"
                height="200"
                image={`${backendURL}${product.imageGallery?.image1}` || ""}
                alt={product.product_Name}
              />
              <CardContent>
                <Typography gutterBottom variant="h5" component="div">
                  {product.product_Name}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  {product.product_Description}
                </Typography>
                <Typography variant="h6" color="text.primary" sx={{ marginTop: 2 }}>
                  ${product.product_Price}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  Stock: {product.product_Stock}
                </Typography>
                <Typography variant="body2" color={product.product_isSale === 'Yes' ? 'green' : 'red'}>
                  {product.product_isSale === 'Yes' ? 'On Sale' : 'Not on Sale'}
                </Typography>
                <Button
                  variant="outlined"
                  color="primary"
                  sx={{ marginTop: 2 }}
                  onClick={() => handleEditClick(product)}
                >
                  Edit
                </Button>
                <Button
                  variant="outlined"
                  color="secondary"
                  sx={{ marginTop: 2, marginLeft: 1 }}
                  onClick={() => handleDeleteClick(product.product_Id)}
                >
                  Delete
                </Button>
              </CardContent>
            </Card>
          </Grid>
        ))}
      </Grid>
      <Dialog open={deleteDialogOpen} onClose={handleDeleteCancel}>
        <DialogTitle>Confirm Delete</DialogTitle>
        <DialogContent>
          <DialogContentText>Are you sure you want to delete this product?</DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleDeleteCancel} color="primary">
            Cancel
          </Button>
          <Button onClick={handleDeleteConfirm} color="secondary">
            Delete
          </Button>
        </DialogActions>
      </Dialog>

      <Dialog open={editDialogOpen} onClose={handleEditCancel}>
        <DialogTitle>Edit Product</DialogTitle>
        <DialogContent>
          <TextField
            margin="dense"
            name="product_Name"
            label="Product Name"
            type="text"
            fullWidth
            value={editedProduct.product_Name}
            onChange={handleEditChange}
          />
          <TextField
            margin="dense"
            name="product_Description"
            label="Product Description"
            type="text"
            fullWidth
            value={editedProduct.product_Description}
            onChange={handleEditChange}
          />
          <TextField
            margin="dense"
            name="product_Price"
            label="Product Price"
            type="number"
            fullWidth
            value={editedProduct.product_Price}
            onChange={handleEditChange}
          />
          <TextField
            margin="dense"
            name="product_Stock"
            label="Product Stock"
            type="number"
            fullWidth
            value={editedProduct.product_Stock}
            onChange={handleEditChange}
          />
          <TextField
            margin="dense"
            name="product_isSale"
            label="Is Sale?"
            type="text"
            fullWidth
            value={editedProduct.product_isSale}
            onChange={handleEditChange}
          />
          {/* {
          editedProduct.images.map((imageUrl, index) => (
            <StyledImage key={index} src={imageUrl} alt={`Product Image ${index + 1}`} />
          ))} */}
          <StyledImage src={editedProduct.image1} alt="Product Image 1" />
          <StyledImage src={editedProduct.image2} alt="Product Image 2" />
          <StyledImage src={editedProduct.image3} alt="Product Image 3" />
          <StyledImage src={editedProduct.image4} alt="Product Image 4" />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleEditCancel} color="primary">
            Cancel
          </Button>
          <Button onClick={handleEditConfirm} color="secondary">
            Save
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
};

export default ProductList;
"