import React from 'react'
import Admin from './../admin'
import Modal from 'react-modal'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import isEqual from 'lodash/isEqual'
import cloneDeep from 'lodash/cloneDeep'
import ChangePassword from './change-password'
import ConfirmDelete from './confirm-delete'
import { ConfirmDeleteModalStyles, PasswordModalStyles } from './helpers/modal-styles'
import { fetchEntity, createEntity, updateEntity, deleteEntity } from '../actions/index'
import { withExitPrompt } from './util/with-exit-prompt'

interface UserDetailsProps {
  errors: string[];
  fetchEntity: any;
  deleteEntity: any;
  permissionIds: number[];
  teamIds: number[];
  updateEntity: any;
  user: any;
}

interface UserDetailsState extends ComponentState {
  user: any;
  userSaved: any;
  teamIds: any[];
  permissionIds: any[];
  passwordModalOpen: boolean;
  deleteModalOpen: boolean;
}

class UserDetails extends React.Component<UserDetailsProps, UserDetailsState> {

  constructor(props) {
    super(props);
    this.state = {
      fetching: true,
      user: {},
      userSaved: {},
      teamIds: [],
      permissionIds: [],
      errors: [],
      changesToSave: false,
      justSaved: false,
      passwordModalOpen: false,
      deleteModalOpen: false
    };
  }

  componentDidMount() {
    let pathDirectories = window.location.pathname.split("/");
    this.props.fetchEntity({
      id: pathDirectories[pathDirectories.length - 1],
      directory: "users",
      entityName: "user"
    }).then(() => {
      this.setState({
        fetching: false,
        user: this.props.user,
        userSaved: cloneDeep(this.props.user),
        teamIds: this.props.teamIds,
        permissionIds: this.props.permissionIds,
        changesToSave: false
      }, () => {
        Admin.setUpNiceSelect({ selector: "select", func: Admin.changeField.bind(this, this.changeFieldArgs()) });
      });
    });
  }

  checkForChanges() {
    return !isEqual(this.state.user, this.state.userSaved);
  }

  clickSave() {
    this.setState({
      fetching: true,
      justSaved: true
    });
    this.props.updateEntity({
      id: this.state.user.id,
      directory: "users",
      entityName: "user",
      entity: this.state.user
    }).then(() => {
      this.setState({
        fetching: false,
        user: this.props.user,
        userSaved: cloneDeep(this.props.user),
        changesToSave: false
      });
    }, () => {
      this.setState({
        fetching: false,
        errors: this.props.errors
      });
    });
  }

  closeModal() {
    this.setState({
      passwordModalOpen: false,
      deleteModalOpen: false
    });
  }

  changeFieldArgs() {
    return {
      thing: "user",
      errorsArray: this.state.errors,
      changesFunction: this.checkForChanges.bind(this)
    }
  }

