import React, {Component} from 'react';
import './Password.css';
import {faEye, faEyeSlash} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';

export default class extends Component {
  state = {
    button_text: 'clear',
    password: '',
    password2: '',
    show_password: false,
  };

  componentDidMount() {
    if (!this.props.value || (this.props.value.length === 0)) {
      this.setState({
        ...this.state,
        button_text: 'set',
        password: '',
        password2: '',
        show_password: false,
      })
    } else {
      this.setState({
        ...this.state,
        button_text: 'clear',
        password: this.props.value,
        password2: '',
        show_password: false,
      })
    }
  }

  handleActionClick = () => {
    if (!this.props.disabled) {
      switch (this.state.button_text) {
        case 'clear':
          this.setState({
            ...this.state,
            button_text: 'set',
            password: '',
            password2: '',
          });
          break;

        case 'confirm':
          if (this.state.password === this.state.password2) {
            this.props.changed(this.state.password);
            this.setState({
              ...this.state,
              button_text: this.state.password && this.state.password.length > 0 ? 'clear' : 'set',
              password2: '',
            });
          } else {
            this.setState({
              ...this.state,
              button_text: 'set',
              password: '',
              password2: '',
            }, () => {
              if (this.props.mismatchHandler) {
                this.props.mismatchHandler();
              }
            });
          }
          break;

        case 'set':
          this.setState({
            ...this.state,
            button_text: 'confirm',
            password2: '',
          });
          break;

        default:
          return;
      }
    }
  };

  handlePasswordChanged = e => {
    if (this.state.button_text === 'set') {
      this.setState({
        ...this.state,
        password: e.target.value,
      });
    } else if (this.state.button_text === 'confirm') {
      this.setState({
        ...this.state,
        password2: e.target.value,
      });
    }
  };

  handlePasswordKeyUp = e => {
    if ((e.keyCode === 13) && ((this.state.button_text === 'confirm') || (this.state.button_text === 'set'))) {
      this.handleActionClick();
    }
  };

  handleShowHideClick = () => {
    this.setState({
      ...this.state,
      show_password: !this.state.show_password,
    });
  };

  render() {
    return (
      <div className={'PasswordOwner'} style={{...this.props.style}}>
        {
          this.props.readOnly ? null : <a href={'#'}
                                          className={'PasswordLink'}
                                          onClick={this.handleActionClick}>
            <u>{this.state.button_text}</u>
          </a>
        }
        <input autoFocus={this.props.autoFocus}
               readOnly={this.props.readOnly}
               className={'PasswordInput'}
               disabled={this.props.readOnly || (this.state.button_text === 'clear')}
               onChange={this.handlePasswordChanged}
               onKeyUp={this.handlePasswordKeyUp}
               type={this.state.show_password ? 'text' : 'password'}
               value={(this.state.button_text === 'confirm') ? this.state.password2 : this.state.password}/>
        <a href={'#'}
           className={'PasswordShowHide'}
           onClick={this.handleShowHideClick}>
          <FontAwesomeIcon icon={this.state.show_password ? faEye : faEyeSlash} fixedWidth/>
        </a>
      </div>
    );
  }
};