/* eslint-disable @typescript-eslint/no-explicit-any */
import { Typography, useTheme } from "@mui/material";
import { LabelProps } from "./interface";
import { getStyleMap } from "@/utils/getStyleMap";
import { useCallback, useMemo } from "react";
import { useSelector } from "react-redux";
import { getIsIMPAKTEditMode } from "@/redux/config/configSelector";

export const Label = ({
  label,
  context,
  isClassTrue = true,
  trueClasses = [],
  falseClasses = [],
  align,
  wrapText,
  triggerEventHandler,
}: LabelProps) => {
  const theme = useTheme()
  const isEditMode = useSelector(getIsIMPAKTEditMode);
  const handleOnClick = useCallback(() => {
    triggerEventHandler("click");
  }, [triggerEventHandler]);
  const style = useMemo(() => {
    return getStyleMap(trueClasses, falseClasses, isClassTrue, context);
  }, [trueClasses, falseClasses, isClassTrue, context]);
  return (
    <Typography
      onClick={handleOnClick}
      align={align}
      color={theme.palette.text.primary}
      noWrap={!wrapText}
      css={style}
    >
      {label?label:isEditMode && "Enter label"}
    </Typography>
  );
};
