import { FC, useCallback, useMemo } from "react";
import { IconWidgetProps } from "@/widgetLibrary/IconWidget/interface";
import { ButtonIcon } from "@/widgetLibrary/IconWidget/utils";
import { IconButton } from "@mui/material";
import { getStyleMap } from "@/utils/getStyleMap";

export const IconWidget: FC<IconWidgetProps> = ({
  tooltipText,
  iconName,
  triggerEventHandler,
  isClassTrue = true,
  trueClasses = [],
  falseClasses = [],
  context,
}) => {
 
  const handleOnClick = useCallback(() => {
    triggerEventHandler("click");
  }, [triggerEventHandler]);
  const style = useMemo(() => {
    return getStyleMap(trueClasses, falseClasses, isClassTrue, context);
  }, [trueClasses, falseClasses, isClassTrue, context]);
  const myIconComponent = ButtonIcon(iconName, {iconStyle:style}, {});
  return (
    <IconButton
      size="small"
      title={tooltipText}
      css={style}
      onClick={handleOnClick}
    >
      {myIconComponent}
    </IconButton>
  );
};

IconWidget.displayName = "IconWidget";
export default IconWidget;
