import { Box, Button, Paper, Typography } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
import { useRef } from "react";

const UploadSystem = ({ selectedImage, handleUploadChange, imageSize, fileType, showAddIcon }) => {
    const fileInputRef = useRef(null);

    const handleClick = () => {
        fileInputRef.current.click();
    };

    return (
        <Box sx={{ width: "100%", my: 1 }}>
            {showAddIcon ? (
                <Box
                    sx={{
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "center",
                        justifyContent: "center",
                        border: "1px solid #b3b3b3",
                        borderRadius: "10px",
                        cursor: "pointer",
                        padding: "5px",
                        height: imageSize[1],
                    }}
                    onClick={handleClick}
                >
                    <AddIcon sx={{ fontSize: "2rem", color: "#a19d9d" }} />
                    <Typography
                        variant="subtitle2"
                        sx={{
                            fontWeight: 600,
                            fontSize: "0.8rem",
                            color: "#a19d9d",
                            mt: 1,
                        }}
                        textAlign="center"
                    >
                        فرمت قابل قبول : png, jpg
                        <br />
                        حداکثر 3Mb
                    </Typography>
                </Box>
            ) : (
                <>
                    {fileType && fileType.startsWith("image/") && (
                        <Box
                            width="100%"
                            height={imageSize[1]}
                            sx={{
                                display: "flex",
                                flexDirection: "column",
                                alignItems: "center",
                                justifyContent: "center",
                                cursor: "pointer",
                                objectFit: "contain",
                                border: "1px solid #b3b3b3",
                                borderRadius: "10px",
                                padding: "5px",
                                overflow: "hidden",
                            }}
                            onClick={handleClick}
                        >
                            <Paper
                                elevation={0}
                                sx={{
                                    width: "100%",
                                    height: "100%",
                                    display: "flex",
                                    alignItems: "center",
                                    justifyContent: "center",
                                    backgroundSize: "contain",
                                    backgroundRepeat: "no-repeat",
                                    backgroundPosition: "center",
                                    backgroundImage: `url(${selectedImage})`,
                                }}
                            />
                        </Box>
                    )}
                </>
            )}
            <input
                type="file"
                accept="image/*"
                style={{ display: "none" }}
                onChange={handleUploadChange}
                ref={fileInputRef}
            />
        </Box>
    );
};
export default UploadSystem;