'use client';

import { commentsTable, usersTable } from '@/lib/db/schema';

import { Reply } from 'lucide-react';

import styles from '@/styles/components/Comment.module.scss';
import CommentForm from './CommentForm';
import { useState } from 'react';

export type CommentWithReplies = typeof commentsTable.$inferSelect & {
  user: typeof usersTable.$inferSelect | null;
  replies: CommentWithReplies[];
};

export default function Comment({
  comment,
  author,
  isRoot = false
}: {
  comment: CommentWithReplies;
  author: bigint;
  isRoot?: boolean;
}) {
  const displayName =
    comment.displayName ??
    comment.user?.displayName ??
    comment.user?.username ??
    'Unknown User';

  const [open, setOpen] = useState(false);

  return (
    <div className={styles.comment} data-root={isRoot}>
      <div className={styles.content}>
        <div className={styles.userName}>
          <h6>{displayName}</h6>

          {comment.author !== null && comment.author === author && (
            <span>Author</span>
          )}
        </div>

        <p>{comment.content}</p>

        <div className={styles.actions}>
          <button onClick={() => setOpen(!open)}>
            <Reply /> Reply
          </button>
        </div>

        {open && <CommentForm reply={comment.id} post={comment.post!} />}
      </div>

      {comment.replies.length > 0 && (
        <div className={styles.reply}>
          {comment.replies.map((c) => (
            <Comment key={c.id} comment={c} author={author} />
          ))}
        </div>
      )}
    </div>
  );
}