import { useArticleViewModel } from "article/controller/articleViewModel";
import { useArticleStore } from "article/data/articleStoreImplementation";
import "react-loading-skeleton/dist/skeleton.css";
import Skeleton from "react-loading-skeleton";
import { useParams } from "react-router";
import { useEffect } from "react";

/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */
import * as ArticlePart from "../../components/Article/Article";
import BaseLayout from "components/BaseLayout";
import Container from "components/Container";
import NotFound from "./NotFound";
import Markdown from "components/Markdown";

const AnArticleBody = () => {
  const store = useArticleStore();
  const { article, hasError, shouldShowLoading } = useArticleViewModel(store);
  const { id } = useParams();
  const newId = `${id}`;
  useEffect(() => {
    store.getArticle(newId);
  }, [id]);
  if (hasError) <NotFound />;
  return (
    <BaseLayout>
      <Container variant="straight">
        {shouldShowLoading ? (
          <>
            <Skeleton count={1} className="my-4" />
            <div className="gap-4 py-12 px-20">
              <Skeleton
                count={1}
                containerClassName=" text-3xl"
                className="mb-6"
              />
              <Skeleton count={15} containerClassName="" />
            </div>
          </>
        ) : (
          <>
            <ArticlePart.Article.Breadcumbs className="py-4">
              {article?.topic}
            </ArticlePart.Article.Breadcumbs>
            <div className="gap-4 py-12 px-20">
              <ArticlePart.Article.Title className="text-3xl">
                {article?.title}
              </ArticlePart.Article.Title>

              <div className="py-6">
                <Markdown
                  markdown={article?.content ?? ''}
                />
              </div>
            </div>
          </>
        )}
      </Container>
    </BaseLayout>
  );
};

export default AnArticleBody;