import React from "react";
import type { ReactElement } from "react";
import {
  Tooltip as MUITooltip,
  type TooltipProps as MUITooltipProps,
} from "@mui/material";
import { twJoin } from "tailwind-merge";

import { UserAvatarGroupTooltipTitle } from "./UserAvatarGroupTooltipTitle";

const needVerticalMargin: UserAvatarGroupTooltipProps["placement"][] = [
  "top",
  "top-start",
  "top-end",
  "bottom",
  "bottom-start",
  "bottom-end",
];

export type UserAvatarGroupTooltipProps = {
  children: ReactElement;
  placement?: MUITooltipProps["placement"];
  tooltipBody: ReactElement[];
  open?: boolean;
  tooltipTitle: string;
};

export const UserAvatarGroupTooltip = ({
  children,
  tooltipBody,
  placement = "bottom",
  tooltipTitle,
  open,
}: UserAvatarGroupTooltipProps) => (
  <MUITooltip
    title={
      <UserAvatarGroupTooltipTitle
        tooltipTitle={tooltipTitle}
        tooltipBody={tooltipBody}
      />
    }
    placement={placement}
    open={open}
    classes={{
      tooltip: twJoin(
        "bg-N700 rounded-6 p-0 shadow-S100",
        needVerticalMargin.includes(placement) ? "my-8" : "mx-8"
      ),
    }}
  >
    {children}
  </MUITooltip>
);
