link-stack/apps/leafcutter/app/_components/Tooltip.tsx

"use client";

/* eslint-disable react/require-default-props */
import { FC } from "react";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
import {
  Box,
  Grid,
  Tooltip as MUITooltip,
  Button,
  IconButton,
} from "@mui/material";
import { Close as CloseIcon } from "@mui/icons-material";
import { useTranslate } from "react-polyglot";
import { useAppContext } from "./AppProvider";

interface TooltipProps {
  title: string;
  description: string;
  placement: any;
  tooltipID: string;
  nextURL?: string;
  previousURL?: string;
  children: any;
}

export const Tooltip: FC<TooltipProps> = ({
  title,
  description,
  placement,
  tooltipID,
  children,
  previousURL = null,
  nextURL = null,
  // eslint-disable-next-line arrow-body-style
}) => {
  const t = useTranslate();
  const {
    typography: { p, small },
    colors: { white, leafcutterElectricBlue, almostBlack },
  } = useAppContext();
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const activeTooltip = searchParams.get('tooltip')?.toString();
  const open = activeTooltip === tooltipID;
  const showNavigation = true;

  return (
    <MUITooltip
      open={open}
      title={
        <Grid container direction="column">
          <Grid item container direction="row-reverse">
            <Grid item>
              <IconButton onClick={() => router.push(pathname)}>
                <CloseIcon
                  sx={{
                    color: leafcutterElectricBlue,
                    fontSize: "14px",
                    mt: 1,
                  }}
                />
              </IconButton>
            </Grid>
          </Grid>
          <Grid item>
            <Box sx={{ p: "12px", pt: 0, mb: "6px" }}>
              <Box sx={{ ...p, fontWeight: "bold" }}>
                <Grid container direction="row" alignItems="center">
                  <Grid item>{title}</Grid>
                </Grid>
              </Box>
              <Box sx={{ ...small, mt: 1, color: almostBlack }}>
                {description}
              </Box>
            </Box>
          </Grid>
          {showNavigation ? (
            <Grid
              item
              container
              direction="row"
              justifyContent="space-between"
              alignItems="center"
              sx={{ p: "12px" }}
            >
              <Grid item>
                {previousURL ? (
                  <Button
                    sx={{
                      ...small,
                      borderRadius: 500,
                      border: `1px solid ${leafcutterElectricBlue}`,
                      p: "2px 8px",
                      color: leafcutterElectricBlue,
                      textTransform: "none",
                    }}
                    onClick={() => router.push(previousURL)}
                  >
                    {t("previous")}
                  </Button>
                ) : null}
              </Grid>
              <Grid item>
                {nextURL ? (
                  <Button
                    sx={{
                      ...small,
                      borderRadius: 500,
                      border: `1px solid ${leafcutterElectricBlue}`,
                      p: "2px 8px",
                      color: leafcutterElectricBlue,
                      textTransform: "none",
                    }}
                    onClick={() => router.push(nextURL)}
                  >
                    {t("next")}
                  </Button>
                ) : (
                  <Button
                    sx={{
                      ...small,
                      borderRadius: 500,
                      border: `1px solid ${leafcutterElectricBlue}`,
                      p: "2px 8px",
                      color: leafcutterElectricBlue,
                      textTransform: "none",
                    }}
                    onClick={() => router.push(pathname)}
                  >
                    {t("done")}
                  </Button>
                )}
              </Grid>
            </Grid>
          ) : null}
        </Grid>
      }
      arrow
      placement={placement}
      sx={{ opacity: 0.9 }}
      componentsProps={{
        tooltip: {
          sx: {
            opacity: 1.0,
            backgroundColor: white,
            color: leafcutterElectricBlue,
            boxShadow: "0px 6px 20px rgba(0,0,0,0.25)",
          },
        },
        arrow: {
          sx: { opacity: 1.0, fontSize: "22px", color: white },
        },
      }}
    >
      {children}
    </MUITooltip>
  );
};