import React, {FC} from 'react'
import {usePasswordToggle} from '../lib/ShowPasswordBtn'
import type {TextFieldProps} from '../lib/TextFieldBase'
import {TextField} from '../TextField'

interface IPasswordField {
  hideVisibilityToggle?: boolean
  confirm?: boolean
}

export const PasswordField: FC<TextFieldProps & IPasswordField> = ({
  hideVisibilityToggle,
  confirm,
  ...props
}) => {
  const [showPassword, TogglePasswordButton] = usePasswordToggle()
  return (
    <TextField
      type={showPassword ? 'text' : 'password'}
      endAdornment={TogglePasswordButton}
      {...props}
    />
  )
}
PasswordField.defaultProps = {
  label: 'Password',
  name: 'password',
}
export default PasswordField