admin/src/views/RetailDistributors/SingleRetailDistributor.js

import React, { useState, useEffect, useRef, useCallback } from "react";
import axios from "axios";
import {
  Box,
  Typography,
  Grid,
  Paper,
  Avatar,
  IconButton,
  Dialog,
  DialogContent,
  DialogTitle,
} from "@mui/material";
import { useParams, useNavigate } from "react-router-dom";
import { format } from "date-fns";
import { isAutheticated } from "../../auth";
import CancelIcon from "@mui/icons-material/Cancel"; // Add this import

const SingleRetailDistributor = () => {
  const { id } = useParams();
  const [retailerDetails, setRetailerDetails] = useState(null);
  const [openPopup, setOpenPopup] = useState(false);
  const [selectedImage, setSelectedImage] = useState("");
  const token = isAutheticated();
  const navigate = useNavigate();


  const getUserDetails = useCallback(async () => {
    try {
      // Commented out the API call and using dummy data
      const response = await axios.get(`/api/getRD/${id}`, {
        headers: {
          "Access-Control-Allow-Origin": "*",
          Authorization: `Bearer ${token}`,
          "Content-Type": "multipart/form-data",
        },
      });
      setRetailerDetails(response.data);
      // console.log('Retailer Details: ', response.data);
    } catch (error) {
      console.error("Error fetching data: ", error);
    }
  }, [id, token]);

// Fetch retailer details on mount
useEffect(() => {
  getUserDetails();
}, [id, getUserDetails]);

  const handleOpenPopup = (imageUrl) => {
    setSelectedImage(imageUrl);
    setOpenPopup(true);
  };

  const handleClosePopup = () => {
    setOpenPopup(false);
    setSelectedImage("");
  };

  const handleCancel = () => {
    navigate("/retail-distributor");
  };

  if (!retailerDetails) {
    return <Typography>Loading...</Typography>;
  }

  return (
    <Box sx={{ p: 3 }}>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          mb: 3,
        }}
      >
        <Typography variant="h4">Retailer Details</Typography>
        <IconButton sx={{ color: "red" }} onClick={handleCancel}>
          Cancel <CancelIcon />
        </IconButton>
      </Box>

      <Paper sx={{ p: 2, mb: 3 }}>
        <Typography variant="h5" gutterBottom>
          Retailer Details
        </Typography>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Typography>
              <strong>Trade Name:</strong> {retailerDetails.kyc.trade_name}
            </Typography>
            <Typography>
              <strong>Name:</strong> {retailerDetails.name}
            </Typography>
            <Typography>
              <strong>Address:</strong> {retailerDetails.kyc.address}
            </Typography>
            <Typography>
              <strong>Town/City:</strong> {retailerDetails.kyc.city}
            </Typography>
          </Grid>
          <Grid item xs={6}>
            <Typography>
              <strong>District:</strong> {retailerDetails.kyc.district}
            </Typography>
            <Typography>
              <strong>State:</strong> {retailerDetails.kyc.state}
            </Typography>
            <Typography>
              <strong>Pincode:</strong> {retailerDetails.kyc.pincode}
            </Typography>
            <Typography>
              <strong>Mobile Number:</strong> {retailerDetails.mobile_number}
            </Typography>
            <Typography>
              <strong>Mapped Principal Distributor:</strong>{" "}
              {retailerDetails?.principal_distributer?.name || "Not Mapped"}
            </Typography>
          </Grid>
        </Grid>
      </Paper>

      <Paper sx={{ p: 2, mb: 3 }}>
        <Typography variant="h6" gutterBottom>
          Documents
        </Typography>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Typography>
              <strong>PAN Number:</strong> {retailerDetails.kyc.pan_number}
            </Typography>
            <Avatar
              variant="square"
              src={retailerDetails.kyc.pan_img.url}
              sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
              onClick={() => handleOpenPopup(retailerDetails.kyc.pan_img.url)}
            />
            <Typography>
              <strong>Aadhar Number:</strong>{" "}
              {retailerDetails.kyc.aadhar_number}
            </Typography>
            <Avatar
              variant="square"
              src={retailerDetails.kyc.aadhar_img.url}
              sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
              onClick={() =>
                handleOpenPopup(retailerDetails.kyc.aadhar_img.url)
              }
            />
            <Typography>
              <strong>GST Number:</strong> {retailerDetails.kyc.gst_number}
            </Typography>
            <Avatar
              variant="square"
              src={retailerDetails.kyc.gst_img.url}
              sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
              onClick={() => handleOpenPopup(retailerDetails.kyc.gst_img.url)}
            />
          </Grid>
          <Grid item xs={6}>
            <Typography>
              <strong>Pesticide License:</strong>
            </Typography>
            <Avatar
              variant="square"
              src={retailerDetails.kyc.pesticide_license_img.url}
              sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
              onClick={() =>
                handleOpenPopup(retailerDetails.kyc.pesticide_license_img.url)
              }
            />
            <Typography>
              <strong>Fertilizer License (optional):</strong>
            </Typography>
            {retailerDetails.kyc.fertilizer_license_img ? (
              <Avatar
                variant="square"
                src={retailerDetails.kyc.fertilizer_license_img.url}
                sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
                onClick={() =>
                  handleOpenPopup(
                    retailerDetails.kyc.fertilizer_license_img.url
                  )
                }
              />
            ) : (
              <Typography>Img not available</Typography>
            )}
            <Typography>
              <strong>Selfie of Entrance Board:</strong>
            </Typography>
            <Avatar
              variant="square"
              src={retailerDetails.kyc.selfie_entrance_img.url}
              sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
              onClick={() =>
                handleOpenPopup(retailerDetails.kyc.selfie_entrance_img.url)
              }
            />
          </Grid>
        </Grid>
      </Paper>

      <Paper sx={{ p: 2, mb: 3 }}>
        <Typography variant="h6" gutterBottom>
          Sales Coordinators/Territory Manager Details
        </Typography>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Typography>
              <strong>Designation:</strong>{" "}
              {retailerDetails?.userType || "Not Available"}
            </Typography>
            <Typography>
              <strong>Name:</strong>{" "}
              {retailerDetails?.addedBy?.name || "Not Available"}
            </Typography>
            <Typography>
              <strong>ID:</strong>{" "}
              {retailerDetails?.addedBy?.uniqueId || "Not Available"}
            </Typography>
          </Grid>
        </Grid>
      </Paper>
      <Dialog
        open={openPopup}
        onClose={handleClosePopup}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>
          <IconButton
            sx={{ position: "absolute", right: 16, top: 16, color: "red" }}
            onClick={handleClosePopup}
          >
            <CancelIcon />
          </IconButton>
        </DialogTitle>
        <DialogContent
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            p: 0,
            overflow: "auto",
            maxHeight: "80vh",
            maxWidth: "80vw",
          }}
        >
          <img
            src={selectedImage}
            alt="Large Preview"
            style={{
              maxWidth: "100%",
              maxHeight: "100%",
              objectFit: "contain",
            }}
          />
        </DialogContent>
      </Dialog>
    </Box>
  );
};

export default SingleRetailDistributor;