// import React, { useEffect, useState, useRef } from "react";
// import { connect } from "react-redux";
// import { Box } from "@mui/material";
// import { actionGetPosts } from "../../actions";
// import { ConnectPostDraw } from "../PostDraw";
// import { gqlAboutUser } from "../../actions/user";
// import store from "../../reducers";
// import "../../App.css";
// import { WrapperBox } from "./post.module";
//
// const Post = ({ getPosts }) => {
//
//   const [skip, setSkip] = useState(0);
//   const [currentUser, setCurrentUser] = useState({});
//   const generalPostsRef = useRef([]);
//
//   const scrollHandler = async () => {
//     // const scrollTop = document.documentElement.scrollTop;
//     // const scrollHeight = document.documentElement.scrollHeight;
//     // const clientHeight = document.documentElement.clientHeight;
//     // if (scrollTop + clientHeight < scrollHeight) {
//     //   return;
//     // }
//
//     const sliceLength = generalPostsRef.current.slice(skip, skip + 5).length;
//
//     if (sliceLength > 0) {
//       setSkip((prevSkip) => prevSkip + 5);
//     }
//   };
//
//   useEffect(() => {
//     (async () => {
//       const currentUser = (await gqlAboutUser(store.getState().auth.payload.id))
//         .data.UserFindOne;
//       setCurrentUser(currentUser);
//
//       const generalPosts = (await getPosts()).data.PostFind;
//       generalPostsRef.current = generalPosts;
//       document.addEventListener("scroll", scrollHandler);
//       setSkip((prevSkip) => prevSkip + 5);
//     })();
//     return () => document.removeEventListener("scroll", scrollHandler);
//   }, []);
//
//   const filteredPosts =
//     generalPostsRef.current && generalPostsRef.current.length > 0
//       ? generalPostsRef.current
//           .slice(0, skip + 5)
//           .filter((post) => post?.owner?.avatar?.url && post?.images?.[0]?.url)
//       : [];
//
//   return (
//     <Box component="main">
//       <WrapperBox>
//         {filteredPosts.length > 0 ? (
//           filteredPosts.map((post) => (
//             <ConnectPostDraw
//               key={post._id}
//               post={post}
//               currentUser={currentUser}
//             />
//           ))
//         ) : (
//           <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
//         )}
//       </WrapperBox>
//     </Box>
//   );
// };
// export const ConnectPosts = connect(null, { getPosts: actionGetPosts })(Post);

import React, { useEffect, useState, useRef } from "react";
import { connect } from "react-redux";
import { Box } from "@mui/material";
import { actionGetPosts } from "../../actions";
import { ConnectPostDraw } from "../PostDraw";
import { gqlAboutUser } from "../../actions/user";
import store from "../../reducers";
import "../../App.css";
import { WrapperBox } from "./post.module";

const Post = ({ getPosts }) => {
  const [skip, setSkip] = useState(0);
  const [currentUser, setCurrentUser] = useState({});
  const generalPostsRef = useRef([]);

  const scrollHandler = async () => {
    const sliceLength = generalPostsRef.current.slice(skip, skip + 5).length;

    if (sliceLength > 0) {
      setSkip((prevSkip) => prevSkip + 5);
    }
  };

  useEffect(() => {
    (async () => {
      const currentUser = (await gqlAboutUser(store.getState().auth.payload.id)).data.UserFindOne;
      setCurrentUser(currentUser);

      const generalPosts = (await getPosts()).data.PostFind;
      generalPostsRef.current = generalPosts;
      document.addEventListener("scroll", scrollHandler);
      setSkip((prevSkip) => prevSkip + 5);
    })();

    return () => document.removeEventListener("scroll", scrollHandler);
  }, []);

  const filteredPosts =
      generalPostsRef.current && generalPostsRef.current.length > 0
          ? generalPostsRef.current
              .slice(0, skip + 5)
              .filter((post) => post?.owner?.avatar?.url && post?.images?.[0]?.url)
          : [];

  return (
      <Box component="main">
        <WrapperBox>
          {filteredPosts.length > 0 ? (
              filteredPosts.map((post) => (
                  <ConnectPostDraw
                      key={post._id}
                      post={post}
                      currentUser={currentUser}
                  />
              ))
          ) : (
              <div class="lds-roller">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
          )}
        </WrapperBox>
      </Box>
  );
};

export const ConnectPosts = connect(null, { getPosts: actionGetPosts })(Post);
