import React, { useState } from 'react'

import { EyeThinIcon, EyeInvisibleThinIcon } from '../icons'
import TextInput, { Props as TextInputProps } from './TextInput'

export interface Props extends TextInputProps {}

// https://stackoverflow.com/questions/69279989/having-an-issue-from-material-ui-visibility-password-in-the-microsoft-edge-brows
// 目前没有搞清楚edge浏览器自带的切换按钮工作原理，相关问题内容在以上链接中

export default function PasswordInput({ inputProps, ...props }: Props) {
  const [passwordVisible, setPasswordVisible] = useState(false)
  const onVisibleChange = () => {
    const { disabled } = props
    if (disabled) {
      return
    }
    setPasswordVisible(prevState => !prevState)
  }

  const getIcon = () => {
    const Icon = passwordVisible ? EyeThinIcon : EyeInvisibleThinIcon
    return (
      <Icon
        onClick={onVisibleChange}
        onMouseDown={e => {
          // Prevent focused state lost
          // https://github.com/ant-design/ant-design/issues/15173
          e.preventDefault()
        }}
        onMouseUp={e => {
          // Prevent caret position change
          // https://github.com/ant-design/ant-design/issues/23524
          e.preventDefault()
        }}
      />
    )
  }

  return (
    <TextInput
      {...props}
      suffix={getIcon()}
      inputProps={{ ...inputProps, type: passwordVisible ? 'text' : 'password' }}
    />
  )
}