tr_playlist component

var MyPlaylistsActions = require('../../actions/my-playlists-actions');
var ShareActions = require('../../actions/share-actions');


var MyPlaylistsTrPlaylist = React.createClass({
  getInitialState: function() {
    return {
      title: this.props.playlist.title,
      subtitle: this.props.playlist.subtitle,
      editTitle: false,
      shares_count: this.props.playlist.shares_count,
      share_type: this.props.playlist.share_type,
      able_to_write: (this.props.playlist.access != "all_for_reading" || this.props.playlist.i_am_owner)
    };
  },
  componentWillReceiveProps: function(nextProps) {
    if (nextProps.newSharesCount && nextProps.newSharesCount.id == this.props.playlist.id) {
      this.setState({
        shares_count: nextProps.newSharesCount.changedPlaylistSharesCount
      })
    }
    if (nextProps.playlist.share_type != this.state.share_type) {
      this.setState({
        share_type: this.props.playlist.share_type
      })
    }
  },


  handleRemoveClick: function() {
    if (confirm(transl('my_playlists.index.will_delete.playlist')))
      MyPlaylistsActions.deletePlaylist(this.props.playlist.hash, this.props.playlist.folder_id);
  },

  handleEditClick: function() {
    console.log('this.props.playlist.access', this.props.playlist.access);
    this.setState({
      editTitle: true,
      newPlaylistTitle: this.state.title,
      newPlaylistSubTitle: this.state.subtitle
    }, function() {
      this.refs.newPlaylistTitle.getDOMNode().focus();
    });
  },

  handleShareClick: function () {
    ShareActions.openDialog("playlist", this.props.playlist.id)
  },

  handleEditTitleFormSubmit: function (e) {
    var newTitle = this.refs.newPlaylistTitle.getDOMNode().value.trim();
    e.preventDefault();
    if (newTitle === ""){
      this.refs.newPlaylistTitle.getDOMNode().focus();
      return;
    }
    if (this.state.title !=this.state.newPlaylistTitle || this.state.subtitle !=this.state.newPlaylistSubTitle) {
      console.log('this.props.playlist.id', this.props.playlist.id);
      MyPlaylistsActions.updatePlaylist(this.state.newPlaylistTitle, this.state.newPlaylistSubTitle, this.props.playlist.id);
    }
    this.setState({
      editTitle: false,
      title: this.refs.newPlaylistTitle.getDOMNode().value,
      subtitle: this.refs.newPlaylistSubTitle.getDOMNode().value
    })
  },

  getShareName: function(share_type) {
    switch (share_type) {
      case 0:
       return transl('my_playlists.index.sharing.access.false');
        break;
      case 1:
        return transl('my_playlists.index.sharing.access.team');
        break;
      case 2:
        return transl('my_playlists.index.sharing.access.true');
        break;
    }
  },
  getCreatedByName: function(createdBy) {
    if (createdBy == "Me"){
      return transl('my_playlists.index.creator_me');
    } else {
      return createdBy;
    }
  },


  handleNewTitleChange: function(e) {
    if (e.target.value.length < 100) {
      this.setState({ newPlaylistTitle: e.target.value });
    }
  },
  handleNewTitleFocus: function(e) {
    e.target.value = e.target.value;
  },
  handleNewSubTitleChange: function(e) {
    if (e.target.value.length < 100) {
      this.setState({ newPlaylistSubTitle: e.target.value });
    }
  },
  handleNewSubTitleFocus: function(e) {
    e.target.value = e.target.value;
  },

  handleAccessClick: function(share_type) {
    if (this.state.share_type != share_type) {
      MyPlaylistsActions.setShareType(this.props.playlist.hash, share_type, "playlist");
      this.setState({ share_type: share_type });
    }
  },

  renderSelect: function() {
    if (this.props.playlist.created_by == "Me"){
      return (
        <div className="my-playlists__fake-select">
          <span className="my-playlists__fake-button">
            <span className="my-playlists__fake-button-text">{this.getShareName(this.state.share_type)}</span>
          </span>
          <ul className="my-playlists__fake-list hide">
            <li className="my-playlists__fake-item" onClick={this.handleAccessClick.bind(this, 0)}>{this.getShareName(0)}</li>
            <li className="my-playlists__fake-item" onClick={this.handleAccessClick.bind(this, 2)}>{this.getShareName(2)}</li>
            <li className="my-playlists__fake-item" onClick={this.handleAccessClick.bind(this, 1)}>{this.getShareName(1)}</li>
          </ul>
        </div>
      );
    } else {
      return (
        <div className="my-playlists__fake-select"></div>
      );
    }
  },

  renderTitle: function() {
    if (this.state.subtitle && this.state.subtitle.length > 0){
      var dash = " - ";
    } else {
      var dash = "";
    }

    var titleLink = <a className="my-playlists__folder-name"
                        href={window.location.origin + this.props.playlist.href}
                        target="_blank">
                      {this.refs.newPlaylistTitle ? this.refs.newPlaylistTitle.getDOMNode().value : this.state.title}
                      {dash}
                      {this.refs.newPlaylistSubTitle ? this.refs.newPlaylistSubTitle.getDOMNode().value : this.state.subtitle}
                    </a>;

    if ((this.state.title + dash + this.state.subtitle).length > 25) {
      return (
        <span className="my-playlists__name-wrapper css3-tooltip-trigger"
              data-title={this.state.title + dash + this.state.subtitle}
              data-pos="top">
          {titleLink}
        </span>
      );
    } else {
      return (
        <span className="my-playlists__name-wrapper">
          {titleLink}
        </span>
      );
    }
  },
  renderTitleForm: function() {
    return (
      <div className="video-title-edit-block">
        <form className="video-title-form" onSubmit={this.handleEditTitleFormSubmit}>
          <div className="video-title-control-wrapper">
            <input type="text"
                    className="video-title-control"
                    value={this.state.newPlaylistTitle}
                    onChange={this.handleNewTitleChange}
                    onFocus={this.handleNewTitleFocus}
                    ref="newPlaylistTitle" />
            <input type="text"
                    className="video-title-control"
                    value={this.state.newPlaylistSubTitle}
                    onChange={this.handleNewSubTitleChange}
                    onFocus={this.handleNewSubTitleFocus}
                    ref="newPlaylistSubTitle" />
          </div>
          <button type="submit" className="video-title-btn">OK</button>
        </form>
      </div>
    );
  },


  render: function() {
    var cellClassName = "my-playlists__table-body-cell";
    if (this.props.isSubfolder)
      cellClassName += " my-playlists__folder-container_subfolder";
    var removeTitle = transl('comments_templates.comments_template.remove');
    var shareTitle = transl('video.episode.share');
    var copyTitle = transl('my_playlists.index.sharing.link');
    var editLink = <span className="my-playlists__edit-icon" href="#" onClick={this.handleEditClick}></span>;
    var shareLink = <span className="my-playlists__share-icon css3-tooltip-trigger" data-title={shareTitle} data-pos="top" onClick={this.handleShareClick}></span>;
    var playlist_url = window.location.href + '/' +  this.props.playlist.hash;
    return (
       <tr className="my-playlists__table-body-row" data-playlist-id={this.props.playlist.id}>
        <td className={cellClassName}>
          <div className="my-playlists__playlist-container">
            <span className="my-playlists__playlist-icon"></span>
            {this.state.editTitle ? this.renderTitleForm() : this.renderTitle()}
            <div className="my-playlists__icons-grp">
              {(!this.state.editTitle && this.state.able_to_write) ? editLink : <span></span>}
            </div>
          </div>
        </td>
        <td className="my-playlists__table-body-cell">
          <div className="my-playlists__cell-container my-playlists__icons-grp">
            {this.props.playlist.can_share ? shareLink : <span></span>}
            {(this.props.playlist.i_am_owner && this.state.share_type != 0) ? <span className="my-playlists__link-icon css3-tooltip-trigger" data-title={copyTitle} data-pos="top" data-role="myPlaylistCopyLink" data-clipboard-text={playlist_url}></span> : <span></span>}
            <span className="my-playlists__trash-icon css3-tooltip-trigger" data-title={removeTitle} data-pos="top" onClick={this.handleRemoveClick}></span>
          </div>
        </td>
        <td className="my-playlists__table-body-cell"> {this.props.playlist.episodes_count} </td>
        <td className="my-playlists__table-body-cell"> {this.props.playlist.duration} </td>
        <td className="my-playlists__table-body-cell">{this.getCreatedByName(this.props.playlist.created_by)}</td>
        <td className="my-playlists__table-body-cell">{this.props.playlist.date}</td>
        <td className="my-playlists__table-body-cell">
          <div className="my-playlists__cell-container">
            {this.renderSelect()}
          </div>
        </td>
        <td className="my-playlists__table-body-cell"> {this.state.shares_count} </td>
      </tr>
    );
  }
});


module.exports = MyPlaylistsTrPlaylist;