import React, { useEffect, useState } from 'react';
import { strapiApiBuilder } from './../../utils/strapiApiBuilder';
import useFetchCollections from './../../hooks/useFetchCollections';
import Wrapper from '../../layout/Wrapper';
import Animation_Diligent from '../../assets/animation_diligent.webm';
import ArticlesGrid from './ArticlesGrid';
import ArticleCard from './ArticleCard';

const api_url = process.env.REACT_APP_API_URL;

const strapiPopulate = ['AuthorImage', 'ArticleImage', 'article_category'];

const BlogArticlesDataWrapper = () => {
  const strapi = strapiApiBuilder('articles', strapiPopulate, '&sort=Date:desc');

  const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);

  //console.log(data);

  if (isLoading) {
    return (
      <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 overflow-hidden dark:text-white flex items-center justify-center text-3xl font-semibold">
        <video id="animation" width="540" height="540" autoPlay muted loop>
          <source src={Animation_Diligent} type="video/webm" />
          Loading...
        </video>
      </div>
    );
  } else {
    return (
      <>
        {data && (
          <Wrapper>
            <ArticlesGrid>
              {data.map((element, index) => (
                <div key={index}>
                  <ArticleCard data={element.attributes} />
                </div>
              ))}
            </ArticlesGrid>
          </Wrapper>
        )}
      </>
    );
  }
};
export default BlogArticlesDataWrapper;