import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap'; 
import { gettext, repoPasswordMinLength } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import { seafileAPI } from '../../utils/seafile-api';
import toaster from '../toast';

const propTypes = {
  repoID: PropTypes.string.isRequired,
  repoName: PropTypes.string.isRequired,
  toggleDialog: PropTypes.func.isRequired
};

class ChangeRepoPasswordDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      oldPassword: '',
      newPassword: '',
      newPasswordAgain: '',
      submitBtnDisabled: false,
      errorMsg: ''
    };
  }

  handleOldPasswordInputChange = (e) => {
    this.setState({
      oldPassword: e.target.value
    });
  }

  handleNewPasswordInputChange = (e) => {
    this.setState({
      newPassword: e.target.value
    });
  }

  handleNewPasswordAgainInputChange = (e) => {
    this.setState({
      newPasswordAgain: e.target.value
    });
  }

  formSubmit = (e) => {
    const { oldPassword, newPassword, newPasswordAgain } = this.state;
    if (!oldPassword) {
      this.setState({
        errorMsg: gettext('Please enter the old password')
      });
      return false;
    }
    if (!newPassword) {
      this.setState({
        errorMsg: gettext('Please enter a new password')
      });
      return false;
    }
    if (newPassword.length < repoPasswordMinLength) {
      this.setState({
        errorMsg: gettext('New password is too short')
      });
      return false;
    }
    if (!newPasswordAgain) {
      this.setState({
        errorMsg: gettext('Please enter the new password again')
      });
      return false;
    }
    if (newPassword != newPasswordAgain) {
      this.setState({
        errorMsg: gettext('New passwords don\'t match')
      });
      return false;
    }

    this.setState({
      submitBtnDisabled: true  
    });
    seafileAPI.changeEncryptedRepoPassword(this.props.repoID, oldPassword, newPassword)
    .then(() => {
      this.props.toggleDialog();
      toaster.success(gettext('Successfully changed library password.'));
    }).catch((error) => {
      let errorMsg = '';
      if (error.response) {
        if (error.response.data) {
            errorMsg = error.response.data.error_msg;
        } else {
            errorMsg = gettext('Error');
        }   
      } else {
          errorMsg = gettext('Please check the network.');
      }   
      this.setState({
        errorMsg: errorMsg,
        submitBtnDisabled: false
      }); 
    });
  }


  render() {
    const { repoID, repoName, toggleDialog } = this.props;

    return (
      <Modal isOpen={true} centered={true} style={{height: 'auto'}}>
        <ModalHeader toggle={toggleDialog}>
          <span dangerouslySetInnerHTML={{__html: Utils.generateDialogTitle(gettext('Change Password of Library {placeholder}'), repoName)}}></span>
        </ModalHeader>
        <ModalBody>
          <form id="repo-change-passwd-form" action="" method="post">
            <label htmlFor="passwd">{gettext('Old Password')}</label><br />
            <input type="password" name="old_passwd" className="form-control" id="passwd" value={this.state.oldPassword} onChange={this.handleOldPasswordInputChange} /><br />
            <label htmlFor="new-passwd">{gettext('New Password')}</label><span className="tip">{gettext('(at least {placeholder} characters)').replace('{placeholder}', repoPasswordMinLength)}</span><br />
            <input type="password" name="new_passwd" className="form-control" id="new-passwd" value={this.state.newPassword} onChange={this.handleNewPasswordInputChange} /><br />
            <label htmlFor="new-passwd-again">{gettext('New Password Again')}</label><br />
            <input type="password" name="new_passwd_again" className="form-control" id="new-passwd-again" value={this.state.newPasswordAgain} onChange={this.handleNewPasswordAgainInputChange} /><br />
            {this.state.errorMsg && <Alert color="danger">{this.state.errorMsg}</Alert>}
          </form>
        </ModalBody>
        <ModalFooter>
            <button className="btn btn-primary" disabled={this.state.submitBtnDisabled} onClick={this.formSubmit}>{gettext('Submit')}</button>
        </ModalFooter>
      </Modal>
    );
  }
}

ChangeRepoPasswordDialog.propTypes = propTypes;

export default ChangeRepoPasswordDialog;