import React from 'react';
import '../css/EditProjectDialog.scss';
import FormDialog from './FormDialog';
import PropTypes from 'prop-types';
import ErrorMessage from './ErrorMessage';
import EditPermissionsPanel from './EditPermissionsPanel';
import TagsField from './TagsField';
import { _ } from '../classes/gettext';

class EditProjectDialog extends React.Component {
    static defaultProps = {
        projectName: "",
        projectDescr: "",
        projectId: -1,
        projectTags: [],
        title: _("New Project"),
        saveLabel: _("Create Project"),
        savingLabel: _("Creating project..."),
        saveIcon: "glyphicon glyphicon-plus",
        deleteWarning: "",
        show: false,
        showDuplicate: false,
        showPermissions: false,
        onDuplicated: () => {}
    };

    static propTypes = {
        projectName: PropTypes.string,
        projectDescr: PropTypes.string,
        projectId: PropTypes.number,
        projectTags: PropTypes.array,
        saveAction: PropTypes.func.isRequired,
        onShow: PropTypes.func,
        deleteAction: PropTypes.func,
        title: PropTypes.string,
        saveLabel: PropTypes.string,
        savingLabel: PropTypes.string,
        saveIcon: PropTypes.string,
        deleteWarning: PropTypes.string,
        show: PropTypes.bool,
        showDuplicate: PropTypes.bool,
        showPermissions: PropTypes.bool,
        onDuplicated: PropTypes.func
    };

    constructor(props){
        super(props);

        this.state = {
          name: props.projectName,
          descr: props.projectDescr !== null ? props.projectDescr : "",
          duplicating: false,
          tags: props.projectTags,
          error: "",
          showTagsField: !!props.projectTags.length
        };

        this.reset = this.reset.bind(this);
        this.getFormData = this.getFormData.bind(this);
        this.onShow = this.onShow.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    reset(){
      this.setState({
        name: this.props.projectName,
        descr: this.props.projectDescr,
        duplicating: false,
        tags: this.props.projectTags,
        showTagsField: !!this.props.projectTags.length,
        error: ""
      });
    }

    getFormData(){
      const res = {
          name: this.state.name,
          descr: this.state.descr,
          tags: this.state.tags
      };
      
      if (this.editPermissionsPanel){
          res.permissions = this.editPermissionsPanel.getPermissions();
      }

      return res;
    }

    onShow(){

      if (this.editPermissionsPanel) this.editPermissionsPanel.loadPermissions();
      this.nameInput.focus();
    }

    show(){
      this.dialog.show();
    }

    hide(){
      this.dialog.hide();

      if (this.duplicateRequest){
          this.duplicateRequest.abort();
          this.duplicateRequest = null;
      }
    }

    handleChange(field){
      return (e) => {
        let state = {};
        state[field] = e.target.value;
        this.setState(state);
      }
    }

    handleDuplicate = () => {
        this.setState({duplicating: true});
        this.duplicateRequest = $.post(`/api/projects/${this.props.projectId}/duplicate/`)
            .done(json => {
                if (json.success){
                    this.hide();
                    this.props.onDuplicated(json.project);
                }else{
                    this.setState({
                        error: json.error || _("Cannot complete operation.")
                    });
                }
            })
            .fail(() => {
                this.setState({
                    error: _("Cannot complete operation."),
                });
            })
            .always(() => {
                this.setState({duplicating: false});
                this.duplicateRequest = null;
            });
    }

    toggleTagsField = () => {
      if (!this.state.showTagsField){
        setTimeout(() => {
          if (this.tagsField) this.tagsField.focus();
        }, 0);
      }
      this.setState({showTagsField: !this.state.showTagsField});
    }

    render(){
        let tagsField = "";
        if (this.state.showTagsField){
          tagsField = (<div className="form-group">
              <label className="col-sm-2 control-label">{_("Tags")}</label>
                <div className="col-sm-10"> 
                  <TagsField onUpdate={(tags) => this.state.tags = tags } tags={this.state.tags} ref={domNode => this.tagsField = domNode}/>
                </div>
            </div>);
        }

        return (
            <FormDialog {...this.props}
                getFormData={this.getFormData}
                reset={this.reset}
                onShow={this.onShow}
                leftButtons={this.props.showDuplicate ? [<button key="duplicate" disabled={this.duplicating} onClick={this.handleDuplicate} className="btn btn-default"><i className={"fa " + (this.state.duplicating ? "fa-circle-notch fa-spin fa-fw" : "fa-copy")}></i> Duplicate</button>] : undefined}
                ref={(domNode) => { this.dialog = domNode; }}>
              <ErrorMessage bind={[this, "error"]} />
              <div className="form-group edit-project-dialog">
                <label className="col-sm-2 control-label">{_("Name")}</label>
                <div className="col-sm-10 name-fields">
                  <input type="text" className="form-control" ref={(domNode) => { this.nameInput = domNode; }} value={this.state.name} onChange={this.handleChange('name')} onKeyPress={e => this.dialog.handleEnter(e)} />
                  <button type="button" title={_("Add tags")} onClick={this.toggleTagsField} className="btn btn-sm btn-secondary toggle-tags">
                    <i className="fa fa-tag"></i>
                  </button>
                </div>
              </div>
              {tagsField}
              <div className="form-group">
                <label className="col-sm-2 control-label">{_("Description (optional)")}</label>
                <div className="col-sm-10">
                  <textarea className="form-control" rows="3" value={this.state.descr} onChange={this.handleChange('descr')} />
                </div>
              </div>
              {this.props.showPermissions ? 
                <EditPermissionsPanel 
                    projectId={this.props.projectId}
                    lazyLoad={true}
                    ref={(domNode) => { this.editPermissionsPanel = domNode; }} />
              : ""}
            </FormDialog>
        );
    }
}

export default EditProjectDialog;