text: import React from 'react';
  import cn from 'classnames';
  import PropTypes from 'prop-types';
  import styles from './UserDetailCommentList.css';
  import LoadMore from '../components/LoadMore';
  import Comment from '../containers/UserDetailComment';
  import RejectButton from './RejectButton';
  import ApproveButton from './ApproveButton';
  
  const UserDetailCommentList = props => {
    const {
      root,
      root: {
        user,
        comments: { nodes, hasNextPage },
      },
      acceptComment,
      rejectComment,
      selectedCommentIds,
      toggleSelect,
      viewUserDetail,
      loadMore,
      toggleSelectAll,
      bulkAcceptThenReload,
      bulkRejectThenReload,
    } = props;
  
    return (
      <div
        className={cn(styles.commentList, 'talk-admin-user-detail-comment-list')}
      >
        <div
          className={
            selectedCommentIds.length > 0
              ? cn(styles.bulkActionHeader, styles.selected)
              : styles.bulkActionHeader
          }
        >
          {selectedCommentIds.length > 0 && (
            <div className={styles.bulkActionGroup}>
              <ApproveButton onClick={bulkAcceptThenReload} minimal />
              <RejectButton onClick={bulkRejectThenReload} minimal />
              <span className={styles.selectedCommentsInfo}>
                {' '}
                {selectedCommentIds.length} comments selected
              </span>
            </div>
          )}
  
          <div className={styles.toggleAll}>
            <input
              type="checkbox"
              id="toogleAll"
              checked={
                selectedCommentIds.length > 0 &&
                selectedCommentIds.length === nodes.length
              }
              onChange={e => {
                toggleSelectAll(
                  nodes.map(comment => comment.id),
                  e.target.checked
                );
              }}
            />
            <label htmlFor="toogleAll">Select all</label>
          </div>
        </div>
        {nodes.map(comment => {
          const selected = selectedCommentIds.indexOf(comment.id) !== -1;
          return (
            <Comment
              key={comment.id}
              user={user}
              root={root}
              comment={comment}
              acceptComment={acceptComment}
              rejectComment={rejectComment}
              selected={selected}
              toggleSelect={toggleSelect}
              viewUserDetail={viewUserDetail}
            />
          );
        })}
        <LoadMore
          className={styles.loadMore}
          loadMore={loadMore}
          showLoadMore={hasNextPage}
        />
      </div>
    );
  };
  
  UserDetailCommentList.propTypes = {
    root: PropTypes.object.isRequired,
    acceptComment: PropTypes.func.isRequired,
    rejectComment: PropTypes.func.isRequired,
    selectedCommentIds: PropTypes.array.isRequired,
    viewUserDetail: PropTypes.any.isRequired,
    loadMore: PropTypes.any.isRequired,
    toggleSelect: PropTypes.func.isRequired,
    toggleSelectAll: PropTypes.func.isRequired,
    bulkAcceptThenReload: PropTypes.func.isRequired,
    bulkRejectThenReload: PropTypes.func.isRequired,
  };
  
  export default UserDetailCommentList;
  