// Libraries
import React, { Component, PropTypes } from 'react';

// Styles
import './_CategoryRow.css';

class CategoryRow extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isCreatingChild: false,
      isEditing: false,
      editingName: props.name,
      editingChildName: ''
    };
  }

  toggleChildren(forceEnable) {
    const {
      id,
      toggleChildren
    } = this.props;
    toggleChildren({id, forceEnable});
  }

  toggleAddSubcategoreis() {
    const { isCreatingChild } = this.state;
    if (!isCreatingChild) {
      this.toggleChildren(true);
    }
    this.setState({
      isCreatingChild: !isCreatingChild,
      editingChildName: ''
    });
  }

  onNameChange(event) {
    this.setState({editingName: event.currentTarget.value});
  }

  onChildNameChange(event) {
    this.setState({editingChildName: event.currentTarget.value});
  }

  toggleEdit() {
    const { isEditing } = this.state;
    this.setState({isEditing: !isEditing});
  }

  getNewId() {
    const { lastId } = this.props;
    return (parseInt(lastId) + 1) + ''; //transform to string
  }

  saveSubcategory() {
    const { id, onSave } = this.props;
    const { editingChildName } = this.state;
    this.setState({isCreatingChild: false});
    console.log(`save children id:${this.getNewId()} parentId:${id} name:${editingChildName}`);
    onSave({
      id: this.getNewId(),
      parentId: id,
      name: editingChildName
    });
  }

  save() {
    const { id, parentId, onSave } = this.props;
    const { editingName } = this.state;
    this.setState({isEditing: false});
    console.log(`save category id:${id} parentId:${parentId} name:${editingName}`);
    onSave({
      id,
      parentId,
      name: editingName
    });
  }

  onRemove() {
    const { id, onRemove } = this.props;
    console.log(`Delete category id:${id}`);
    onRemove(id);
  }

  getPaddingLeft(level) {
    return {paddingLeft: level * 20 + 10};
  }

  render() {
    const {
      name,
      level,
      collapsed,
      articlesCount,
      children
    } = this.props;
    const {
      editingName,
      editingChildName,
      isEditing,
      isCreatingChild
    } = this.state;
    const hasChildren = children && children.length > 0;
    const isRoot = name === 'root';
    const Indicator = !hasChildren ? <span style={{width: 20, display: 'inline-block'}}/> : (
      <span className={`tree-view_arrow${collapsed ? ' tree-view_arrow-collapsed': ''}`} />
    );
    const EditRow = (
      <div className="category-tree-edit-table-row">
        <span className="category-name" style={this.getPaddingLeft(level)}>
          {Indicator}
          <input type="text"
            value={editingName}
            onChange={::this.onNameChange}
            autoFocus={true}
          />
        </span>
        <span className="article-number">{articlesCount}</span>
        <span className="action">
          <a href="#" onClick={::this.toggleEdit}>Cancel</a>
          &nbsp;&nbsp;|&nbsp;&nbsp;
          <a href="#" onClick={::this.save}>Save</a>
        </span>
      </div>
    );
    const ViewRow = (
      <div className="category-tree-edit-table-row">
        <span className="category-name" onClick={::this.toggleChildren} style={this.getPaddingLeft(level)}>
          {Indicator} {name}
        </span>
        <span className="article-number">{articlesCount}</span>
        <span className="action">
          <a href="#" onClick={::this.toggleAddSubcategoreis}>+ Add Child</a>{
            !isRoot ? [
              <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>,,
              <a href="#" onClick={::this.toggleEdit}>Edit</a>
            ]: null
          }

          {
            !isRoot && !hasChildren ? [
              <span> &nbsp;&nbsp;|&nbsp;&nbsp;</span>,
              <a href="#" onClick={::this.onRemove}>Remove</a>
            ] : null
          }
        </span>
      </div>
    );
    const CreatingSubCategory = (
      <div>
        { ViewRow }
        <div className="category-tree-edit-table-row">
          <span style={this.getPaddingLeft(level + 2)} className="category-name">
            <input
              type="text"
              value={editingChildName}
              onChange={::this.onChildNameChange}
              autoFocus={true}
            />
          </span>
          <span className="article-number">{articlesCount}</span>
          <span className="action">
            <a href="#" onClick={::this.toggleAddSubcategoreis}>Cancel</a>
            &nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="#" onClick={::this.saveSubcategory}>Add</a>
          </span>
        </div>
      </div>
    );

    return isCreatingChild ? CreatingSubCategory :
      isEditing ? EditRow : ViewRow;
  }
}

CategoryRow.propTypes = {
  id                  : PropTypes.string,
  parentId            : PropTypes.string,
  lastId              : PropTypes.string,
  name                : PropTypes.string,
  level               : PropTypes.number,
  collapsed              : PropTypes.bool,
  children            : PropTypes.array,
  toggleChildren      : PropTypes.func,
  onSave              : PropTypes.func,
  onRemove            : PropTypes.func,
  articlesCount        : PropTypes.number
};

CategoryRow.defaultProps = {
  level               : 0,
  collapsed              : false
};

export default CategoryRow;

@@ -1269,104 +1269,8 @@
 %7D);%0A
-    console.log(%60save children id:$%7Bthis.getNewId()%7D parentId:$%7Bid%7D name:$%7BeditingChildName%7D%60);%0A
     
@@ -1270,32 +1270,32 @@
 );%0A    onSave(%7B%0A
+
       id: this.g
@@ -1510,92 +1510,8 @@
 %7D);%0A
-    console.log(%60save category id:$%7Bid%7D parentId:$%7BparentId%7D name:$%7BeditingName%7D%60);%0A
     
@@ -1593,24 +1593,24 @@
 nRemove() %7B%0A
+
     const %7B 
@@ -1642,53 +1642,8 @@
 ps;%0A
-    console.log(%60Delete category id:$%7Bid%7D%60);%0A
     

remove console.log