// import { useState, useEffect } from "react";
// import { connect, useStore, useDispatch } from "react-redux";
// import { gqlAddLike, gqlDeleteLike } from "../../actions/like";
// import Comments from "../Comments";
// import "../../App.css";
// import Dots from "../../images/more.png";
// import Heart from "../../images/heart.png";
// import { actionSendComment, getOnePost } from "../../actions";
// import {
//   Post,
//   Info,
//   User,
//   Avatar,
//   Icon,
//   PostImage,
//   PostContent,
//   ReactionWrapper,
//   Description,
//   ReactionIcon,
//   PostTime,
//   CommentWrapper,
//   CommentBox,
//   IconComment,
//   StyledButton,
// } from "./post-draw.module";
// import { Link, Box } from "@mui/material";
// import {updatePost} from "../../actions/postEdite";
//
// const PostDraw = ({ post, currentUser }) => {
//
//   const store = useStore();
//   const dispatch = useDispatch();
//   const [comment, setComment] = useState("");
//   const [comments, setComments] = useState(post.comments ?? []);
//   const [likesAmount, setLikesAmount] = useState(post.likes?.length);
//   const [isExistComments, setIsExistComments] = useState(false);
//   const [isShowExtendedComments, setIsShowExtendedComments] = useState(false);
//   let timestamp = post?.createdAt;
//   let date = new Date(+timestamp).toString().slice(0, 24);
//
//   useEffect(() => {
//     if (post.comments?.length > 0) {
//       setIsExistComments(true);
//     } else {
//       setIsExistComments(false);
//     }
//   }, []);
//
//   const clickCommentHandler = async (event, postId) => {
//     await actionSendComment(postId, comment)(dispatch);
//     setComments((prevComments) =>
//       comment.length > 0
//         ? prevComments.concat({
//             _id: Math.random(),
//             text: comment,
//             owner: { avatar: { url: currentUser.avatar?.url } },
//           })
//         : prevComments
//     );
//     setComment("");
//     setIsExistComments(true);
//   };
//
//
//   const clickLikeHandler = async (event, postId) => {
//     const currentPost = (await getOnePost(post._id)(dispatch)).data.PostFindOne;
//     const isLiked = currentPost.likes.some(
//         (like) => like.owner._id === store.getState().auth.payload.id
//     );
//     if (isLiked) {
//       event.target.src =
//           "https://cdn-icons-png.flaticon.com/512/1077/1077035.png";
//       const likeId = currentPost.likes.find(
//           (like) => like.owner._id === currentUser._id
//       );
//       gqlDeleteLike(likeId._id, postId);
//     } else {
//       event.target.src = Heart;
//       gqlAddLike(postId);
//     }
//     setLikesAmount(
//         isLiked ? currentPost.likes.length - 1 : currentPost.likes.length + 1
//     );
//   };
//
//   return (
//     <Post>
//       <Info>
//         <User>
//           <Box>
//             <Link href={`user/${post?.owner?._id}`}>
//               <Avatar src={post?.owner?.avatar?.url} />
//             </Link>
//           </Box>
//           <Link href={`user/${post?.owner?._id}`}>
//             <Box
//               sx={{
//                 width: "auto",
//                 fontWeight: "bold",
//                 color: "#000",
//                 fontSize: "14px",
//                 marginLeft: "10px",
//               }}
//             >
//               {post?.owner?.login}
//             </Box>
//           </Link>
//         </User>
//         <Icon src={Dots} />
//       </Info>
//       <PostImage src={post?.images?.[0]?.url} />
//       <PostContent>
//         <ReactionWrapper>
//           <ReactionIcon
//             src={
//               post.likes?.some(
//                 (like) => like.owner._id === store.getState().auth.payload.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>
//           <ReactionIcon
//             src="https://cdn-icons-png.flaticon.com/512/2462/2462719.png"
//             alt="comment-icon"
//             onClick={() => setIsShowExtendedComments((prevState) => !prevState)}
//           />
//         </ReactionWrapper>
//         <Description>{post?.text}</Description>
//         {isExistComments && (
//           <Comments
//             comments={comments}
//             currentUser={currentUser}
//             isShowExtendedComments={isShowExtendedComments}
//             setIsShowExtendedComments={setIsShowExtendedComments}
//
//           />
//         )}
//
//        <PostTime>{date}</PostTime>
//       </PostContent>
//       <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) => clickCommentHandler(event, post._id)}>
//           post
//         </StyledButton>
//       </CommentWrapper>
//     </Post>
//   );
// };
//
// export const ConnectPostDraw = connect(null, { posts: PostDraw })(PostDraw);
//
// import { useState, useEffect } from "react";
// import { connect, useStore, useDispatch } from "react-redux";
// import { gqlAddLike, gqlDeleteLike } from "../../actions/like";
// import Comments from "../Comments";
// import "../../App.css";
// import Dots from "../../images/more.png";
// import Heart from "../../images/heart.png";
// import { actionSendComment, getOnePost } from "../../actions";
// import { Post, Info, User, Avatar, Icon, PostImage, PostContent, ReactionWrapper, Description, ReactionIcon, PostTime, CommentWrapper, CommentBox, IconComment, StyledButton } from "./post-draw.module";
// import { Link, Box } from "@mui/material";
// import { updatePost } from "../../actions/postEdite";
//
// const PostDraw = ({ post, currentUser }) => {
//   const store = useStore();
//   const dispatch = useDispatch();
//   const [comment, setComment] = useState("");
//   const [comments, setComments] = useState(post.comments ?? []);
//   const [likesAmount, setLikesAmount] = useState(post.likes?.length);
//   const [isExistComments, setIsExistComments] = useState(false);
//   const [isShowExtendedComments, setIsShowExtendedComments] = useState(false);
//   const timestamp = post?.createdAt;
//   const date = new Date(+timestamp).toString().slice(0, 24);
//
//   useEffect(() => {
//     setIsExistComments(post.comments?.length > 0);
//   }, [post.comments]);
//
//   const clickCommentHandler = async (event, postId) => {
//     await actionSendComment(postId, comment)(dispatch);
//     setComments((prevComments) =>
//         comment.length > 0
//             ? prevComments.concat({
//               _id: Math.random(),
//               text: comment,
//               owner: { avatar: { url: currentUser.avatar?.url } },
//             })
//             : prevComments
//     );
//     setComment("");
//     setIsExistComments(true);
//   };
//
//
//   const clickLikeHandler = async (event, postId) => {
//     const currentPost = (await getOnePost(post._id)(dispatch)).data.PostFindOne;
//     const isLiked = currentPost.likes.some(
//         (like) => like.owner._id === store.getState().auth.payload.id
//     );
//     if (isLiked) {
//       event.target.src =
//           "https://cdn-icons-png.flaticon.com/512/1077/1077035.png";
//       const likeId = currentPost.likes.find(
//           (like) => like.owner._id === currentUser._id
//       );
//       gqlDeleteLike(likeId._id, postId);
//     } else {
//       event.target.src = Heart;
//       gqlAddLike(postId);
//     }
//     setLikesAmount(
//         isLiked ? currentPost.likes.length - 1 : currentPost.likes.length + 1
//     );
//   };
//
//   return (
//       <Post>
//         <Info>
//           <User>
//             <Box>
//               <Link href={`user/${post?.owner?._id}`}>
//                 <Avatar src={post?.owner?.avatar?.url} />
//               </Link>
//             </Box>
//             <Link href={`user/${post?.owner?._id}`}>
//               <Box
//                   sx={{
//                     width: "auto",
//                     fontWeight: "bold",
//                     color: "#000",
//                     fontSize: "14px",
//                     marginLeft: "10px",
//                   }}
//               >
//                 {post?.owner?.login}
//               </Box>
//             </Link>
//           </User>
//           <Icon src={Dots} />
//         </Info>
//         <PostImage src={post?.images?.[0]?.url}/>
//         <PostContent>
//           <ReactionWrapper>
//             <ReactionIcon
//                 src={
//                   post.likes?.some(
//                       (like) => like.owner._id === store.getState().auth.payload.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>
//             <ReactionIcon
//                 src="https://cdn-icons-png.flaticon.com/512/2462/2462719.png"
//                 alt="comment-icon"
//                 onClick={() =>
//                     setIsShowExtendedComments((prevState) => !prevState)
//                 }
//             />
//           </ReactionWrapper>
//           <Description>{post?.text}</Description>
//           {isExistComments && (
//               <Comments
//                   comments={comments}
//                   currentUser={currentUser}
//                   isShowExtendedComments={isShowExtendedComments}
//                   setIsShowExtendedComments={setIsShowExtendedComments}
//               />
//           )}
//           <PostTime>{date}</PostTime>
//         </PostContent>
//         <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) => clickCommentHandler(event, post._id)}>
//             post
//           </StyledButton>
//         </CommentWrapper>
//       </Post>
//   );
// };
//
// export const ConnectPostDraw = connect(null, { posts: PostDraw })(PostDraw);

