import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
    faCaretUp,
    faCaretDown,
    faCommentAlt,
    faComments,
    faAngleUp,
    faAngleDown
} from '@fortawesome/free-solid-svg-icons';
import {faMessage} from "@fortawesome/free-solid-svg-icons/faMessage";
import {postApi} from "../api/posts.api";

const Post = ({ post, recursionDepth, selectPost, reload }) => {

    const [showComments, setShowComments] = React.useState(false);

    const upvote = () => {
        if (post.reaction === true) {
            revokeVote();
            return;
        }
        postApi.reactToPost(post.id, true).then(reload);
    }
    const downVote = () => {
        if (post.reaction === false) {
            revokeVote();
            return;
        }
        postApi.reactToPost(post.id, false).then(reload);
    }
    const revokeVote = () => {
        postApi.reactToPost(post.id, null).then(reload);
    }

    return (
        <div>
            <div className="post" onClick={() => setShowComments(!showComments)}>
                <div className="post-container">
                    {post.id === post.parent && <div className="post-title">
                        <h3>{post.title}</h3>
                    </div>}
                    <div className="post-content">
                        <p>{post.content}</p>
                    </div>
                </div>
                <div className="nrOfComments">
                    <FontAwesomeIcon className="icon" icon={faComments}/>
                    <span className="">{post.comments.length}</span>
                </div>
                <div className="post-right">
                <div className="post-date">
                        {post.date.slice(8, 10) + "." + post.date.slice(5, 7) + "." + post.date.slice(0, 4)}
                    </div>
                    <div className="row">
                        <div className="votes">
                            <button onClick={(e) => {
                                e.stopPropagation();
                                upvote();
                            }}>
                                {post.reaction === true ? <FontAwesomeIcon icon={faCaretUp}/> : <FontAwesomeIcon icon={faAngleUp} />}
                            </button>
                            <span>{post.reactions.positive - post.reactions.negative}</span>
                            <button onClick={(e) => {
                                e.stopPropagation();
                                downVote();
                            }}>
                                {post.reaction === false ? <FontAwesomeIcon icon={faCaretDown}/> : <FontAwesomeIcon icon={faAngleDown} />}
                            </button>
                        </div>
                    </div>
                    {recursionDepth !== 0 && <button onClick={() => selectPost(post)}>Antworten</button>}
                </div>
            </div>
            <div className="comment">
            {recursionDepth !== 0 && showComments && post.comments.map(post => <Post key={post.id} post={post}
                                                                                         recursionDepth={recursionDepth - 1}
                                                                                         selectPost={selectPost}
                                                                                         reload={reload} />)}
            </div>
        </div>
    )
        ;
};

export default Post;