import { useTranslation } from "react-i18next";
import {
  ListGroup,
  Nav,
  NavItem,
  NavLink,
  TabContent,
  TabPane,
} from "reactstrap";
import { observer } from "mobx-react-lite";

import { useHOFStore } from "src/Stores";
import { HOF } from "src/hof/HOF";
import AvatarItem from "src/hof/AvatarItem";
import { HOFAvatarLoading } from "src/Loading";
import useGetTotalTotalHOF from "src/hof/useGetTotalTotalHOF";
import useGetTotalHighestHOF from "src/hof/useGetTotalHighestHOF";
import useGetTotalStandHOF from "src/hof/useGetTotalStandHOF";
import useGetTotalBandHOF from "src/hof/useGetTotalBandHOF";
import useGetAtTotalHOF from "src/hof/useGetAtTotalHOF";
import useGetAtHighestHOF from "src/hof/useGetAtHighestHOF";
import useGetAtStandHOF from "src/hof/useGetAtStandHOF";
import useGetAtBandHOF from "src/hof/useGetAtBandHOF";
import useGetAbility5KHOF from "src/hof/useGetAbility5KHOF";
import useGetAbility7KHOF from "src/hof/useGetAbility7KHOF";
import useGetAbility9KHOF from "src/hof/useGetAbility9KHOF";
import useGetLevelHOF from "src/hof/useGetLevelHOF";

const getAvatarItems = (hofs: HOF[]) => {
  return hofs.map(({ avatarID, avatarName, text }) => (
    <AvatarItem
      key={avatarID}
      avatarID={avatarID}
      avatarName={avatarName}
      text={text}
    />
  ));
};

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

  const { data: totalTotalHOF, isFetched: isTotalTotalHOFLoaded } =
    useGetTotalTotalHOF();
  const { data: totalHighestHOF, isFetched: isTotalHighestHOFLoaded } =
    useGetTotalHighestHOF();
  const { data: totalStandHOF, isFetched: isTotalStandHOFLoaded } =
    useGetTotalStandHOF();
  const { data: totalBandHOF, isFetched: isTotalBandHOFLoaded } =
    useGetTotalBandHOF();
  const { data: atTotalHOF, isFetched: isAtTotalHOFLoaded } =
    useGetAtTotalHOF();
  const { data: atHighestHOF, isFetched: isAtHighestHOFLoaded } =
    useGetAtHighestHOF();
  const { data: atStandHOF, isFetched: isAtStandHOFLoaded } =
    useGetAtStandHOF();
  const { data: atBandHOF, isFetched: isAtBandHOFLoaded } = useGetAtBandHOF();
  const { data: ability5KHOF, isFetched: isAbility5KHOFLoaded } =
    useGetAbility5KHOF();
  const { data: ability7KHOF, isFetched: isAbility7KHOFLoaded } =
    useGetAbility7KHOF();
  const { data: ability9KHOF, isFetched: isAbility9KHOFLoaded } =
    useGetAbility9KHOF();
  const { data: levelHOF, isFetched: isLevelHOFLoaded } = useGetLevelHOF();

  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("hofTotalText")}</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(1)}>{t("hofAtText")}</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(2)}>{t("hofAbilityText")}</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(3)}>{t("hofLevelText")}</NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={tabPosition}>
        <TabPane tabId={0}>
          <Nav tabs>
            <NavItem>
              <NavLink {...getTotalProperties(0)}>{t("hofTotal")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getTotalProperties(1)}>{t("hofHighest")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getTotalProperties(2)}>{t("hofStand")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getTotalProperties(3)}>{t("hofBand")}</NavLink>
            </NavItem>
          </Nav>
          <TabContent activeTab={totalTabPosition}>
            <TabPane tabId={0}>
              <ListGroup>
                {isTotalTotalHOFLoaded ? (
                  getAvatarItems(totalTotalHOF)
                ) : (
                  <HOFAvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {isTotalHighestHOFLoaded ? (
                  getAvatarItems(totalHighestHOF)
                ) : (
                  <HOFAvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {isTotalStandHOFLoaded ? (
                  getAvatarItems(totalStandHOF)
                ) : (
                  <HOFAvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={3}>
              <ListGroup>
                {isTotalBandHOFLoaded ? (
                  getAvatarItems(totalBandHOF)
                ) : (
                  <HOFAvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
          </TabContent>
        </TabPane>
        <TabPane tabId={1}>
          <Nav tabs>
            <NavItem>
              <NavLink {...getAtProperties(0)}>{t("hofTotal")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAtProperties(1)}>{t("hofHighest")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAtProperties(2)}>{t("hofStand")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAtProperties(3)}>{t("hofBand")}</NavLink>
            </NavItem>
          </Nav>
          <TabContent activeTab={atTabPosition}>
            <TabPane tabId={0}>
              <ListGroup>
                {isAtTotalHOFLoaded ? (
                  getAvatarItems(atTotalHOF)
                ) : (
                  <HOFAvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {isAtHighestHOFLoaded ? (
                  getAvatarItems(atHighestHOF)
                ) : (
                  <HOFAvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {isAtStandHOFLoaded ? (
                  getAvatarItems(atStandHOF)
                ) : (
                  <HOFAvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={3}>
              <ListGroup>
                {isAtBandHOFLoaded ? (
                  getAvatarItems(atBandHOF)
                ) : (
                  <HOFAvatarLoading loadingCount={50} />
                )}
              </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>
                {isAbility5KHOFLoaded ? (
                  getAvatarItems(ability5KHOF)
                ) : (
                  <HOFAvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {isAbility7KHOFLoaded ? (
                  getAvatarItems(ability7KHOF)
                ) : (
                  <HOFAvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {isAbility9KHOFLoaded ? (
                  getAvatarItems(ability9KHOF)
                ) : (
                  <HOFAvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
          </TabContent>
        </TabPane>
        <TabPane tabId={3}>
          <ListGroup>
            {isLevelHOFLoaded ? (
              getAvatarItems(levelHOF)
            ) : (
              <HOFAvatarLoading loadingCount={50} />
            )}
          </ListGroup>
        </TabPane>
      </TabContent>
    </>
  );
});