import React, {useEffect, useState} from 'react';
import PostCommentList from './components/PostCommentList';
import NewPostForm from './components/NewPostForm';
import './App.scss';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faTimes} from "@fortawesome/free-solid-svg-icons";
import {postApi} from "./api/posts.api";
import {locationUtils} from "./utils/location";
import PostComment from "./components/PostComment";
import keycloak from "./Authentification/Keycloak";

const App = () => {
    const [posts, setPosts] = useState([]);
    const [comments, setComments] = useState([]);
    const [selectedPost, setSelectedPost] = useState(null);
    const [comment, setComment] = useState('');

    useEffect(() => {
        if(posts.length === 0) {
            reload().then(null);
        }
    });

    useEffect(() => {
        if(selectedPost) {
            setSelectedPost(posts.find(post => post.id === selectedPost.id));
        }
        console.log(posts);
    }, [posts]);

    useEffect(() => {
        if(selectedPost) {
            setComments(selectedPost.comments);
        }
    }, [selectedPost]);

    const reload = async () => {
        await loadPosts().then(data => {
            setPosts(data);
        });
    }

    const loadPosts = async () => {
        const location = await locationUtils.getCurrentLocation();
        return await postApi.getPostsByCoords(location.lon, location.lat);
    }

    const addPost = async (title, text) => {
        await postApi.createNewPost(title, text);
        await reload();
    };

    const addComment = async (postId, commentText) => {
        await postApi.createNewPost("", commentText, postId).then(await reload);
    };

    const vote = (postId, reaction) => {
        // TODO postApi.reactToPost(postId)
        console.log(postId, reaction);
    };

    const handlePostClick = (post) => {
        setSelectedPost(post);
    };

    const handleCommentSubmit = async (e) => {
        e.preventDefault();
        if (comment.trim() && selectedPost) {
            await addComment(selectedPost.id, comment);
            setComment('');
            await reload();
            handlePostClick(selectedPost);
        }
    };

    const closePost = () => {
        setSelectedPost(null);
        setComment('');
    };

    return (
        <div className="app">
            <button onClick={() => keycloak.logout()}>Logout</button>
            <h1>SWA - Jodel</h1>
            {!selectedPost && (
                <div>
                    <NewPostForm addPost={addPost}/>
                    <PostCommentList
                        posts={posts}
                        addComment={addComment}
                        vote={vote}
                        onPostClick={handlePostClick}
                        type={"posts"}
                    />
                </div>
            )}
            {selectedPost && (
                <div className="single-post-view">
                    <div className="close-post">
                        <FontAwesomeIcon className={"close-button"} onClick={closePost} icon={faTimes}/>
                    </div>
                    <PostComment post={selectedPost} vote={vote} type={"post"}></PostComment>
                    <form className="comment-form" onSubmit={handleCommentSubmit}>
                        <div className="textarea-container">
                            <textarea
                                rows={15}
                                value={comment}
                                onChange={(e) => setComment(e.target.value)}
                                placeholder="Kommentieren..."
                                maxLength={500}
                            />
                            <div className="char-count-container">
                                <span className={comment.length === 500 ? "char-count max-char-count" : "char-count"}>
                                    {comment.length} / 500
                                </span>
                            </div>
                        </div>
                        <button type="submit">Kommentieren</button>
                    </form>
                    <div className="comments">
                        {comments && <PostCommentList posts={comments} onPostClick={null} vote={vote}
                                                      type={"comments"}></PostCommentList>}
                    </div>
                </div>
            )}
        </div>
    );
}

export default App;