import * as React from 'react';

import MuiFormHelperText from '@mui/material/FormHelperText';
import type { FormHelperTextProps as MuiFormHelperTextProps } from '@mui/material/FormHelperText';
import { styled } from '@mui/material/styles';

import type { Theme } from '../../@styles/theme-provider';

type StyledFormHelperTextProps = Pick<FormHelperTextProps, 'warning'>;

const StyledFormHelperText = styled(MuiFormHelperText, {
  shouldForwardProp: prop => prop !== 'warning'
})<StyledFormHelperTextProps>(({ warning, theme }: StyledFormHelperTextProps & { theme: Theme }) =>
  warning
    ? {
        '&, &.Mui-error': {
          color: theme.palette.warning[500]
        }
      }
    : {}
);

export type FormHelperTextProps = Omit<MuiFormHelperTextProps, 'variant'> & {
  /**
   * If `true`, helper text should be displayed in a warning state.
   * @default false
   */
  warning?: boolean;
};

export const FormHelperText = React.forwardRef(function (
  props: FormHelperTextProps,
  ref: React.Ref<HTMLParagraphElement>
) {
  return <StyledFormHelperText ref={ref} {...props} />;
});