import Tooltip, { tooltipClasses } from "@mui/material/Tooltip"; // Replace with HtmlTooltip if customized
import Button from "@mui/material/Button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faInfoCircle, faClose } from "@fortawesome/free-solid-svg-icons";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import styled from "@emotion/styled";

const HtmlTooltip = styled(({ customClassName, className, ...props }) => (
  <Tooltip {...props} classes={{ popper: `${className} ${customClassName}` }} />
))(({ theme }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: "#f5f5f9",
    color: "rgba(0, 0, 0, 0.87)",
    maxWidth: 450,
    fontSize: theme.typography.pxToRem(12),
    border: "1px solid #dadde9",
  },
}));

const InfoTooltipButton = ({ openInfo, setOpenInfo, t, row, currentId }) => {
  return (
    <HtmlTooltip
      disableFocusListener
      disableHoverListener
      disableTouchListener
      open={openInfo}
      onClose={(e) => {
        e.stopPropagation();
        setOpenInfo(null);
      }}
      title={
        <>
          <div
            className="flex-container widget-header paddingLeft5 paddingRight5 fontBold fontSize14"
            onClick={(e) => e.stopPropagation()}
          >
            <div>{t("user-details")}</div>
            <Button
              id="close-button"
              sx={{
                color: "black",
                padding: "0",
                minWidth: "auto",
              }}
              aria-label="close"
              onClick={(e) => {
                e.stopPropagation();
                setOpenInfo(null);
              }}
            >
              <FontAwesomeIcon icon={faClose} className="cursor-pointer height20" tabIndex={0} />
            </Button>
          </div>

          <div className="widget-content" onClick={(e) => e.stopPropagation()}>
            <TableContainer component={Paper}>
              <Table size="small" sx={{ minWidth: 400 }}>
                <TableBody>
                  <TableRow tabIndex={0} sx={{ "& td": { border: 0 } }}>
                    <TableCell scope="row">{t("username")}</TableCell>
                    <TableCell
                      align="right"
                      sx={{
                        wordWrap: "break-word",
                        maxWidth: 150,
                      }}
                    >
                      {row.original["username"]}
                    </TableCell>
                  </TableRow>
                  <TableRow tabIndex={0} sx={{ "& td": { border: 0 } }}>
                    <TableCell scope="row">{t("email")}</TableCell>
                    <TableCell align="right">{row.original["email"]}</TableCell>
                  </TableRow>
                  <TableRow tabIndex={0} sx={{ "& td": { border: 0 } }}>
                    <TableCell scope="row">{t("secondary-email")}</TableCell>
                    <TableCell align="right">{row.original["secondary_email"]}</TableCell>
                  </TableRow>
                  <TableRow tabIndex={0} sx={{ "& td": { border: 0 } }}>
                    <TableCell scope="row">{t("statusinfo")}</TableCell>
                    <TableCell align="right">{row.original["inactive"] ? t("inactive") : t("active")}</TableCell>
                  </TableRow>
                  <TableRow tabIndex={0} sx={{ "& td": { border: 0 } }}>
                    <TableCell scope="row">{t("primary-coach")}</TableCell>
                    <TableCell align="right">{row.original["primary_coach"]?.email}</TableCell>
                  </TableRow>
                  <TableRow tabIndex={0} sx={{ "& td": { border: 0 } }}>
                    <TableCell scope="row">{t("other-coaches")}</TableCell>
                    <TableCell
                      align="right"
                      sx={{
                        wordWrap: "break-word",
                        maxWidth: 150,
                      }}
                    >
                      {row.original["other_coaches"]?.map((coach) => coach?.email)?.join()}
                    </TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </TableContainer>
          </div>
        </>
      }
      placement="right"
      arrow
    >
      <Button
        className="buttonFontColor"
        sx={{ minWidth: "auto" }}
        aria-label="Info"
        onClick={(event) => {
          event.stopPropagation();
          setOpenInfo(currentId);
          const focusOnClick = document.querySelector("#close-button");
          if (focusOnClick) {
            focusOnClick.focus();
          }
        }}
      >
        <FontAwesomeIcon icon={faInfoCircle} />
      </Button>
    </HtmlTooltip>
  );
};

export default InfoTooltipButton;

in JAWS when i click on info icon then this tootltip appear i want that the focus becomes on cross button and then when we navigate it navigate to the data of the tootltip