import { CustomOnChangeProps } from "../../common/types/components.js";
import { FormHelperTextProps, FormLabelProps, IconButtonProps, TextFieldProps } from "../../common/types/mui.js";
import "../../common/index.js";
import { ChangeEvent, FocusEvent, JSX, ReactNode, Ref } from "react";
import { Control, FieldError, FieldValues, Path, RegisterOptions } from "react-hook-form";
import { CustomComponentIds } from "@nish1896/mui-components/types";
//#region src/mui/password-input/index.d.ts
type OnValueChangeProps = {
  newValue: string;
  event: ChangeEvent<HTMLInputElement>;
};
type InputPasswordProps = Omit<TextFieldProps, 'type' | 'multiline' | 'rows' | 'minRows' | 'maxRows' | 'onChange' | 'onBlur'> & {
  /** Always an `<input>`; multiline / textarea are not supported. */
  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
};
type RHFPasswordInputProps<T extends FieldValues> = {
  /**
   * Name/path of the React Hook Form field this component controls.
   */
  fieldName: Path<T>;
  /**
   * React Hook Form control object returned by `useForm`.
   */
  control: Control<T>;
  /**
   * Validation rules passed to React Hook Form for this field.
   */
  registerOptions?: RegisterOptions<T, Path<T>>;
  /**
   * Overrides the default password input change handling.
   * Receives the next password string and the original input change event.
   * Call `rhfOnChange` with the string that should be stored; else the form value will not be updated.
   *
   * @param rhfOnChange - React Hook Form field change handler for the password string.
   * @param newValue - Next password string.
   * @param event - Original input change event.
   */
  customOnChange?: ({ rhfOnChange, newValue, event }: CustomOnChangeProps<OnValueChangeProps, string>) => void;
  /**
   * Called after the default password input handler stores the next string in React Hook Form.
   *
   * ⚠️ Important:
   * This callback is not called when `customOnChange` is used.
   *
   * @param newValue - Next password string.
   * @param event - Original input change event.
   */
  onValueChange?: ({ newValue, event }: OnValueChangeProps) => void;
  /**
   * When `true`, renders the label above the component instead of within the field layout.
   */
  showLabelAboveFormField?: boolean;
  /**
   * Props forwarded to the internal `FormLabel`. The `id` is managed by the component.
   */
  formLabelProps?: Omit<FormLabelProps, 'id'>;
  /**
   * When true, hides the rendered field label while preserving accessible labeling where possible.
   */
  hideLabel?: boolean;
  /**
   * Custom icon displayed when the password is currently hidden.
   *
   * Clicking this icon reveals the password value.
   *
   * @default Visibility icon
   */
  showPasswordIcon?: ReactNode;
  /**
   * Custom icon displayed when the password is currently visible.
   *
   * Clicking this icon hides the password value.
   *
   * @default VisibilityOff icon
   */
  hidePasswordIcon?: ReactNode;
  /**
   * Props forwarded to the `IconButton` component that toggles password
   * visibility. Use `showPasswordIcon`/`hidePasswordIcon` to swap the icon
   * itself; this is for the button around it — e.g. a custom `size` or `sx`.
   */
  iconButtonProps?: IconButtonProps;
  /**
   * When true, the value is displayed but cannot be edited.
   *
   * Unlike `disabled`, the field stays focusable, is still submitted with the
   * form, and the show/hide toggle remains usable — a read-only value is
   * meaningful, so the user can still reveal it to verify it. `disabled`
   * instead makes the whole field inert, including the toggle.
   */
  readOnly?: boolean;
  /**
   * Custom renderer for the React Hook Form field error.
   * Receives the current field error and must return renderable content, such as `error.message` or a custom element.
   *
   * @param error - React Hook Form field error for this field.
   */
  renderError?: (error: FieldError) => ReactNode;
  /**
   * If true, hides the error message text while keeping the field in an error state.
   */
  hideErrorMessage?: boolean;
  /**
   * Props forwarded to the internal `FormHelperText`. The `id` is managed by the component.
   */
  formHelperTextProps?: Omit<FormHelperTextProps, 'id'>;
  /**
   * Custom ids for generated field, label, helper text, and error elements.
   */
  customIds?: CustomComponentIds;
} & InputPasswordProps;
/**
 * Controlled Material UI password field, wired to a React Hook Form field via
 * `control`.
 *
 * Renders a built-in show/hide visibility toggle, with the option to customize the icon.
 *
 * Docs: [RHFPasswordInput](https://rhf-mui-components.vercel.app/components/mui/RHFPasswordInput)
 *
 * API: [RHFPasswordInputProps](https://rhf-mui-components.vercel.app/components/mui/RHFPasswordInput#api)
 */
declare const RHFPasswordInput: <T extends FieldValues>(props: RHFPasswordInputProps<T> & {
  ref?: Ref<HTMLInputElement>;
}) => JSX.Element;
//#endregion
export { RHFPasswordInputProps, RHFPasswordInput as default };