import React from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { useMulti } from '../../lib/crud/withMulti';

const styles = (theme: ThemeType): JssStyles => ({
  icon: {
    marginRight: 4
  }
})


const AFSuggestCommentsList = ({ classes }: {
  classes: ClassesType,
}) => {
  const { results, loadMoreProps } = useMulti({
    terms: {view:"alignmentSuggestedComments"},
    enableTotal: true, itemsPerPage: 30,
    collectionName: "Comments",
    fragmentName: 'SuggestAlignmentComment',
    fetchPolicy: 'cache-and-network',
  });
  const { SunshineListTitle, OmegaIcon, AFSuggestCommentsItem, LoadMore } = Components;
  
  if (results && results.length) {
    return <div>
      <SunshineListTitle>
        <div><OmegaIcon className={classes.icon}/> Suggested Comments</div>
      </SunshineListTitle>
      {results.map(comment =>
        <div key={comment._id} >
          <AFSuggestCommentsItem comment={comment}/>
        </div>
      )}
      <LoadMore {...loadMoreProps}/>
    </div>
  } else {
    return null
  }
}

const AFSuggestCommentsListComponent = registerComponent('AFSuggestCommentsList', AFSuggestCommentsList, {styles});

declare global {
  interface ComponentTypes {
    AFSuggestCommentsList: typeof AFSuggestCommentsListComponent
  }
}


{'avg_line_length': 26.632653061224488, 'max_line_length': 115, 'alphanum_fraction': 0.6689655172413793, 'licenses': ['MIT'], 'repository_name': 'Discordius/Lesswrong2', 'path': 'packages/lesswrong/components/sunshineDashboard/AFSuggestCommentsList.tsx', 'size': 1305, 'lang': 'TypeScript'}