import React from 'react';
import PropTypes from 'prop-types';

import { createSubscribedElement } from '../UnstatedUtils';
import AppContainer from '../../services/AppContainer';
import UserPicture from '../User/UserPicture';

import CommentEditor from './CommentEditor';

class CommentEditorLazyRenderer extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      isEditorShown: false,
    };

    this.growiRenderer = this.props.appContainer.getRenderer('comment');

    this.showCommentFormBtnClickHandler = this.showCommentFormBtnClickHandler.bind(this);
  }

  showCommentFormBtnClickHandler() {
    this.setState({ isEditorShown: !this.state.isEditorShown });
  }

  render() {
    const { appContainer } = this.props;
    const user = appContainer.currentUser;
    const isLoggedIn = user != null;

    if (!isLoggedIn) {
      return <React.Fragment></React.Fragment>;
    }

    return (
      <React.Fragment>

        { !this.state.isEditorShown && (
          <div className="form page-comment-form">
            <div className="comment-form">
              <div className="comment-form-user">
                <UserPicture user={user} />
              </div>
              <div className="comment-form-main">
                { !this.state.isEditorShown && (
                  <button
                    type="button"
                    className="btn btn-lg btn-link center-block"
                    onClick={this.showCommentFormBtnClickHandler}
                  >
                    <i className="icon-bubble"></i> Add Comment
                  </button>
                ) }
              </div>
            </div>
          </div>
        ) }

        { this.state.isEditorShown && (
          <CommentEditor
            growiRenderer={this.growiRenderer}
            replyTo={undefined}
            commentButtonClickedHandler={this.showCommentFormBtnClickHandler}
          >
          </CommentEditor>
        ) }

      </React.Fragment>
    );
  }

}

/**
 * Wrapper component for using unstated
 */
const CommentEditorLazyRendererWrapper = (props) => {
  return createSubscribedElement(CommentEditorLazyRenderer, props, [AppContainer]);
};

CommentEditorLazyRenderer.propTypes = {
  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
};

export default CommentEditorLazyRendererWrapper;