import React from 'react'

import ReactButton from './reactButton.js'
import Comments from './comments.js'

import styles from './newsEntry.module.css'

export default function NewsEntry({
  newsItem,
  uid,
  onCommentReact,
  onNewsReact,
  onComment,
  onDelete,
  onPostDelete,
}) {
  const { reacts, title, content, user, comments, date, admin } = newsItem

  return (
    <div>
      <div className={`${styles.newsContainer} ${admin && styles.adminPost}`}>
        <div className={styles.newsHeader}>
          <div
            className={styles.newsTitle}
            dangerouslySetInnerHTML={{ __html: title }}
          />
          <div className={styles.user}>
            <div>User #{user}</div>
            <div className={styles.newsDate}>{date}</div>
          </div>
        </div>
        <div
          className={styles.newsBody}
          dangerouslySetInnerHTML={{ __html: content }}
        />
      </div>
      <div className={'actions'}>
        {uid === user ? (
          <span
            onClick={() => {
              onPostDelete()
            }}
          >
            Delete
          </span>
        ) : null}
        <ReactButton
          existingReacts={reacts}
          uid={uid}
          onClick={(reaction, isDelete) => {
            onNewsReact({ reaction, isDelete })
          }}
        />
      </div>
      <Comments
        uid={uid}
        onReact={(path, reaction, isDelete) => {
          onCommentReact({ path, reaction, isDelete })
        }}
        onComment={onComment}
        onDelete={onDelete}
        comments={comments}
      />
      <hr />
      <hr />
    </div>
  )
}