import { useEffect } from "react";
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";

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

export default observer(() => {
  const {
    isTotalTotalLoading,
    isTotalHighestLoading,
    isTotalStandLoading,
    isTotalBandLoading,
    isAtTotalLoading,
    isAtHighestLoading,
    isAtStandLoading,
    isAtBandLoading,
    isAbility5KLoading,
    isAbility7KLoading,
    isAbility9KLoading,
    isLevelLoading,
    totalTotalHOF,
    totalHighestHOF,
    totalStandHOF,
    totalBandHOF,
    atTotalHOF,
    atHighestHOF,
    atStandHOF,
    atBandHOF,
    ability5KHOF,
    ability7KHOF,
    ability9KHOF,
    levelHOF,
    getTotalTotalHOF,
    getTotalHighestHOF,
    getTotalStandHOF,
    getTotalBandHOF,
    getAtTotalHOF,
    getAtHighestHOF,
    getAtStandHOF,
    getAtBandHOF,
    getAbility5KHOF,
    getAbility7KHOF,
    getAbility9KHOF,
    getLevelHOF,
    tabPosition,
    totalTabPosition,
    atTabPosition,
    abilityTabPosition,
    setTabPosition,
    setTotalTabPosition,
    setAtTabPosition,
    setAbilityTabPosition,
  } = useHOFStore();
  const { t } = useTranslation();

  useEffect(() => {
    switch (tabPosition) {
      case 0:
        switch (totalTabPosition) {
          case 0:
            getTotalTotalHOF(t);
            break;
          case 1:
            getTotalHighestHOF(t);
            break;
          case 2:
            getTotalStandHOF(t);
            break;
          case 3:
            getTotalBandHOF(t);
            break;
        }
        break;
      case 1:
        switch (atTabPosition) {
          case 0:
            getAtTotalHOF(t);
            break;
          case 1:
            getAtHighestHOF(t);
            break;
          case 2:
            getAtStandHOF(t);
            break;
          case 3:
            getAtBandHOF(t);
            break;
        }
        break;
      case 2:
        switch (abilityTabPosition) {
          case 0:
            getAbility5KHOF();
            break;
          case 1:
            getAbility7KHOF();
            break;
          case 2:
            getAbility9KHOF();
            break;
        }
        break;
      case 3:
        getLevelHOF();
        break;
    }
  }, [
    abilityTabPosition,
    atTabPosition,
    getAbility5KHOF,
    getAbility7KHOF,
    getAbility9KHOF,
    getAtBandHOF,
    getAtHighestHOF,
    getAtStandHOF,
    getAtTotalHOF,
    getLevelHOF,
    getTotalBandHOF,
    getTotalHighestHOF,
    getTotalStandHOF,
    getTotalTotalHOF,
    t,
    tabPosition,
    totalTabPosition,
  ]);

  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>
                {isTotalTotalLoading ? (
                  <HOFAvatarLoading loadingCount={50} />
                ) : (
                  getAvatarItems(totalTotalHOF)
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {isTotalHighestLoading ? (
                  <HOFAvatarLoading loadingCount={50} />
                ) : (
                  getAvatarItems(totalHighestHOF)
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {isTotalStandLoading ? (
                  <HOFAvatarLoading loadingCount={50} />
                ) : (
                  getAvatarItems(totalStandHOF)
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={3}>
              <ListGroup>
                {isTotalBandLoading ? (
                  <HOFAvatarLoading loadingCount={50} />
                ) : (
                  getAvatarItems(totalBandHOF)
                )}
              </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>
                {isAtTotalLoading ? (
                  <HOFAvatarLoading loadingCount={50} />
                ) : (
                  getAvatarItems(atTotalHOF)
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {isAtHighestLoading ? (
                  <HOFAvatarLoading loadingCount={50} />
                ) : (
                  getAvatarItems(atHighestHOF)
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {isAtStandLoading ? (
                  <HOFAvatarLoading loadingCount={50} />
                ) : (
                  getAvatarItems(atStandHOF)
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={3}>
              <ListGroup>
                {isAtBandLoading ? (
                  <HOFAvatarLoading loadingCount={50} />
                ) : (
                  getAvatarItems(atBandHOF)
                )}
              </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>
                {isAbility5KLoading ? (
                  <HOFAvatarLoading loadingCount={50} />
                ) : (
                  getAvatarItems(ability5KHOF)
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {isAbility7KLoading ? (
                  <HOFAvatarLoading loadingCount={50} />
                ) : (
                  getAvatarItems(ability7KHOF)
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {isAbility9KLoading ? (
                  <HOFAvatarLoading loadingCount={50} />
                ) : (
                  getAvatarItems(ability9KHOF)
                )}
              </ListGroup>
            </TabPane>
          </TabContent>
        </TabPane>
        <TabPane tabId={3}>
          <ListGroup>
            {isLevelLoading ? (
              <HOFAvatarLoading loadingCount={50} />
            ) : (
              getAvatarItems(levelHOF)
            )}
          </ListGroup>
        </TabPane>
      </TabContent>
    </>
  );
});