// import React from "react";
//
// import { Avatar } from "../Comments/comment.module";
//
// const PostDetails = ({ onCloseModall, post }) => {
//
//
//     console.log(post)
//
//
//     return (
//         <div className="modal">
//             <div className="modal_block">
//                 <button className="close_btn" onClick={onCloseModall}>X</button>
//                 <div className="post_details">
//                     <div>
//                         <img className="pd_img" src={`../${post?.images?.[0]?.url}`} />
//                         <h4>{post?.title}</h4>
//                         <p>{post?.text}</p>
//                     </div>
//                     <div>
//                         <div style={{display:"flex"}}>
//                             <Avatar
//                                 src={
//                                     post?.owner?.avatar?.url
//                                         ? `../${post?.owner?.avatar?.url}`
//                                         : "https://w7.pngwing.com/pngs/336/946/png-transparent-avatar-user-medicine-surgery-patient-avatar-face-heroes-head.png"
//                                 }
//                             />
//                             <h4>{post?.owner?.login}</h4>
//                         </div>
//                         <h4 style={{ margin: 20 }}>Comments</h4>
//                         <div>
//                             {post?.comments?.map((comment) =>
//                                 <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }} key={comment}>
//                                     <Avatar
//                                         src={
//                                             comment.owner?.avatar?.url
//                                                 ? `../${comment.owner?.avatar?.url}`
//                                                 : "https://w7.pngwing.com/pngs/336/946/png-transparent-avatar-user-medicine-surgery-patient-avatar-face-heroes-head.png"
//                                         }
//                                     />
//                                     <span> {comment.text}</span>
//                                 </div>
//                             )}
//
//                         </div>
//                         <h4 style={{ margin: 20 }}>Likes <span>{post?.likes?.length}</span> </h4>
//
//                     </div>
//
//                 </div>
//             </div>
//         </div>
//     );
// };
//
// export default PostDetails;
//
// import React from "react";
// import { Avatar } from "../Comments/comment.module";
// import "./PostDetails.css";
// import {PostTime} from "../PostDraw/post-draw.module"; // Импортируйте CSS-файл для стилей
//
// const PostDetails = ({ onCloseModall, post }) => {
//     console.log(post);
//
//     const timestamp = post?.createdAt;
//     const date = new Date(+timestamp).toString().slice(0, 24);
//
//
//     return (
//         <div className="modal">
//             <div className="modal_block">
//                 <button className="close_btn" onClick={onCloseModall}>
//                     X
//                 </button>
//                 <div className="post_details">
//                     <div className="post_section">
//                         <div className="post_content">
//                             <img className="pd_img" src={`../${post?.images?.[0]?.url}`} />
//                             <div className="post_info">
//                                 <h5 className="likes_title" style={{marginBottom:'15px'}}>
//                                     Likes <span className="likes_count">{post?.likes?.length}</span>
//                                 </h5>
//                                 <h4 className="post_title">{post?.title}</h4>
//                                 <p className="post_text">{post?.text}</p>
//                                 <div style={{marginTop:'20px', fontSize:'14px', color:'grey'}}>{date}</div>
//                             </div>
//                         </div>
//                     </div>
//                     <div className="user_section">
//                         <div className="user_info">
//                             <Avatar
//                                 className="user_avatar"
//                                 src={
//                                     post?.owner?.avatar?.url
//                                         ? `../${post?.owner?.avatar?.url}`
//                                         : "https://w7.pngwing.com/pngs/336/946/png-transparent-avatar-user-medicine-surgery-patient-avatar-face-heroes-head.png"
//                                 }
//                             />
//                             <h4 className="user_login">{post?.owner?.login}</h4>
//                         </div>
//                         <div className="comments_section">
//                             <h4 className="comments_title">Comments</h4>
//                             <div className="comment_list">
//                                 {post?.comments?.map((comment) => (
//                                     <div className="comment" key={comment}>
//                                         <Avatar
//                                             className="comment_avatar"
//                                             src={
//                                                 comment.owner?.avatar?.url
//                                                     ? `../${comment.owner?.avatar?.url}`
//                                                     : "https://w7.pngwing.com/pngs/336/946/png-transparent-avatar-user-medicine-surgery-patient-avatar-face-heroes-head.png"
//                                             }
//                                         />
//                                         <span className="comment_text">{comment.text}</span>
//                                     </div>
//                                 ))}
//                             </div>
//                         </div>
//                     </div>
//                 </div>
//             </div>
//         </div>
//     );
// };
//
// export default PostDetails;


import React, { useState } from "react";
import { Avatar } from "../Comments/comment.module";
import { CommentWrapper, IconComment, CommentBox, StyledButton } from "../PostDraw/post-draw.module";
import "./PostDetails.css";
import { PostTime, ReactionIcon } from "../PostDraw/post-draw.module";
import { getOnePost } from "../../actions";
import { gqlAddLike, gqlDeleteLike } from "../../actions/like";
import Heart from "../../images/heart.png";
import { actionSendComment } from "../../actions";
import { Box } from "@mui/material";

