import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { InputProps } from '../../inputs'
import { StyledShowPasswordIcon, PasswordPluginWrap } from './styled'
import { ObserverInput } from '../../inputs/ObserverInput'

export type PasswordAutoComplete =
  | 'current-password'
  | 'new-password'
  | 'password'

@observer
class PasswordPlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return ['password'].includes(props.type)
  }

  /**
   * @todo can also do this 1 level up and toggle for both confirm and normal
   */
  handleToggle = (event?: any) => {
    console.debug('[PasswordPlugin] toggle')
    const { state } = this.props
    state.setIsVisible(!state.isVisible)
    state.setType(state.type === 'password' ? 'text' : 'password')
  }

  // aka, reset
  componentWillUnmount() {
    const { state } = this.props
    state.setIsVisible(false)
    state.setType('password')
  }

  render() {
    const { state, ...remainingProps } = this.props

    return (
      <PasswordPluginWrap>
        <ObserverInput
          label="Password"
          {...remainingProps}
          placeholder="ReactDemo#0-100"
          type={state.type}
          state={state}
        />
        <StyledShowPasswordIcon
          isVisible={state.isVisible}
          onClick={this.handleToggle}
          children="o.o"
        />
      </PasswordPluginWrap>
    )
  }
}

export { PasswordPlugin }
export default PasswordPlugin