import React from 'react';
import cn from 'classnames';
import styles from './Comment.css';
import { t } from 'plugin-api/beta/client/services';
import {
  Slot,
  CommentAuthorName,
  CommentTimestamp,
  CommentContent,
} from 'plugin-api/beta/client/components';
import { Icon } from 'plugin-api/beta/client/components/ui';
import { pluginName } from '../../package.json';
import FeaturedButton from '../containers/FeaturedButton';

class Comment extends React.Component {
  viewComment = () => {
    this.props.viewComment(this.props.comment.id);
  };

  render() {
    const { comment, asset, root, data } = this.props;
    const queryData = { comment, asset, root };
    return (
      <div className={cn(styles.root, `${pluginName}-comment`)}>
        <Slot
          component={'blockquote'}
          className={cn(styles.quote, `${pluginName}-comment-body`)}
          fill="commentContent"
          defaultComponent={CommentContent}
          data={data}
          queryData={queryData}
        />

        <div className={cn(`${pluginName}-comment-username-box`)}>
          <Slot
            className={cn(styles.username, `${pluginName}-comment-username`)}
            fill="commentAuthorName"
            defaultComponent={CommentAuthorName}
            queryData={queryData}
            data={data}
            inline
          />

          <Slot
            fill="commentTimestamp"
            defaultComponent={CommentTimestamp}
            className={cn(styles.timestamp, `${pluginName}-comment-timestamp`)}
            created_at={comment.created_at}
            data={data}
            queryData={queryData}
            inline
          />
        </div>

        <footer className={cn(styles.footer, `${pluginName}-comment-footer`)}>
          <div
            className={cn(
              'talk-embed-stream-comment-actions-container-left',
              styles.reactionsContainer,
              `${pluginName}-comment-reactions`
            )}
          >
            <Slot
              fill="commentReactions"
              root={root}
              data={data}
              comment={comment}
              asset={asset}
              inline
            />

            <FeaturedButton
              root={root}
              data={data}
              comment={comment}
              asset={asset}
            />
          </div>
          <div
            className={cn(
              'talk-embed-stream-comment-actions-container-right',
              styles.actionsContainer,
              `${pluginName}-comment-actions`
            )}
          >
            <button
              className={cn(styles.goTo, `${pluginName}-comment-go-to`)}
              onClick={this.viewComment}
            >
              <Icon name="forum" className={styles.repliesIcon} />{' '}
              {comment.replyCount} |{' '}
              {t('talk-plugin-featured-comments.go_to_conversation')}{' '}
              <Icon name="keyboard_arrow_right" className={styles.goToIcon} />
            </button>
          </div>
        </footer>
      </div>
    );
  }
}

export default Comment;