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

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(--turquoise-flash)",
			color: "white",
			//boxShadow: theme.shadows[1],
			fontSize: 11,
		},
		[`& .${tooltipClasses.arrow}`]: {
			color: "var(--turquoise-flash)",
		},
	}),
);

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>
		);
	}
}