RHFTextField

/**
 * The below code snippet illustrates how to create a reusable styled Textfield
 * component using RHFTextField, which can be used throughout the application.
 *
 * In this example, the component accepts all the props of RHFTextField except
 * 'renderError', 'variant' and 'showLabelAboveFormField', which have already
 * been configured to maintain consistent styling across the application.
 * Additionally, it includes a custom error message component that displays an
 * error icon alongside the error message when there is an error.
 *
 * A similar approach can be taken to create reusable styled components for:
 * - RHFNumberInput
 * - RHFTagsInput
 * - RHFPasswordInput
 */

import { Fragment, type ReactNode } from 'react';
import { type FieldValues } from 'react-hook-form';
import Typography from '@mui/material/Typography';
import RHFTextField, { type RHFTextFieldProps } from '@nish1896/rhf-mui-components/mui/textfield';
import PriorityHighIcon from '@mui/icons-material/PriorityHigh';

type StyledRHFTextFieldProps<T extends FieldValues> = Omit<
  RHFTextFieldProps<T>,
  'renderError' | 'showLabelAboveFormField' | 'variant'
>;

type StyledErrorMsgProps = {
  errorMessage: ReactNode;
};

const StyledErrorMsg = ({ errorMessage }: StyledErrorMsgProps) => {
  return (
    <Fragment>
      {!!errorMessage && (
        <Typography
          variant="body2"
          sx={{
            alignItems: 'center',
            display: 'flex',
            gap: 0.5
          }}
        >
          <PriorityHighIcon color="error" fontSize="small" />
          {errorMessage}
        </Typography>
      )}
    </Fragment>
  );
};

const StyledRHFTextField = <T extends FieldValues>(
  props: StyledRHFTextFieldProps<T>
) => {
  const { formHelperTextProps, ...rest } = props;
  const {
    sx: helperTextSx,
    ...otherFormHelperTextProps
  } = formHelperTextProps ?? {};
  const helperTextSxList = Array.isArray(helperTextSx)
    ? helperTextSx
    : [];

  if (helperTextSx && !Array.isArray(helperTextSx)) {
    helperTextSxList.push(helperTextSx);
  }

  return (
    <RHFTextField
      {...rest}
      variant="standard"
      showLabelAboveFormField
      formHelperTextProps={{
        ...otherFormHelperTextProps,
        sx: [
          ...helperTextSxList,
          { ml: 0 }
        ]
      }}
      renderError={error => (
        <StyledErrorMsg errorMessage={error?.message} />
      )}
    />
  );
};

export default StyledRHFTextField;