import { Avatar, Box, TextField } from "@mui/material";
import { useState } from "react";
import DeleteIcon from "@mui/icons-material/Delete";
import AddIcon from "@mui/icons-material/Add";

const AvatarUpload = ({ user, setFieldValue, valueAvatar, changeFlag }) => {
  const [selectedImage, setSelectedImage] = useState(user.expert_avatar);
  const [isHovered, setIsHovered] = useState(false);

  const handleImageChange = (event) => {
    const newImage = event.target?.files?.[0];
    if (newImage) {
      setSelectedImage(URL.createObjectURL(newImage));
      setFieldValue(valueAvatar, newImage);
      setFieldValue(changeFlag, true);
    } else {
      setSelectedImage("");
      setFieldValue(valueAvatar, null);
    }
  };

  const handleDeleteImage = () => {
    setSelectedImage("");
    setFieldValue(valueAvatar, null);
    setFieldValue(changeFlag, true);
  };

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  return (
    <Box
      sx={{
        display: "inline-block",
        position: "relative",
      }}
    >
      <Box
        component="label"
        htmlFor="avatar-upload"
        sx={{
          display: "inline-block",
          width: "fit-content",
          height: "fit-content",
          cursor: "pointer",
        }}
      >
        <Box
          component="div"
          className={`avatar-container ${isHovered ? "hovered" : ""}`}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          sx={{
            position: "relative",
            width: 150,
            height: 150,
            borderRadius: "50%",
            overflow: "hidden",
            transition: "transform 0.3s ease-in-out",
          }}
        >
          <Avatar
            alt="User Avatar"
            src={selectedImage}
            sx={{
              width: 150,
              height: 150,
              cursor: "pointer",
              position: "relative",
            }}
          />
          {isHovered && (
            <Box
              component="div"
              className="avatar-overlay"
              sx={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                backgroundColor: "rgba(0, 0, 0, 0.6)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                transition: "transform 0.3s ease-in-out",
                transform: `scale(${isHovered ? 1 : 0})`,
              }}
            >
              {selectedImage ? (
                <DeleteIcon
                  sx={{
                    color: "#fff",
                    width: 35,
                    height: 35,
                  }}
                  onClick={handleDeleteImage}
                />
              ) : (
                <AddIcon
                  sx={{
                    color: "#fff",
                    width: 35,
                    height: 35,
                  }}
                />
              )}
            </Box>
          )}
        </Box>
      </Box>
      <TextField
        id="avatar-upload"
        type="file"
        accept="image/*"
        sx={{ display: "none" }}
        onChange={handleImageChange}
      />
    </Box>
  );
};

export default AvatarUpload;