import { FC, useCallback, useEffect, useState } from 'react';
import 'swiper/css';
import { Swiper, SwiperSlide } from 'swiper/react';
import { TPost, getPosts } from '../../services/getPosts';
import AddStoryModal from '../AddStoryModal/AddStoryModal';
import PostItem from '../PostItem/PostItem';
import Spinner from '../Spinner/Spinner';
import './PostList.css';
import ErrorSign from '../ErrorSign/ErrorSign';

export type TPostData = {
    posts: [{
        body: string;
        id: number;
        title: string;
        userId: number;
    }]
}

const PostList: FC = () => {

    const [postsData, setPostsData] = useState<TPost[] | undefined>();
    const [page, setPage] = useState(0);
    const [loading, setLoading] = useState(true);
    const [loadingMorePosts, setLoadingMorePosts] = useState(false);
    const [error, setError] = useState(false);

    const getPostsFromServer = useCallback(() => {
        getPosts(page)
            .then(newPosts => newPosts.json() as Promise<TPostData>)
            .then(newPosts => {
                setPostsData(prevState => [...(prevState ?? []), ...newPosts.posts]);
                setLoading(false);

            })
            .catch(e => {
                setError(true);
                console.log(e.message);
                setLoading(false);
            })
    }, [page]);

    const showMore = () => {
        setLoadingMorePosts(true);
        setPage(prevPage => prevPage + 1);
    }

    useEffect(() => { getPostsFromServer() }, [getPostsFromServer, page]);

    if (loading) {
        return <Spinner />;
    }

    return (
        <div className="post-list">
            <div className="post-list__menu">
                <div className="post-list__menu-left">
                    <span>user stories</span>
                    <span className='disabled'>last change<span className='sticker'>soon</span></span>
                </div>
                <AddStoryModal />
            </div>
            <div className='post-list__postitem-view'>
                <Swiper
                    spaceBetween={10}
                    slidesPerView={"auto"}
                    grabCursor={true}
                    touchMoveStopPropagation={true}
                    onReachEnd={showMore}
                >
                    {error ? <ErrorSign /> : postsData?.map((post: TPost) => {
                        return <SwiperSlide key={post.id}>
                            <PostItem key={post.id} title={post.title} body={post.body} userId={post.userId} id={post.id} />
                        </SwiperSlide>
                    })}
                    {loadingMorePosts ? <SwiperSlide className='post-item-spinner' key={"spinner"}><Spinner /></SwiperSlide> : null}
                </Swiper>
            </div>
        </div>
    );
};

export default PostList;