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> </> ); });