import { useArticleViewModel } from "article/controller/articleViewModel";
import { useArticleStore } from "article/data/articleStoreImplementation";
import { useEffect } from "react";
import * as ArticlePart from "../../components/Article/Article";
import { useParams } from "react-router";
import AskeletonArticle from "./AskeletonArticle";
import Container from "components/Container";
import NotFound from "./NotFound";
import { SVGSearch } from "components/icons";
import BaseLayout from "components/BaseLayout";
import Typography from "components/typography/Typography";
import { useTranslation } from "react-i18next";

const AnArticle = () => {
  const store = useArticleStore();
  const { article, hasError, shouldShowLoading } = useArticleViewModel(store);
  const { i18n, t } = useTranslation();

  const { id } = useParams();
  const newId = `${id}`;

  useEffect(() => {
    store.getArticle(newId);
  }, [id]);

  if (hasError) {
    return <NotFound />;
  }
  return (
    <BaseLayout>
      <Container variant="straight">
        {shouldShowLoading ? (
          <AskeletonArticle />
        ) : (
          <>
            <ArticlePart.Article.Breadcumbs className="py-4">
              {article?.topic}
            </ArticlePart.Article.Breadcumbs>
            <div className="flex flex-col gap-4 pb-4">
              <ArticlePart.Article.Title className="text-3xl ">
                {article?.title}
              </ArticlePart.Article.Title>
              <ArticlePart.Article.Authors>
                {article?.authors !== undefined ? article?.authors : "Unknown"}
              </ArticlePart.Article.Authors>
              <hr></hr>
            </div>

            <ArticlePart.Article.InteractionButtons
              emphasis="high"
              articleID={article?.id}
            />
            {article?.tags && (
              <div className="keywords my-10 flex flex-col gap-2">
                <Typography className="text-2xl" fontWeightVariant="semibold">
                  {t("articlePage.keywords")}
                </Typography>

                <ArticlePart.Article.Keywords className="transition ease-in-out delay-50">
                  {article?.tags}
                </ArticlePart.Article.Keywords>
              </div>
            )}
            <div className="abstract my-10 flex flex-col gap-2">
              <Typography className="text-2xl" fontWeightVariant="semibold">
                {t("articlePage.abstract")}
              </Typography>
              <ArticlePart.Article.Description>
                {article?.summary !== undefined ? (
                  article?.summary
                ) : (
                  <div className=" bg-gray-100 w-full stroke-gray-800 text-xl flex justify-center py-1">
                    <SVGSearch className="w-14" />
                  </div>
                )}
              </ArticlePart.Article.Description>
            </div>
          </>
        )}
      </Container>
    </BaseLayout>
  );
};

// \n
export default AnArticle;