"use client";

import AvatarItem from "@/app/[language]/hall/components/AvatarItem";
import useGetAbility5KHall from "@/app/[language]/hall/query/useGetAbility5KHall";
import useGetAbility7KHall from "@/app/[language]/hall/query/useGetAbility7KHall";
import useGetAbility9KHall from "@/app/[language]/hall/query/useGetAbility9KHall";
import useGetAtBandHall from "@/app/[language]/hall/query/useGetAtBandHall";
import useGetAtHighestHall from "@/app/[language]/hall/query/useGetAtHighestHall";
import useGetAtStandHall from "@/app/[language]/hall/query/useGetAtStandHall";
import useGetAtTotalHall from "@/app/[language]/hall/query/useGetAtTotalHall";
import useGetLevelHall from "@/app/[language]/hall/query/useGetLevelHall";
import useGetTotalBandHall from "@/app/[language]/hall/query/useGetTotalBandHall";
import useGetTotalHighestHall from "@/app/[language]/hall/query/useGetTotalHighestHall";
import useGetTotalStandHall from "@/app/[language]/hall/query/useGetTotalStandHall";
import useGetTotalTotalHall from "@/app/[language]/hall/query/useGetTotalTotalHall";
import { Hall } from "@/app/[language]/hall/type";
import { useHallStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import {
  ListGroup,
  Nav,
  NavItem,
  NavLink,
  TabContent,
  TabPane,
} from "reactstrap";

const getAvatarItems = (isLoaded: boolean, halls: Hall[]) => {
  return isLoaded
    ? halls.map(({ avatarID, avatarName, text }) => (
        <AvatarItem
          key={avatarID}
          avatarID={avatarID}
          avatarName={avatarName}
          text={text}
        />
      ))
    : [...Array(50).keys()].map((i) => (
        <AvatarItem key={i} avatarID="" avatarName="Loading…" text="" />
      ));
};

export default observer(() => {
  const {
    tabPosition,
    totalTabPosition,
    atTabPosition,
    abilityTabPosition,
    setTabPosition,
    setTotalTabPosition,
    setAtTabPosition,
    setAbilityTabPosition,
  } = useHallStore();
  const t = useTranslations();

  const { data: totalTotalHall, isFetched: isTotalTotalHallLoaded } =
    useGetTotalTotalHall();
  const { data: totalHighestHall, isFetched: isTotalHighestHallLoaded } =
    useGetTotalHighestHall();
  const { data: totalStandHall, isFetched: isTotalStandHallLoaded } =
    useGetTotalStandHall();
  const { data: totalBandHall, isFetched: isTotalBandHallLoaded } =
    useGetTotalBandHall();
  const { data: atTotalHall, isFetched: isAtTotalHallLoaded } =
    useGetAtTotalHall();
  const { data: atHighestHall, isFetched: isAtHighestHallLoaded } =
    useGetAtHighestHall();
  const { data: atStandHall, isFetched: isAtStandHallLoaded } =
    useGetAtStandHall();
  const { data: atBandHall, isFetched: isAtBandHallLoaded } =
    useGetAtBandHall();
  const { data: ability5KHall, isFetched: isAbility5KHallLoaded } =
    useGetAbility5KHall();
  const { data: ability7KHall, isFetched: isAbility7KHallLoaded } =
    useGetAbility7KHall();
  const { data: ability9KHall, isFetched: isAbility9KHallLoaded } =
    useGetAbility9KHall();
  const { data: levelHall, isFetched: isLevelHallLoaded } = useGetLevelHall();

  const getProperties = (i: number) => ({
    className: tabPosition === i ? "active route" : "route",
    onClick: () => {
      setTabPosition(i);
    },
  });

  const getTotalProperties = (i: number) => ({
    className: totalTabPosition === i ? "active route" : "route",
    onClick: () => {
      setTotalTabPosition(i);
    },
  });

  const getAtProperties = (i: number) => ({
    className: atTabPosition === i ? "active route" : "route",
    onClick: () => {
      setAtTabPosition(i);
    },
  });

  const getAbilityProperties = (i: number) => ({
    className: abilityTabPosition === i ? "active route" : "route",
    onClick: () => {
      setAbilityTabPosition(i);
    },
  });

  return (
    <>
      <Nav tabs>
        <NavItem>
          <NavLink {...getProperties(0)}>{t("hallTotalText")}</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(1)}>{t("hallAtText")}</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(2)}>{t("hallAbilityText")}</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(3)}>{t("hallLevelText")}</NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={tabPosition}>
        <TabPane tabId={0}>
          <Nav tabs>
            <NavItem>
              <NavLink {...getTotalProperties(0)}>{t("hallTotal")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getTotalProperties(1)}>{t("hallHighest")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getTotalProperties(2)}>{t("hallStand")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getTotalProperties(3)}>{t("hallBand")}</NavLink>
            </NavItem>
          </Nav>
          <TabContent activeTab={totalTabPosition}>
            <TabPane tabId={0}>
              <ListGroup>
                {getAvatarItems(isTotalTotalHallLoaded, totalTotalHall)}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {getAvatarItems(isTotalHighestHallLoaded, totalHighestHall)}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {getAvatarItems(isTotalStandHallLoaded, totalStandHall)}
              </ListGroup>
            </TabPane>
            <TabPane tabId={3}>
              <ListGroup>
                {getAvatarItems(isTotalBandHallLoaded, totalBandHall)}
              </ListGroup>
            </TabPane>
          </TabContent>
        </TabPane>
        <TabPane tabId={1}>
          <Nav tabs>
            <NavItem>
              <NavLink {...getAtProperties(0)}>{t("hallTotal")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAtProperties(1)}>{t("hallHighest")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAtProperties(2)}>{t("hallStand")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAtProperties(3)}>{t("hallBand")}</NavLink>
            </NavItem>
          </Nav>
          <TabContent activeTab={atTabPosition}>
            <TabPane tabId={0}>
              <ListGroup>
                {getAvatarItems(isAtTotalHallLoaded, atTotalHall)}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {getAvatarItems(isAtHighestHallLoaded, atHighestHall)}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {getAvatarItems(isAtStandHallLoaded, atStandHall)}
              </ListGroup>
            </TabPane>
            <TabPane tabId={3}>
              <ListGroup>
                {getAvatarItems(isAtBandHallLoaded, atBandHall)}
              </ListGroup>
            </TabPane>
          </TabContent>
        </TabPane>
        <TabPane tabId={2}>
          <Nav tabs>
            <NavItem>
              <NavLink {...getAbilityProperties(0)}>⑤K</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAbilityProperties(1)}>⑦K</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAbilityProperties(2)}>9K</NavLink>
            </NavItem>
          </Nav>
          <TabContent activeTab={abilityTabPosition}>
            <TabPane tabId={0}>
              <ListGroup>
                {getAvatarItems(isAbility5KHallLoaded, ability5KHall)}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {getAvatarItems(isAbility7KHallLoaded, ability7KHall)}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {getAvatarItems(isAbility9KHallLoaded, ability9KHall)}
              </ListGroup>
            </TabPane>
          </TabContent>
        </TabPane>
        <TabPane tabId={3}>
          <ListGroup>{getAvatarItems(isLevelHallLoaded, levelHall)}</ListGroup>
        </TabPane>
      </TabContent>
    </>
  );
});