import { Link, useParams } from "react-router-dom";
import {
  Badge,
  Button,
  Col,
  ListGroup,
  ListGroupItemHeading,
  Row,
} from "reactstrap";
import { runInAction } from "mobx";
import { observer } from "mobx-react-lite";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { getLanguage } from "taehui-ts/language";
import { useIntParam, useTo } from "taehui-ts/fe-utility";

import { wwwAXIOS } from "src/Www";
import EssayTitleView from "src/forum/EssayTitleView";
import PositionInput from "src/forum/PositionInput";
import { useAvatarStore, useForumStore } from "src/Stores";
import { ForumViewLoading } from "src/Loading";
import { EssayAPIEssay, GetForumAPI } from "src/wwwAPI";

const ForumView = observer(() => {
  const { taehuiLevel } = useAvatarStore();
  const { forumTitle, viewUnit, level, setForumTitle, setLastPage, setLevel } =
    useForumStore();
  const [isLoading, setLoading] = useState(true);
  const [essays, setEssays] = useState<EssayAPIEssay[]>([]);
  const { t } = useTranslation();

  const { forumID } = useParams<{ forumID: string }>();
  const { param: page } = useIntParam("page", 1);

  const to = useTo();

  useEffect(() => {
    (async () => {
      const { data, status } = await wwwAXIOS.get<GetForumAPI>(
        `/forum/${forumID}`,
        {
          params: {
            page,
            viewUnit,
            language: getLanguage(),
          },
        },
      );
      if (status === 200) {
        runInAction(() => {
          setForumTitle(data.title);
          setEssays(data.essays);
          setLastPage(Math.ceil(data.essayCount / viewUnit));
          setLevel(data.level);
          setLoading(false);
        });
      }
    })();
  }, [forumID, page, setForumTitle, setLastPage, setLevel, viewUnit]);

  if (isLoading) {
    return <ForumViewLoading />;
  }

  return (
    <>
      <Row className="g-0">
        <Col className="m-1">
          <ListGroup>
            <ListGroupItemHeading>
              <Badge>{forumTitle}</Badge>
            </ListGroupItemHeading>
            {essays.map((essay) => (
              <EssayTitleView
                forumID={forumID}
                essay={essay}
                key={essay.essayID}
              />
            ))}
          </ListGroup>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <PositionInput />
        </Col>
      </Row>
      <Row className="g-0">
        {taehuiLevel >= level && (
          <Col className="m-1 text-end">
            <Link to={`/forum/${forumID}/w`}>
              <Button color="success">{t("postEssay")}</Button>
            </Link>
          </Col>
        )}
        <Col
          className="m-1 text-end"
          xs={taehuiLevel >= level ? "auto" : undefined}
        >
          <Button
            color="danger"
            onClick={() => {
              to("/forums");
            }}
          >
            {t("quit")}
          </Button>
        </Col>
      </Row>
    </>
  );
});

export default ForumView;