import React from "react";
import Image from "next/image";
import ToolTipIcon from "@Assets/Icons/tool-tip.svg";
import TooltipMUI, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
import styled from "@emotion/styled";

type IProps = {
	title?: string | JSX.Element;
	text?: string | JSX.Element;
	className?: string;
	isNotFlex?: boolean;
};

type IState = {
	showContent: boolean;
	event: React.MouseEvent<HTMLElement> | null;
};

const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
	<TooltipMUI {...props} classes={{ popper: className }} />
  ))(({ theme }) => ({
	[`& .${tooltipClasses.tooltip}`]: {
	  backgroundColor: "var(--colormerdum)",
	  color: "var(--colormerdum)",
	  //boxShadow: theme.shadows[1],
	  fontSize: 11,
	},[`& .${tooltipClasses.arrow}`]: {
    // color: theme.palette.common.black,
  },
  }));

export default class Tooltip extends React.Component<IProps, IState> {
	static defaultProps: Partial<IProps> = {
		isNotFlex: false,
	};

	public constructor(props: IProps) {
		super(props);
	}

	public override render(): JSX.Element {
		return (
			<LightTooltip title={this.props.text} placement="top" arrow>
				<span
					className={this.props.className}
					style={!this.props.isNotFlex ? { display: "flex" } : {}}>
					<Image src={ToolTipIcon} alt="toolTip icon" />
				</span>
			</LightTooltip>
		);
	}
}