  render() {
    let readOnly = !this.canUpdateTextField();
    return(
      <div id="user-details">
        <div className="component details-component">
          <h1>User profile</h1>
          <div id="user-profile-box" className="white-box">
            { Admin.renderSpinner(this.state.fetching) }
            { Admin.renderGrayedOut(this.state.fetching) }
            <div className="row">
              { Admin.renderImageField.bind(this)({ columnWidth: 4, entity: "user", property: "imageId", imageUrlProperty: "imageUrl", columnHeader: "Profile Picture", createImageRecord: true }) }
            </div>
            <div className="row">
              { Admin.renderField.bind(this)({ columnWidth: 4, entity: "user", property: "name", readOnly }) }
              { Admin.renderField.bind(this)({ columnWidth: 4, entity: "user", property: "email", readOnly: true }) }
              { this.renderPasswordInput() }
            </div>
            <div className="row">
              { Admin.renderField.bind(this)({ columnWidth: 4, entity: "user", property: "title", readOnly }) }
              { Admin.renderDropDown.bind(this)({
                columnWidth: 4,
                entity: "user",
                property: "teamId",
                columnHeader: "Team ID",
                limit: 6,
                optionLabel: "name",
                optionValue: "id"
              }) }
              { Admin.renderDropDown.bind(this)({
                columnWidth: 4,
                entity: "user",
                property: "permissionId",
                columnHeader: "Permission ID",
                limit: 6,
                optionLabel: "name",
                optionValue: "id"
              }) }
            </div>
            <div className="row">
              { Admin.renderTextBox.bind(this)({ columnWidth: 8, entity: "user", property: "bio", rows: 5 }) }
              { Admin.renderField.bind(this)({ columnWidth: 4, entity: "user", property: "twitterHandle", readOnly }) }
            </div>
            { this.renderSaveButton() }
            { this.renderDeleteButton() }
          </div>
        </div>
        <Modal isOpen={ this.state.passwordModalOpen } onRequestClose={ this.closeModal.bind(this) } contentLabel="Modal" style={ PasswordModalStyles }>
          <ChangePassword userId={ this.state.user.id } closePasswordModal={ this.closeModal.bind(this) } />
        </Modal>
        <Modal isOpen={ this.state.deleteModalOpen } onRequestClose={ Admin.closeDeleteModal.bind(this) } contentLabel="Modal" style={ ConfirmDeleteModalStyles }>
          <ConfirmDelete entityName="user" skipCheck={ true } closeModal={ Admin.closeDeleteModal.bind(this) } closeAndFetch={ Admin.closeDeleteModalAndFetch.bind(this) } delete={ Admin.deleteEntity.bind(this) } />
        </Modal>
      </div>
    );
  }

  renderPasswordInput() {
    if (Admin.currentUserProfile() || Admin.currentUser.access >= Admin.permissions["Administrator"]) {
      return(
        <div className="col-xs-4">
          <a className={ "btn orange-button change-password-button" + Admin.renderDisabledButtonClass(this.state.fetching) } onClick={ Admin.changeState.bind(this, "passwordModalOpen", true) }>Update Password</a>
        </div>
      );
    } else {
      return null;
    }
  }

  renderSaveButton() {
    if (Admin.currentUserProfile() || this.currentUserCanUpdateProfile()) {
      if (this.state.changesToSave) {
        var buttonText = "Save";
      } else {
        var buttonText = this.state.justSaved ? "Saved" : "No Changes";
      }
      return(
        <a className={ "orange-button btn standard-button-width" + Admin.renderDisabledButtonClass(this.state.fetching || !this.state.changesToSave) } onClick={ this.clickSave.bind(this) }>
          { buttonText }
        </a>
      );
    } else {
      return null;
    }
  }

  renderDeleteButton() {
    if (Admin.currentUser.access === "3" && this.state.user.id != Admin.currentUser.id) {
      return(
        <a className={ "delete-button" + Admin.renderDisabledButtonClass(this.state.fetching) } onClick={ Admin.changeState.bind(this, "deleteModalOpen", true) }>
          Delete
        </a>
      );
    } else {
      return null;
    }
  }

  canUpdateTextField() {
    return Admin.currentUserProfile() || this.currentUserCanUpdateProfile();
  }

  currentUserCanUpdateProfile() {
    if (Admin.currentUser.access == Admin.permissions["Super administrator"]) {
      return true;
    } else if (Admin.currentUser.access == Admin.permissions["Administrator"]) {
      return this.state.user.access <= Admin.permissions["User"];
    } else {
      return false;
    }
  }

  componentDidUpdate() {
    $('.match-height-layout').matchHeight();
    Admin.resetNiceSelect({
      selector: 'select',
      func: Admin.changeField.bind(this, this.changeFieldArgs())
    });
  }
}

const mapStateToProps = (reducers, props) => {
  return reducers.standardReducer;
};

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchEntity, createEntity, updateEntity, deleteEntity }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(withExitPrompt(UserDetails));