import React from "react";
import {
  InputLabel as MUIInputLabel,
  InputLabelProps as MUIInputLabelProps,
} from "@mui/material";

import icons from "../icon/icons";
import { Tooltip, TooltipProps } from "../tooltip/Tooltip";
import { Icon } from "../icon/Icon";
import { twMerge } from "../../../tailwind.config";
import { useInputLabelStyles } from "./InputLabel.styles";

export interface InputLabelProps
  extends Omit<MUIInputLabelProps, "shrink" | "classes" | "className"> {
  icon?: keyof typeof icons;
  iconTooltipProps?: Omit<TooltipProps, "children">;
  ESCAPE_className?: string;
}
export const InputLabel: React.FC<InputLabelProps> = ({
  children,
  icon,
  iconTooltipProps = { tooltip: "", disabled: true },
  ESCAPE_className,
  ...restProps
}) => {
  const { icon: iconClass, ...classes } = useInputLabelStyles();

  return (
    <MUIInputLabel
      shrink={false}
      classes={{ ...classes, root: twMerge(classes.root, ESCAPE_className) }}
      {...restProps}
    >
      {children}
      {icon && (
        <Tooltip spacing="2" placement="top" {...iconTooltipProps}>
          <span tabIndex={0} className={iconClass}>
            <Icon name={icon} size="16" />
          </span>
        </Tooltip>
      )}
    </MUIInputLabel>
  );
};
