import {
  Card,
  Typography,
  CircularProgress,
  Popover,
  useTheme,
} from '@mui/material';
import { Box } from '@mui/system';
import React, { useState } from 'react';
import { useStyles } from '../dashboardStyles';
import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';

function TotalNumber({
  value,
  heading,
  color,
  isLoading,
  viewAllClick,
  showAsterisk,
  infoPopover,
  helperText,
}) {
  const classes = useStyles();
  const theme = useTheme();
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

  const textColor =
    color || (value == 0 || value == 0o0 ? `${theme.palette.grey[57]}` : '');

  return (
    <Card
      className={classes.numberCard}
      sx={viewAllClick && { cursor: 'pointer' }}
      onClick={viewAllClick}
    >
      <Box className={classes.numberheader}>
        <Typography className={classes.numberHeading}>{heading}</Typography>
        {infoPopover && (
          <>
            <ErrorOutlineOutlinedIcon
              style={{ color: `${theme.palette.grey[52]}` }}
              aria-describedby={id}
              variant="contained"
              onClick={handleClick}
            />
            <Popover
              id={id}
              open={open}
              anchorEl={anchorEl}
              onClose={handleClose}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'right',
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
            >
              <Typography className={classes.popoverContent}>
                {infoPopover}
              </Typography>
            </Popover>
          </>
        )}
      </Box>
      {!isLoading ? (
        <Typography color={textColor} className={classes.value}>
          {value || 0}
          {showAsterisk && <span className={classes.asterisk}>*</span>}
        </Typography>
      ) : (
        <CircularProgress color="inherit" />
      )}
      {helperText && (
        <Typography className={classes.helperTextAdmin}>
          {helperText}
        </Typography>
      )}
    </Card>
  );
}

export default TotalNumber;
