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";

export interface InputLabelProps
  extends Omit<MUIInputLabelProps, "shrink" | "classes" | "className"> {
  icon?: keyof typeof icons;
  iconTooltipProps?: Omit<TooltipProps, "children">;
  ESCAPE_className?: string;
}

export function useInputLabelStyles() {
  const classes = {
    root: "relative flex text-N100 mb-4 text-style-M100 pointer-events-auto transform-none overflow-visible",
    focused: "text-N100",
    icon: "text-N60 ml-2 inline-flex rounded-6 hover:text-N80 focus:outline-none focus:ring-2 ring-B400FR",
  };

  return classes;
}

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