"use client";

import AvatarsView from "@/app/[language]/hall/components/AvatarsView";
import useGetAbility6KHall from "@/app/[language]/hall/query/useGetAbility6KHall";
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 useGetAtStandHall from "@/app/[language]/hall/query/useGetAtStandHall";
import useGetAtTopHall from "@/app/[language]/hall/query/useGetAtTopHall";
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 useGetTotalStandHall from "@/app/[language]/hall/query/useGetTotalStandHall";
import useGetTotalTopHall from "@/app/[language]/hall/query/useGetTotalTopHall";
import useGetTotalTotalHall from "@/app/[language]/hall/query/useGetTotalTotalHall";
import { useHallStore } from "@/state/Stores";
import { wwwAPIPath } from "@/utilities/wwwAPI";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import Image from "next/image";
import Tab from "react-bootstrap/Tab";
import Tabs from "react-bootstrap/Tabs";

export default observer(() => {
  const {
    tabItem,
    totalTabItem,
    atTabItem,
    abilityTabItem,
    setTabItem,
    setTotalTabItem,
    setAtTabItem,
    setAbilityTabItem,
  } = useHallStore();
  const t = useTranslations();

  const { data: totalTotalHall, isFetched: isTotalTotalHallLoaded } =
    useGetTotalTotalHall();
  const { data: totalTopHall, isFetched: isTotalTopHallLoaded } =
    useGetTotalTopHall();
  const { data: totalStandHall, isFetched: isTotalStandHallLoaded } =
    useGetTotalStandHall();
  const { data: totalBandHall, isFetched: isTotalBandHallLoaded } =
    useGetTotalBandHall();
  const { data: atTotalHall, isFetched: isAtTotalHallLoaded } =
    useGetAtTotalHall();
  const { data: atTopHall, isFetched: isAtTopHallLoaded } = useGetAtTopHall();
  const { data: atStandHall, isFetched: isAtStandHallLoaded } =
    useGetAtStandHall();
  const { data: atBandHall, isFetched: isAtBandHallLoaded } =
    useGetAtBandHall();
  const { data: ability6KHall, isFetched: isAbility6KHallLoaded } =
    useGetAbility6KHall();
  const { data: ability5KHall, isFetched: isAbility5KHallLoaded } =
    useGetAbility5KHall();
  const { data: ability7KHall, isFetched: isAbility7KHallLoaded } =
    useGetAbility7KHall();
  const { data: ability9KHall, isFetched: isAbility9KHallLoaded } =
    useGetAbility9KHall();
  const { data: levelHall, isFetched: isLevelHallLoaded } = useGetLevelHall();

  return (
    <>
      <Tabs
        activeKey={tabItem}
        onSelect={(eventKey) => {
          if (eventKey) {
            setTabItem(eventKey);
          }
        }}
      >
        <Tab title={t("hallTotalTitle")} eventKey="total">
          <Tabs
            activeKey={totalTabItem}
            onSelect={(eventKey) => {
              if (eventKey) {
                setTotalTabItem(eventKey);
              }
            }}
          >
            <Tab title={t("hallTotal")} eventKey="total">
              <AvatarsView
                isLoaded={isTotalTotalHallLoaded}
                halls={totalTotalHall}
              />
            </Tab>
            <Tab title={t("hallTop")} eventKey="top">
              <AvatarsView
                isLoaded={isTotalTopHallLoaded}
                halls={totalTopHall}
              />
            </Tab>
            <Tab title={t("hallStand")} eventKey="stand">
              <AvatarsView
                isLoaded={isTotalStandHallLoaded}
                halls={totalStandHall}
              />
            </Tab>
            <Tab title={t("hallBand")} eventKey="band">
              <AvatarsView
                isLoaded={isTotalBandHallLoaded}
                halls={totalBandHall}
              />
            </Tab>
          </Tabs>
        </Tab>
        <Tab title={t("hallAtTitle")} eventKey="at">
          <Tabs
            activeKey={atTabItem}
            onSelect={(eventKey) => {
              if (eventKey) {
                setAtTabItem(eventKey);
              }
            }}
          >
            <Tab title={t("hallTotal")} eventKey="total">
              <AvatarsView isLoaded={isAtTotalHallLoaded} halls={atTotalHall} />
            </Tab>
            <Tab title={t("hallTop")} eventKey="top">
              <AvatarsView isLoaded={isAtTopHallLoaded} halls={atTopHall} />
            </Tab>
            <Tab title={t("hallStand")} eventKey="stand">
              <AvatarsView isLoaded={isAtStandHallLoaded} halls={atStandHall} />
            </Tab>
            <Tab title={t("hallBand")} eventKey="band">
              <AvatarsView isLoaded={isAtBandHallLoaded} halls={atBandHall} />
            </Tab>
          </Tabs>
        </Tab>
        <Tab title={t("hallAbilityTitle")} eventKey="ability">
          <Tabs
            activeKey={abilityTabItem}
            onSelect={(eventKey) => {
              if (eventKey) {
                setAbilityTabItem(eventKey);
              }
            }}
          >
            <Tab title="6K" eventKey="6K">
              <AvatarsView
                isLoaded={isAbility6KHallLoaded}
                halls={ability6KHall}
                Component={({ value }) => (
                  <Image
                    width={60}
                    height={60}
                    src={`${wwwAPIPath}/drawing?abilityClass6K=${value}`}
                    alt=""
                  />
                )}
              />
            </Tab>
            <Tab title="⑤K" eventKey="5K">
              <AvatarsView
                isLoaded={isAbility5KHallLoaded}
                halls={ability5KHall}
                Component={({ value }) => (
                  <Image
                    width={60}
                    height={60}
                    src={`${wwwAPIPath}/drawing?abilityClass5K=${value}`}
                    alt=""
                  />
                )}
              />
            </Tab>
            <Tab title="⑦K" eventKey="7K">
              <AvatarsView
                isLoaded={isAbility7KHallLoaded}
                halls={ability7KHall}
                Component={({ value }) => (
                  <Image
                    width={60}
                    height={60}
                    src={`${wwwAPIPath}/drawing?abilityClass7K=${value}`}
                    alt=""
                  />
                )}
              />
            </Tab>
            <Tab title="9K" eventKey="9K">
              <AvatarsView
                isLoaded={isAbility9KHallLoaded}
                halls={ability9KHall}
                Component={({ value }) => (
                  <Image
                    width={60}
                    height={60}
                    src={`${wwwAPIPath}/drawing?abilityClass9K=${value}`}
                    alt=""
                  />
                )}
              />
            </Tab>
          </Tabs>
        </Tab>
        <Tab title={t("hallLevelTitle")} eventKey="level">
          <AvatarsView isLoaded={isLevelHallLoaded} halls={levelHall} />
        </Tab>
      </Tabs>
    </>
  );
});