import { useMemo } from "react";
import {
  Tooltip,
  TooltipButtonContainer,
  TooltipButtonStyle,
} from "./TooltipButton.styled";

export type TooltipButtonProps = {
  onClick: () => void;
  topTooltip?: string;
  rightTooltip?: string;
  bottomTooltip?: string;
  leftTooltip?: string;
  icon?: JSX.Element;
  iconColor?: string;
  color?: string;
  backgroundColor?: string;
};

const TooltipButton = ({
  onClick,
  topTooltip,
  rightTooltip,
  bottomTooltip,
  leftTooltip,
  icon,
  iconColor = "",
  color = "",
  backgroundColor= "",
}: TooltipButtonProps) => {
  const chooseColor: { [style in "stroke" | "color" | "backgroundColor"]: string } = useMemo(() => {
    return {
      stroke: iconColor,
      color: color,
      backgroundColor: backgroundColor,
    }
  }, [iconColor, color, backgroundColor]);

  return (
    <TooltipButtonContainer>
      {topTooltip && <Tooltip style={{ ...chooseColor, bottom: "32px" }}>{topTooltip}</Tooltip>}
      {rightTooltip && (
        <Tooltip style={{ ...chooseColor, left: "32px" }}>{rightTooltip}</Tooltip>
      )}
      {bottomTooltip && (
        <Tooltip style={{ ...chooseColor, top: "32px" }}>{bottomTooltip}</Tooltip>
      )}
      {leftTooltip && (
        <Tooltip style={{ ...chooseColor, right: "32px" }}>{leftTooltip}</Tooltip>
      )}
      <TooltipButtonStyle onClick={() => onClick()} stroke={chooseColor.stroke}>{icon}</TooltipButtonStyle>
    </TooltipButtonContainer>
  );
};

export default TooltipButton;