const PostDetails = ({ onCloseModall, post, currentUser, dispatch }) => {

    const [likesAmount, setLikesAmount] = useState(post.likes?.length)
    const [comment, setComment] = useState("");
    const [comments, setComments] = useState(post.comments ?? []);



    const clickLikeHandler = async (event, postId) => {
        try {
            const isLiked = post?.likes.some(
                (like) => like?._id === currentUser._id
            );
            if (isLiked) {
                event.currentTarget.src =
                    "https://cdn-icons-png.flaticon.com/512/1077/1077035.png";
                setLikesAmount((prevLikes) => prevLikes - 1);
                await gqlDeleteLike(postId);
                console.log('post unliked')
            } else {
                event.currentTarget.src = Heart;
                setLikesAmount((prevLikes) => prevLikes + 1);
                await gqlAddLike(postId);
            }
        } catch (error) {
            console.log(error);
        }
    };


    const timestamp = post?.createdAt;
    const date = new Date(+timestamp).toString().slice(0, 24);


    const clickCommentHandler = async (event, postId) => {
        try {
            actionSendComment(postId, comment)
        } catch (e) {
            console.error(e)
        }
        finally {
            setComment('')
        }
    };


    const handlePostComment = (event, postId) => {
        if (comment?.length === 0) {
            alert("Please enter a comment")
        }
        else {
            const newComment = {
                _id: Math.random(),
                text: comment,
                owner: { avatar: { url: currentUser?.avatar?.url } },
            };
            setComments((prevComments) => [...prevComments, newComment]);
            return clickCommentHandler(event, postId)
        }
    };

    return (
        <div className="modal">
            <div className="modal_block">
                <button className="close_btn" onClick={onCloseModall}>
                    X
                </button>
                <div className="post_details">
                    <div className="post_section">
                        <div className="post_content">
                            <img className="pd_img" src={`../${post?.images?.[0]?.url}`} />
                            <div className="post_info">
                                {/*<h5 className="likes_title" style={{marginBottom:'15px'}}>*/}
                                {/*    Likes <span className="likes_count">{post?.likes?.length}</span>*/}
                                {/*</h5>*/}
                                <div className="flex">
                                    <ReactionIcon
                                        src={
                                            post.likes?.some(
                                                (like) => like._id === currentUser._id
                                            )
                                                ? Heart
                                                : "https://cdn-icons-png.flaticon.com/512/1077/1077035.png"
                                        }
                                        alt="like-icon"
                                        onClick={(event) => clickLikeHandler(event, post._id)}
                                    />
                                    <Box style={{ marginRight: "10px" }}>{likesAmount}</Box>
                                </div>

                                <h4 className="post_title">{post?.title}</h4>
                                <p className="post_text">{post?.text}</p>
                                <div style={{ marginTop: '20px', fontSize: '14px', color: 'grey' }}>{date}</div>
                            </div>
                        </div>
                    </div>
                    <div className="user_section">
                        <div className="user_info">
                            <Avatar
                                className="user_avatar"
                                src={
                                    post?.owner?.avatar?.url
                                        ? `../${post?.owner?.avatar?.url}`
                                        : "https://w7.pngwing.com/pngs/336/946/png-transparent-avatar-user-medicine-surgery-patient-avatar-face-heroes-head.png"
                                }
                            />
                            <h4 className="user_login">{post?.owner?.login}</h4>
                        </div>
                        <div className="comments_section">
                            <div className="comment_list">
                                <h4 className="comments_title">Comments</h4>
                                {comments?.map((comment) => (
                                    <div className="comment" key={comment}>
                                        <Avatar
                                            className="comment_avatar"
                                            src={
                                                comment.owner?.avatar?.url
                                                    ? `../${comment.owner?.avatar?.url}`
                                                    : "https://w7.pngwing.com/pngs/336/946/png-transparent-avatar-user-medicine-surgery-patient-avatar-face-heroes-head.png"
                                            }
                                        />
                                        <span className="comment_text">{comment.text}</span>
                                    </div>
                                ))}
                            </div>
                            <CommentWrapper className="comment-wrapper">
                                <IconComment src="https://cdn-icons-png.flaticon.com/512/747/747402.png" />
                                <CommentBox
                                    placeholder="Add a comment"
                                    value={comment}
                                    onChange={(event) => setComment(event.target.value)}
                                    inputProps={{ style: { backgroundColor: "transparent" } }}
                                />
                                <StyledButton onClick={(event) => handlePostComment(event, post._id)}>
                                    post
                                </StyledButton>
                            </CommentWrapper>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default PostDetails;

