import React from 'react'

import ReactButton from './reactButton.js'
import Comments from './comments.js'
import Link from 'next/link'

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
  const dateObj = new Date(date)

  return (
    <div className={styles.newsRoot}>
      <div
        className={`${styles.newsContainer} ${admin && styles.adminPost}  ${
          !admin && styles.userPost
        }  ${uid === user && styles.ownPost} ${
          uid === user && admin && styles.adminPost
        }`}
      >
        <div className={styles.newsHeader}>
          <div className={styles.newsTitle}>{title}</div>
          <div className={styles.userinfo}>
            <Link href={`/chat?user=${user}`}>
              <a title={`Chat #${user}-el`} className={'userId'}>
                User #{user}
              </a>
            </Link>
            <div className={styles.newsDate} title={dateObj.toLocaleString()}>
              @
              {dateObj.getDate() !== new Date().getDate()
                ? dateObj.toLocaleDateString()
                : dateObj.toLocaleTimeString()}
            </div>
          </div>
        </div>
        {admin ? (
          <div
            className={styles.newsBody}
            dangerouslySetInnerHTML={{ __html: content }}
          />
        ) : (
          <div className={styles.newsBody}>{content}</div>
        )}
      </div>
      <div className={'actions'}>
        <Comments
          uid={uid}
          onReact={(path, reaction, isDelete) => {
            onCommentReact({ path, reaction, isDelete })
          }}
          onComment={onComment}
          onDelete={onDelete}
          comments={comments}
        />
        {uid === user ? (
          <span
            onClick={() => {
              onPostDelete()
            }}
          >
            Törlés
          </span>
        ) : null}
        <ReactButton
          existingReacts={reacts}
          uid={uid}
          onClick={(reaction, isDelete) => {
            onNewsReact({ reaction, isDelete })
          }}
        />
      </div>
    </div>
  )
}