import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import { Col, ListGroup, ListGroupItemHeading, Row } from "reactstrap";
import InfiniteScroll from "react-infinite-scroll-component";

import { wwwAXIOS } from "src/Www";
import { WantViewLoading } from "src/Loading";
import EssayTitleView from "src/forum/EssayTitleView";
import WantInput from "src/want/WantInput";
import CommentTitleView from "src/forum/CommentTitleView";
import { GetWantAPI, GetWantAPIComment, GetWantAPIEssay } from "src/wwwAPI";

const WantView = () => {
  const [isLoading, setLoading] = useState(true);
  const [wantedEssayTitles, setWantedEssayTitles] = useState<GetWantAPIEssay[]>(
    [],
  );
  const [wantedCommentTitles, setWantedCommentTitles] = useState<
    GetWantAPIComment[]
  >([]);
  const [page, setPage] = useState(1);
  const [isNext, setNext] = useState(true);

  const { t } = useTranslation();

  const { wantVariety, wantInput } = useParams<{
    wantVariety: "essay" | "comment";
    wantInput: string;
  }>();

  const getWantedItems = useCallback(
    async (page: number) => {
      const { status, data } = await wwwAXIOS.get<GetWantAPI>(
        `/want/${wantVariety}/${wantInput}/${page}`,
      );

      if (status === 200) {
        if (data.length) {
          switch (wantVariety) {
            case "essay":
              setWantedEssayTitles((prevState) => [
                ...prevState,
                ...(data as GetWantAPIEssay[]),
              ]);
              break;
            case "comment":
              setWantedCommentTitles((prevState) => [
                ...prevState,
                ...(data as GetWantAPIComment[]),
              ]);
              break;
          }
          setPage(page + 1);
        } else {
          setNext(false);
        }
        return true;
      } else {
        return false;
      }
    },
    [wantInput, wantVariety],
  );

  useEffect(() => {
    (async () => {
      switch (wantVariety) {
        case "essay":
          setWantedEssayTitles([]);
          break;
        case "comment":
          setWantedCommentTitles([]);
          break;
      }
      if (await getWantedItems(1)) {
        setLoading(false);
      }
    })();
  }, [getWantedItems, wantVariety]);

  return (
    <>
      <WantInput />
      <hr />
      {isLoading ? (
        <WantViewLoading />
      ) : (
        <Row className="g-0">
          <Col className="m-1">
            <ListGroup>
              <ListGroupItemHeading>{t("wantView")}</ListGroupItemHeading>
              <InfiniteScroll
                dataLength={wantedEssayTitles.length}
                next={() => getWantedItems(page)}
                hasMore={isNext}
                loader={null}
              >
                {wantVariety === "essay" &&
                  wantedEssayTitles.map((wantedEssayTitle) => {
                    return (
                      <EssayTitleView
                        key={wantedEssayTitle.essayID}
                        forumID={wantedEssayTitle.forumID}
                        forumTitle={wantedEssayTitle.forumTitle}
                        essay={wantedEssayTitle}
                      />
                    );
                  })}
                {wantVariety === "comment" &&
                  wantedCommentTitles.map((wantedCommentTitle) => {
                    return (
                      <CommentTitleView
                        key={wantedCommentTitle.essayID}
                        forumID={wantedCommentTitle.forumID}
                        essayID={wantedCommentTitle.essayID}
                        comment={wantedCommentTitle}
                      />
                    );
                  })}
              </InfiniteScroll>
            </ListGroup>
          </Col>
        </Row>
      )}
    </>
  );
};

export default WantView;