import React from 'react';
// import { InjectedIntlProps, injectIntl } from 'react-intl';
// import EmptyIcon from '@material-ui/icons/ForumRounded';
// import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
// import Grid from '@material-ui/core/Grid';
// import { connect } from 'react-redux';
// import injectReducer from 'utils/injectReducer';
// import reducer from 'CommentSection/reducer';
// import { compose } from 'redux';
import {
  // ContainerState,
  IComment,
  IUser,
  // RootState,
} from 'CommentSection/types';
// import CommentsSection from 'CommentSection';
// import { withStyles } from '@material-ui/styles';
// import {
//   makeSelectComments, makeSelectUsers, makeSelectThreadId, makeSelectReplyUser,
// } from 'CommentSection/selectors';
// import { createStructuredSelector } from 'reselect';
// import CommentItem from 'CommentSection/components/CommentItem';
// import { AstraTheme } from 'Themes/themes';
// import Typography from '@material-ui/core/Typography';s
// import messages from 'CommentSection/messages';

export interface ICommentsSectionState {
  comments: IComment[];
}

export interface ICommentsSectionProps {
  comments: IComment[];
  users: IUser[];
  threadId: string;
  replyUser: string;
}

// export const StyledEmptyContainer = ({ intl }) => (
//     <div
//       style={{
//         display: 'flex',
//         flexDirection: 'column',
//         textAlign: 'center',
//         alignItems: 'center',
//         padding: 15,
//         // color: AstraTheme.palette.text.hint,
//       }}
//     >
//         <EmptyIcon fontSize="large" />
//         <Typography color="inherit">
//           {/* {intl.formatMessage(messages.emptyStateHeader)} */}
//           EMPTY
//         </Typography>
//         <Grid
//           container={true}
//           spacing={2}
//           justify={'center'}
//           alignItems={'center'}
//         >
//           <Grid item={true}>
//             <Typography color="inherit" variant="caption">
//               {/* {intl.formatMessage(messages.emptyStateHintIntro)} */}
//               EMPTY
//             </Typography>
//           </Grid>
//           <Grid>
//             <Typography color="inherit" variant="caption">
//               {/* {intl.formatMessage(messages.emptyStateHint)} */}
//               EMPTY
//             </Typography>
//           </Grid>
//         </Grid>
//     </div>
// );

export const CommentList = ({ comments }) => {
  const commentList = comments || [];
  return (
    <li>
      {commentList.map((child, key) => {
        return (
          // <CommentItem
          //   comment={child}
          //   key={key}
          //   divider={(key < commentList.length - 1)} // no divider at bottom
          // />
          <Typography style={{}} key={key} >{child.message}</Typography>
          // <p key={key}>{child.message}</p>
        );
      })}
    </li>
  );
};

export type AllProps = ICommentsSectionProps; // & InjectedIntlProps;

export class CommentListElement
  extends React.Component<AllProps, ICommentsSectionState> {

  public render() {
    return (
      <div id="comment_list" style={{ maxWidth: 1200, margin: 'auto' }}>
        {
          this.props.comments.length === 0 ?
            // <StyledEmptyContainer intl={null} /> :
            null :
            <CommentList comments={this.props.comments}/>
        }
      </div>
    );
  }
}

// export const CommentsSectionWithIntl = injectIntl(CommentListElement, { withRef: true });

export default CommentListElement;