import React from 'react'

export type ReplyType = {
  text: string
  votes: string
  username: string
  date: string
  replies?: Array<ReplyType>
  id: string
}

export type CommentType = {
  username: string
  date: string
  text: string
  replies: Array<ReplyType>
  id: string
}

export interface ReplyProps {
  reply: ReplyType
}

export interface RenderChildReplyProps extends ReplyProps {
  RenderChildReply: React.FunctionComponent<RenderChildReplyProps>
}

export interface CommentProps {
  comments: Array<CommentType>
}

/**
 * used by __Reply__ to recursively render comments. It accepts itself
 * in order to recursively render children replies
 */
const RenderReply = ({ reply, RenderChildReply }: RenderChildReplyProps) => (
  <div className='renderReply'>
    <p className='bold'>{reply.username}:</p>
    <p>{reply.text}</p>
    {reply.replies &&
      reply.replies.length > 0 &&
      reply.replies.map(reply => (
        <RenderChildReply reply={reply} RenderChildReply={RenderChildReply} />
      ))}
  </div>
)

/**
 * used by __Comment__ to render each reply made to the main comment
 * if a reply has its own reply, we'll use `RenderReply` to render
 * that reply and pass it to itself to render children replies
 */
const Reply = ({ reply }: ReplyProps) => {
  return (
    <div className='reply'>
      <h3>test</h3>
      <p className='bold'>{reply.username}:</p>
      <p>{reply.text}</p>

      {reply.replies &&
        reply.replies.length > 0 &&
        reply.replies.map(reply => (
          <RenderReply reply={reply} RenderChildReply={RenderReply} />
        ))}
    </div>
  )
}

/**
 * main component which renders the entire comment and child replies
 */
const Comment = ({ comments }: CommentProps) => {
  return (
    <div className='comment'>
      <h1>Comments:</h1>
      {comments.map(comment => {
        return (
          <React.Fragment>
            <h2>Comment:</h2>
            <p className='bold'>{comment.username}:</p>
            <p>{comment.text}</p>

            <h2>{comment.replies.length} replies:</h2>
            {comment.replies.length > 0 &&
              comment.replies.map(reply => (
                <Reply key={reply.id} reply={reply} />
              ))}
          </React.Fragment>
        )
      })}
    </div>
  )
}

export default Comment