import React, { Children, Fragment, useEffect } from 'react';
import CustomLink from '../components/root/CustomLink';
import ActionCard from '../components/shared/ActionCard';

import useDataApi from '../hooks/useDataApi';
import Animation_Diligent from '../assets/animation_diligent.webm';
import Wrapper from '../layout/Wrapper';

import PageLayout from '../layout/PageLayout';
import PageTitleOneFont from '../components/shared/PageTitleOneFont';
import GradientWrapper from '../components/shared/GradientWrapper';

import '../App.css';
import useAnalytics from './../hooks/useAnalytics';
import { strapiApiBuilder } from './../utils/strapiApiBuilder';
import ReactHelmet from './../components/shared/ReactHelmet';
import WorkClientForm from './../components/WorkClientForm';

import { useState } from 'react';
import PageTitle from './../components/shared/PageTitle';
import BlogArticlesDataWrapper from '../components/shared/BlogArticlesDataWrapper';

const api_url = process.env.REACT_APP_API_URL;

const strapiPopulate = [
  'Heading',
  'SEO',
  'SEO.metaSocial',
  'SEO.metaImage',
  'SEO.metaSocial.image',
];

export default function Blog() {
  const [formSuccess, setFormSuccess] = useState(false);

  const strapi = strapiApiBuilder('blogpage', strapiPopulate, '');

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

  useAnalytics('Blog');

  useEffect(() => {
    document.title = 'Blog';
  }, []);

  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 (
      <PageLayout>
        {data && data.SEO ? <ReactHelmet seo={data.SEO} /> : null}
        <div className="mt-[48px] md:mt-[180px]">
          <Wrapper padding={' py-[48px]'}>
            {data ? (
              <Fragment>
                <PageTitle
                  heading={data.Heading.title}
                  subheading={data.Heading.subtitle}
                  left
                />
              </Fragment>
            ) : null}
          </Wrapper>
          <BlogArticlesDataWrapper />
        </div>
      </PageLayout>
    );
  }
};