import * as React from 'react';
import * as classNames from 'classnames';
import {HTMLProps, PureComponent, SFC} from 'react';
import {Icon, Input as ReactstrapInput} from './../../../../components';

export interface Props extends HTMLProps<HTMLInputElement> {
  showRevealPasswordButton?: boolean;
  state: string;
}

export interface State {
  revealPassword: boolean;
}

export class Input extends PureComponent<Props, {}> {
  state: State = {
    revealPassword: false,
  };

  render() {
    const {showRevealPasswordButton, type, ...otherProps} = this.props;
    const {revealPassword} = this.state;

    const modifiedType = revealPassword ? 'text' : type;
    const hasNoErrors = this.props.state !== 'danger';

    return (
      type === 'text' ? (

        <ReactstrapInput type={modifiedType as any} size="lg" {...otherProps as any} />

      ) : type === 'password' ? (

        <div className="reveal-password-container">
          <ReactstrapInput type={modifiedType as any} size="lg" {...otherProps as any} />
          {hasNoErrors && this.renderRevealPasswordButton()}
        </div>

      ) : null
    ) as any;
  }

  renderRevealPasswordButton = () => {
    const {revealPassword} = this.state;

    return (
      <button
        className={classNames(
          'reveal-password-btn',
          {active: revealPassword},
        )}
        type="button"
        onClick={this.toggleRevealPassword}
      >
        <Icon name="remove_red_eye" />
      </button>
    );
  }

  toggleRevealPassword = () => this.setState({revealPassword: !this.state.revealPassword});
}