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

import ReactMarkdown from 'react-markdown';
import useDataApi from '../hooks/useDataApi';
import Animation_Diligent from '../assets/animation_diligent.webm';
import Wrapper from '../layout/Wrapper';

import PageLayout from '../layout/PageLayout';

import '../App.css';
import '../styles/ck-editor.css';
import useAnalytics from './../hooks/useAnalytics';
import { strapiApiBuilder } from './../utils/strapiApiBuilder';
import ReactHelmet from './../components/shared/ReactHelmet';

import { useLocation } from 'react-router-dom';
import useFetchCollections from './../hooks/useFetchCollections';
import OneArticlesGrid from '../components/OneArticleGrid';
import LatestArticles from './../components/LatestArticles';

import { ReactComponent as BackArrowSVG } from '../assets/icons/back-triangle.svg';
import DynamicZones from '../components/DynamicZones';
import BlogHeadingSection from './../components/BlogHeadingSection';

const api_url = process.env.REACT_APP_API_URL;

const strapiPopulate = [
  'DynamicZone1.Image',
  'DynamicZone1.Image.field',
  'DynamicZone1.ImagesGrid',
  'DynamicZone1.ImagesGrid.field',
];

export default function ArticlePage() {
  const slug = useLocation();

  const helperString = slug.pathname.split('/').pop();

  const strapi = strapiApiBuilder(
    'articles?populate[DynamicZone1][populate]=*&populate[AuthorImage][populate]=*&populate[ArticleImage][populate]=*&populate[article_category][populate]=*',
    [],
    `&filters[Slug][$eq]=${helperString}`,
  );

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

  console.log(data);

  useAnalytics('');

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

  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 && (
          <div className="mt-[80px] md:mt-[140px]">
            <Wrapper>
              <div className="flex flex-col gap-8 md:gap-12">
                <a href={'/blog'} className="flex gap-4 items-center md:mb-32p">
                  <BackArrowSVG />
                  <p className="n-paragraph">Back to Blog Page</p>
                </a>
                <OneArticlesGrid>
                  <div className="col-span-1 md:col-span-4">
                    <BlogHeadingSection
                      data={{
                        ArticleImage: data[0].attributes.ArticleImage,
                        ArticleTitle: data[0].attributes.ArticleTitle,
                        ArticleDescription: data[0].attributes.ArticleDescription,
                        Author: data[0].attributes.Author,
                        AuthorTitle: data[0].attributes.AuthorTitle,
                        AuthorImage: data[0].attributes.AuthorImage,
                      }}
                    />
                    <DynamicZones data={data[0].attributes.DynamicZone1} />
                  </div>
                  <LatestArticles />
                </OneArticlesGrid>
              </div>
            </Wrapper>
          </div>
        )}
      </PageLayout>
    );
  }
}