import React, { useState } from 'react'

import ReactButton from './reactButton.js'

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

function CommentInput({ onSubmit }) {
  const [val, setVal] = useState('')
  return (
    <div className={styles.commentAreaContainer}>
      <textarea
        autoFocus
        className={styles.commentArea}
        value={val}
        onChange={(e) => {
          setVal(e.target.value)
        }}
      />
      <div>
        <span
          onClick={() => {
            onSubmit(val)
          }}
          className={styles.button}
        >
          Submit
        </span>
      </div>
    </div>
  )
}

function Comment({ comment, index, onComment, onDelete, onReact, uid }) {
  const [displayed, setDisplayed] = useState(true)
  const [commenting, setCommenting] = useState(false)
  const { text, subComments, date, user, reacts, adminComment } = comment
  const own = uid === user

  const commentStyle = adminComment
    ? styles.adminComment
    : own
    ? styles.ownComment
    : ''

  return (
    <div className={styles.comment}>
      <div className={`${styles.commentData} ${commentStyle}`}>
        <div className={styles.commentHeader}>
          <div className={styles.userContainer}>
            <div
              className={styles.showHide}
              onClick={() => {
                setDisplayed(!displayed)
              }}
            >
              {displayed ? '[-]' : '[+]'}
            </div>
            <div>User #{user}</div>
          </div>
          <div>{date}</div>
        </div>
        <div className={`${!displayed && styles.hidden}`}>
          <div className={styles.commentText}> {text}</div>
          <div className={styles.actionsContainer}>
            <div
              className={styles.button}
              onClick={() => {
                setCommenting(true)
              }}
            >
              Reply...
            </div>
            {own && (
              <div
                className={styles.button}
                onClick={() => {
                  onDelete([index])
                }}
              >
                Delete
              </div>
            )}
            <ReactButton
              onClick={(reaction, isDelete) => {
                onReact([index], reaction, isDelete)
              }}
              uid={uid}
              existingReacts={reacts}
            />
          </div>
          {commenting && (
            <CommentInput
              onSubmit={(e) => {
                onComment([index], e)
                setCommenting(false)
              }}
            />
          )}
        </div>
      </div>
      <div className={`${!displayed && styles.hidden}`}>
        {subComments &&
          subComments.map((sc, i) => {
            return (
              <Comment
                comment={sc}
                onReact={(path, reaction, isDelete) => {
                  onReact([...path, index], reaction, isDelete)
                }}
                onDelete={(path) => {
                  onDelete([...path, index])
                }}
                onComment={(path, text) => {
                  onComment([...path, index], text)
                }}
                index={i}
                key={i}
                uid={uid}
              />
            )
          })}
      </div>
    </div>
  )
}

export default function Comments({
  comments,
  onComment,
  onDelete,
  onReact,
  uid,
}) {
  const [addingNewComment, setAddingNewComment] = useState(false)
  return (
    <div>
      {comments && comments.length > 0 ? (
        comments.map((comment, i) => {
          return (
            <Comment
              onReact={onReact}
              onComment={onComment}
              onDelete={onDelete}
              comment={comment}
              index={i}
              key={i}
              uid={uid}
            />
          )
        })
      ) : (
        <div>
          <div>No comments yet</div>
        </div>
      )}
      {addingNewComment ? (
        <CommentInput
          onSubmit={(e) => {
            setAddingNewComment(false)
            onComment([], e)
          }}
        />
      ) : (
        <span
          onClick={() => {
            setAddingNewComment(true)
          }}
          className={styles.button}
        >
          Add new
        </span>
      )}
    </div>
  )
}