import '../css/EditPermissionsPanel.scss';
import React from 'react';
import ErrorMessage from './ErrorMessage';
import PropTypes from 'prop-types';
import $ from 'jquery';
import { _, interpolate } from '../classes/gettext';
import update from 'immutability-helper';
import Css from '../classes/Css';

class EditPermissionsPanel extends React.Component {
  static defaultProps = {
    projectId: -1,
    lazyLoad: true
  };

  static propTypes = {
    projectId: PropTypes.number.isRequired,
    lazyLoad: PropTypes.bool
  };

  constructor(props){
    super(props);

    this.state = {
      error: "",
      loading: false,
      permissions: [],
      validUsernames: {},
      validatingUser: false,
      validationUnavailable: false
    };

    this.backgroundFailedColor = Css.getValue('btn-danger', 'backgroundColor');
    this.autocompleteBorderColor = Css.getValue('btn-default', 'backgroundColor');
    this.backgroundColor = Css.getValue('theme-secondary', 'backgroundColor');
    this.highlightColor = Css.getValue('theme-background-highlight', 'backgroundColor');
  }

  loadPermissions = () => {
    this.setState({loading: true, permissions: []});

    this.permsRequest = 
      $.getJSON(`/api/projects/${this.props.projectId}/permissions/`, json => {
        let validUsernames = {};
        json.forEach(p => validUsernames[p.username] = true);
        this.setState({validUsernames, permissions: json});
      })
      .fail(() => {
        this.setState({error: _("Cannot load permissions.")});
      })
      .always(() => {
          this.setState({loading: false});
      });
  }

  getPermissions = () => {
      // Cleanup temporary objects then return
      this.state.permissions.forEach(perm => delete(perm.autocomplete));
      return this.state.permissions;
  }

  autocomplete = (perm) => {
      if (this.validateReq){
        this.validateReq.abort();
        this.validateReq = null;  
      }

      if (this.validateTimeout){
          clearTimeout(this.validateTimeout);
          this.validateTimeout = null;
      }

      
      // Empty case
      if (perm.username === ""){
          delete(perm.autocomplete);
          this.setState({permissions: this.state.permissions});
          return;
      }
        
      this.setState({validatingUser: true});
      this.validateTimeout = setTimeout(() => {
        this.validateReq = $.getJSON(`/api/users/?limit=30&search=${encodeURIComponent(perm.username)}`)
          .done((json) => {
            json.forEach(u => {
                this.state.validUsernames[u.username] = true;
            });
            
            this.state.permissions.forEach(p => delete(p.autocomplete));
        
            if (this.textFocused) perm.autocomplete = json;

            this.setState({validUsernames: this.state.validUsernames, permissions: this.state.permissions});
          }).fail(jqXHR => {
            // Perhaps the user API is not enabled
            if (jqXHR.statusText !== "abort"){
                this.setState({validationUnavailable: true});
            }
          }).always(() => {
            this.setState({validatingUser: false});
          });
      }, 300);
  }

  componentDidMount(){
      if (!this.props.lazyLoad) this.loadPermissions();
  }

  componentWillUnmount(){
      if (this.permsRequest) this.permsRequest.abort();
      if (this.validateReq) this.validateReq.abort();
      if (this.validateTimeout) clearTimeout(this.validateTimeout);
  }

  handleChangePermissionRole = perm => {
    return e => {
        perm.permissions = this.extendedPermissions(e.target.value);
        this.setState({permissions: this.state.permissions});
    }
  }

  handleChangePermissionUser = perm => {
    return e => {
        perm.username = e.target.value;

        this.autocomplete(perm);
        
        // Update
        this.setState({permissions: this.state.permissions});
    };
  }

  simplifiedPermission = perms => {
      // We simplify WebODM's internal permission model into
      // a simpler read or read/write model.
      if (perms.indexOf("change") !== -1) return "rw";
      else if (perms.indexOf("view") !== -1) return "r";
      else return "";
  }

  extendedPermissions = simPerm => {
      if (simPerm == "rw"){
          return ["add", "change", "delete", "view"];
      }else if (simPerm == "r"){
          return ["view"];
      }else return [];
  }

