import React, {PureComponent} from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import autobind from 'autobind-decorator';
import OneLineEditor from '../../codemirror/one-line-editor';
import Button from '../../base/button';

@autobind
class BasicAuth extends PureComponent {
  _handleDisable () {
    const {authentication} = this.props;
    authentication.disabled = !authentication.disabled;
    this.props.onChange(authentication);
  }

  _handleChangeUsername (value) {
    const {authentication} = this.props;
    authentication.username = value;
    this.props.onChange(authentication);
  }

  _handleChangePassword (value) {
    const {authentication} = this.props;
    authentication.password = value;
    this.props.onChange(authentication);
  }

  render () {
    const {
      authentication,
      showPasswords,
      handleRender,
      handleGetRenderContext,
      nunjucksPowerUserMode
    } = this.props;

    return (
      <div className="pad">
        <table>
          <tbody>
          <tr>
            <td className="pad-right no-wrap valign-middle">
              <label htmlFor="username" className="label--small no-pad">
                Username
              </label>
            </td>
            <td className="wide">
              <div className={classnames('form-control form-control--underlined no-margin', {
                'form-control--inactive': authentication.disabled
              })}>
                <OneLineEditor
                  type='text'
                  id='username'
                  disabled={authentication.disabled}
                  onChange={this._handleChangeUsername}
                  defaultValue={authentication.username || ''}
                  nunjucksPowerUserMode={nunjucksPowerUserMode}
                  render={handleRender}
                  getRenderContext={handleGetRenderContext}
                />
              </div>
            </td>
          </tr>
          <tr>
            <td className="pad-right no-wrap valign-middle">
              <label htmlFor="password" className="label--small no-pad">
                Password
              </label>
            </td>
            <td className="wide">
              <div className={classnames('form-control form-control--underlined no-margin', {
                'form-control--inactive': authentication.disabled
              })}>
                <OneLineEditor
                  type={showPasswords ? 'text' : 'password'}
                  id='password'
                  onChange={this._handleChangePassword}
                  defaultValue={authentication.password || ''}
                  nunjucksPowerUserMode={nunjucksPowerUserMode}
                  render={handleRender}
                  getRenderContext={handleGetRenderContext}
                />
              </div>
            </td>
          </tr>
          <tr>
            <td className="pad-right no-wrap valign-middle">
              <label htmlFor="enabled" className="label--small no-pad">
                Enabled
              </label>
            </td>
            <td className="wide">
              <div className="form-control form-control--underlined">
                <Button className="btn btn--super-duper-compact"
                        id="enabled"
                        onClick={this._handleDisable}
                        value={!authentication.disabled}
                        title={authentication.disabled ? 'Enable item' : 'Disable item'}>
                  {authentication.disabled
                    ? <i className="fa fa-square-o"/>
                    : <i className="fa fa-check-square-o"/>
                  }
                </Button>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

BasicAuth.propTypes = {
  handleRender: PropTypes.func.isRequired,
  handleGetRenderContext: PropTypes.func.isRequired,
  handleUpdateSettingsShowPasswords: PropTypes.func.isRequired,
  nunjucksPowerUserMode: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired,
  authentication: PropTypes.object.isRequired,
  showPasswords: PropTypes.bool.isRequired
};

export default BasicAuth;
