import { useState } from "react";
import { Article } from "components/Article/Article";
import { Article as ArticleTypes } from "article/domain/articleEntity";
import classNames from "classnames";
import { debounce } from "lodash";
import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation";
import { useSearchViewModel } from "searchResults/controller/searchResultsViewModel";
import { Loader } from "./Loader/Loader";

type Props = {
  searchItem: ArticleTypes;
};

export const ArticleSearchResult = ({ searchItem }: Props) => {
  const store = useSearchStoreImplementation();
  const { isLoading } = useSearchViewModel(store);

  const [openAbstract, setOpenAbstract] = useState(false);

  const debouncedTask = debounce((task) => Promise.resolve(task()), 200);

  function open() {
    debouncedTask(() => setOpenAbstract(!openAbstract));
  }

  return (
    <Article className=" pt-6 pb-3 ">
      <div className="flex flex-row justify-between">
        <Article.Breadcumbs emphasis="low" className="flex flex-wrap flex-row">
          {[
            `${searchItem.topic}`,
            `${searchItem.topic}`,
            `${searchItem.topic}`,
            `${searchItem.topic}`,
          ]}
        </Article.Breadcumbs>
        <Article.SubscriptionsButtons />
      </div>

      <Article.Title linkTo={`/article/info/${searchItem.id}`} className="text-2xl">
        {searchItem.title}
      </Article.Title>
      <Article.Authors emphasis="low" className="flex flex-wrap flex-row">
        {searchItem.authors}
      </Article.Authors>
      <Article.Keywords emphasis="low" className="flex flex-wrap flex-row py-2">
        {searchItem.tags}
      </Article.Keywords>
      <Article.InteractionButtons
        className="py-2 "
        emphasis="low"
        openAbstract={open}
        isAbstractOpen={openAbstract}
      />
      <Article.Description
        emphasis="low"
        isShowing={openAbstract}
        className={classNames("my-2")}
      >
        {searchItem.summary}
      </Article.Description>
    </Article>
  );
};