import React, { useEffect, useState } from "react";
import { Box, Popover, Typography } from "@mui/material";
import { styled } from "@mui/material/styles";
import { BASE_URL_CHAT } from "@/utils/staticValues";
import Auth from "@/auth/Auth";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import CircleIcon from "@mui/icons-material/Circle";
import DoNotDisturbOnIcon from "@mui/icons-material/DoNotDisturbOn";
import { StatusBoxRow } from "../../style";

const StatusBox = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  gap: "5px",
  // padding: "0 10px 0 10px",
  pdding:"50x 0",
  cursor: "pointer",
  "& svg":{
    width:"14px",
    height:"14px"
  },
  "&:hover": {
    backgroundColor: theme.palette.action.hover,
  },
}));

const AvailabilityPopOver = (props: any) => {
  const [availabilityValue, setAvailablitityValue] = useState(null);
  const { id, open, anchorEl, handleClose, online } = props;

  // const {userAvailibility} = useSelector((state: any)=>  state.userData)

  const availabilityStatuses = [
    {
      name: "Online",
      value: "online",
      icon: <CheckCircleIcon sx={{ fontSize: "15px", color: "green" }} />,
    },
    {
      name: "Offline",
      value: "offline",
      icon: <DoNotDisturbOnIcon sx={{ fontSize: "15px", color: "grey" }} />,
    },
    {
      name: "Busy",
      value: "busy",
      icon: <CircleIcon sx={{ fontSize: "15px", color: "#d7282f" }} />,
    },
  ];

  useEffect(() => {
    setAvailablitityValue(online);
  }, []);

  const handleStatusClick = async (status: any) => {
    setAvailablitityValue(status);
    const formData = new FormData();
    formData.append("status", status);
    const response = await fetch(`${BASE_URL_CHAT}changeUserOnlineStatus`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${Auth?.token()}`,
      },
      body: formData,
    });
    const userData = JSON.parse(localStorage.getItem("userData")) || {};
    const updatedStatus = { ...userData, online: status };
    localStorage.setItem("userData", JSON.stringify(updatedStatus));
    handleClose();
  };

  return (
    <>
      <Popover
        disableScrollLock
        sx={{ marginTop: "5px" }}
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        PaperProps={{
          style: { width: '125px' },
        }}
      >
        <Box>
          {availabilityStatuses.map((status) => (
            <StatusBox
              key={status.value}
              sx={{
                backgroundColor:
                  availabilityValue === status.value
                    ? "rgba(0, 0, 0, 0.08)"
                    : "inherit",
              }}
            >
              <Box style={{}} onClick={() => handleStatusClick(status?.value)}>
                <StatusBoxRow>
                  <Box>{status.icon}</Box>
                  <Typography>
                    {status.name}
                  </Typography>
                </StatusBoxRow>
              </Box>
            </StatusBox>
          ))}
        </Box>
      </Popover>
    </>
  );
};

export default AvailabilityPopOver;