import { useState, useEffect } from "react";
import { connect } from "react-redux";
import { gqlAddLike, gqlDeleteLike } from "../../actions/like";
import Comments from "../Comments";
import "../../App.css";
import Dots from "../../images/more.png";
import Heart from "../../images/heart.png";
import { actionSendComment, getOnePost } from "../../actions";
import { Post, Info, User, Avatar, Icon, PostImage, PostContent, ReactionWrapper, Description, ReactionIcon, PostTime, CommentWrapper, CommentBox, IconComment, StyledButton } from "./post-draw.module";
import { Link, Box } from "@mui/material";

const PostDraw = ({ post, currentUser, dispatch }) => {
    const [comment, setComment] = useState("");
    const [comments, setComments] = useState(post.comments ?? []);
    const [likesAmount, setLikesAmount] = useState(post.likes?.length);
    const [isExistComments, setIsExistComments] = useState(false);
    const [isShowExtendedComments, setIsShowExtendedComments] = useState(false);
    const timestamp = post?.createdAt;
    const date = new Date(+timestamp).toString().slice(0, 24);
    useEffect(() => {
        setIsExistComments(post.comments?.length > 0);
    }, [post.comments]);

    const clickCommentHandler = async (event, postId) => {
        await dispatch(actionSendComment(postId, comment));
        setComments((prevComments) =>
            comment.length > 0
                ? prevComments.concat({
                    _id: Math.random(),
                    text: comment,
                    owner: { avatar: { url: currentUser.avatar?.url } },
                })
                : prevComments
        );

        setComment("");
        setIsExistComments(true);
    };

    const clickLikeHandler = async (event, postId) => {
        const currentPost = (await getOnePost(post._id)(dispatch)).data.PostFindOne;
        const isLiked = currentPost.likes.some(
            (like) => like.owner._id === currentUser._id
        );
        if (isLiked) {
            event.target.src =
                "https://cdn-icons-png.flaticon.com/512/1077/1077035.png";
            const likeId = currentPost.likes.find(
                (like) => like.owner._id === currentUser._id
            );
            gqlDeleteLike(likeId._id, postId);
        } else {
            event.target.src = Heart;
            gqlAddLike(postId);
        }
        setLikesAmount(
            isLiked ? currentPost.likes.length - 1 : currentPost.likes.length + 1
        );
    };

    const handlePostComment = (event, postId) => {
        event.preventDefault();
        if (comment.trim() !== "") {
            clickCommentHandler(event, postId);
        }
    };

    return (
        <Post>
            <Info>
                <User>
                    <Box>
                        <Link href={`user/${post?.owner?._id}`}>
                            <Avatar src={post?.owner?.avatar?.url} />
                        </Link>
                    </Box>
                    <Link href={`user/${post?.owner?._id}`}>
                        <Box
                            sx={{
                                width: "auto",
                                fontWeight: "bold",
                                color: "#000",
                                fontSize: "14px",
                                marginLeft: "10px",
                            }}
                        >
                            {post?.owner?.login}
                        </Box>
                    </Link>
                </User>
                <Icon src={Dots} />
            </Info>
            <PostImage src={post?.images?.[0]?.url} />
            <PostContent>
                <ReactionWrapper>
                    <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>
                    <ReactionIcon
                        src="https://cdn-icons-png.flaticon.com/512/2462/2462719.png"
                        alt="comment-icon"
                        onClick={() =>
                            setIsShowExtendedComments((prevState) => !prevState)
                        }
                    />
                </ReactionWrapper>
                <Description>{post?.text}</Description>
               
                    <Comments
                        post={post}
                        currentUser={currentUser}
                        isShowExtendedComments={isShowExtendedComments}
                        setIsShowExtendedComments={setIsShowExtendedComments}
                    />
            
                <PostTime>{date}</PostTime>
            </PostContent>
        </Post>
    );
};

export const ConnectPostDraw = connect(null)(PostDraw);