  permissionLabel = simPerm => {
      if (simPerm === "rw") return _("Read/Write");
      else if (simPerm === "r") return _("Read");
      else if (simPerm === "") return _("No Access");
  }

  allPermissions = () => {
      return ["rw", "r"].map(p => { return {key: p, label: this.permissionLabel(p)}});
  }

  getColorFor = (username) => {
    if (this.state.validationUnavailable || this.state.validatingUser || this.state.validUsernames[username]) return "";
    else return this.backgroundFailedColor;
  }

  addNewPermission = () => {
    this.setState(update(this.state, {
        permissions: {$push: [{username: "", permissions: ["view"]}]}
    }));

    setTimeout(() => {
        if (this.lastTextbox) this.lastTextbox.focus();
    }, 0);
  }

  handleDeletePermission = perm => {
      return () => {
        this.setState(update(this.state, {
            permissions: arr => arr.filter(p => p !== perm)
        }));
      }
  }

  acOnMouseEnter = e => {
    e.target.style.backgroundColor = this.highlightColor;
  }

  acOnMouseLeave = e => {
    e.target.style.backgroundColor = "";
  }

  acOnClick = (perm, acEntry) => {
    return e => {
        perm.username = acEntry.username;
        delete(perm.autocomplete);
        this.setState({permissions: this.state.permissions});
    }
  }

  onFocus = e => {
    this.textFocused = true;
  }

  onBlur = perm => {
    return e => {
        delete(perm.autocomplete);
        this.setState({permissions: this.state.permissions});
        this.textFocused = false;
    }
  }

  render() {
    const permissions = this.state.permissions.map((p, i) => <form autoComplete="off" key={i}>
        <div className="permission">
            <div className="username-container">
                <i className="fa fa-user user-indicator"/>
                <input 
                    style={{color: this.getColorFor(p.username)}}
                    onChange={this.handleChangePermissionUser(p)} 
                    type="text"
                    autoComplete="off"
                    onFocus={this.onFocus}
                    onBlur={this.onBlur(p)}
                    disabled={p.owner} 
                    value={p.username} 
                    className="form-control username" 
                    placeholder={_("Username")}
                    ref={(domNode) => this.lastTextbox = domNode} />
                {p.autocomplete && p.autocomplete.length > 0 ? <div className="autocomplete" style={{borderColor: this.autocompleteBorderColor, backgroundColor: this.backgroundColor}}>
                    {p.autocomplete.map(ac => <div key={ac.username} onMouseDown={this.acOnClick(p, ac)} className="ac-entry" onMouseEnter={this.acOnMouseEnter} onMouseLeave={this.acOnMouseLeave} style={{borderColor: this.autocompleteBorderColor}}>
                        <div className="ac-user">{ac.username}</div>
                        <div className="ac-email">{ac.email}</div>
                    </div>)}
                </div> : ""}
            </div>
            <div className="remove">
                {!p.owner ? <a onClick={this.handleDeletePermission(p)}><i className="fa fa-times"></i></a> : ""}
            </div>
            <div className="role-container">
                <select disabled={p.owner} className="form-control" value={this.simplifiedPermission(p.permissions)} onChange={this.handleChangePermissionRole(p)}>
                    {this.allPermissions().map(p => <option key={p.key} value={p.key}>{p.label}</option>)}
                </select>
            </div>
        </div>
    </form>);

    return (
      <div className="edit-permissions-panel">
        <div className="form-group">
          <label className="col-sm-2 control-label">{_("Permissions")}</label>
          <div className="col-sm-10">
            <ErrorMessage bind={[this, 'error']} />

            {this.state.loading ? 
            <i className="fa fa-circle-notch fa-spin fa-fw perms-loading"></i>
            : [permissions, <div key="add-new">
                <button onClick={this.addNewPermission} className="btn btn-default btn-sm add-new"><i className="fa fa-user-plus"></i></button>
            </div>]}
          </div>
        </div>
      </div>
    );
  }
}

export default EditPermissionsPanel;