"use client"; import AbilitiesView from "@/app/[language]/avatar/components/AbilitiesView"; import DateView from "@/app/[language]/avatar/components/DateView"; import FavoritesView from "@/app/[language]/avatar/components/FavoritesView"; import IntroView from "@/app/[language]/avatar/components/IntroView"; import LastsView from "@/app/[language]/avatar/components/LastsView"; import QuitStatusValues from "@/app/[language]/avatar/components/QuitStatusValues"; import WwwLevelsView from "@/app/[language]/avatar/components/WwwLevelsView"; import Loading from "@/app/[language]/avatar/loading"; import useGetAvatar from "@/app/[language]/avatar/query/useGetAvatar"; import AvatarDrawing from "@/components/AvatarDrawing"; import AvatarTitle from "@/components/AvatarTitle"; import { useAvatarStore, useSiteStore } from "@/state/Stores"; import { getDefaultAvatarID } from "@/utilities/Utility"; import { wwwAPIPath } from "@/utilities/wwwAPI"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import Image from "next/image"; import { useEffect } from "react"; import { Button, Col, Input, ListGroup, ListGroupItem, Nav, NavItem, NavLink, Progress, Row, TabContent, TabPane, } from "reactstrap"; import { useWant } from "taehui-ts/fe-utilities"; export default observer(() => { const { textInput, setTextInput, tabPosition, setTabPosition } = useAvatarStore(); const { siteAvatarID, isLoggedIn, setLogInOpened } = useSiteStore(); const { want, setWant } = useWant("/avatar"); const t = useTranslations(); useEffect(() => { setTextInput(want); }, [want, setTextInput]); const { isFetched: isAvatarLoaded, data: avatar } = useGetAvatar(); const onWant = () => { setWant(textInput); }; const getProperties = (i: number) => ({ className: tabPosition === i ? "active route" : "route", onClick: () => { setTabPosition(i); }, }); return ( <> <Row className="g-0"> <Col className="m-1" xs="auto"> <Button color="info" onClick={() => { if (isLoggedIn) { setWant(`!${getDefaultAvatarID(siteAvatarID)}`); } else { setLogInOpened(true); } }} > {t("onWantMe")} </Button> </Col> <Col className="m-1"> <Input type="search" value={textInput} onChange={({ target: { value } }) => { setTextInput(value); }} onKeyDown={({ key }) => { if (key === "Enter") { onWant(); } }} placeholder={t("wantAvatarAssist")} /> </Col> <Col className="m-1" xs="auto"> <Button color="success" onClick={onWant}> {t("onWant")} </Button> </Col> <Col className="m-1" xs="auto"> <Button color="danger" onClick={() => { setWant(""); }} > {t("onClose")} </Button> </Col> </Row> {want && !isAvatarLoaded && <Loading />} {isAvatarLoaded && (Array.isArray(avatar) ? ( <ListGroup> {avatar.map(({ avatarID, avatarName, avatarIntro }) => { return ( <ListGroupItem key={avatarID}> <Row className="g-0 route" onClick={() => { setWant(`${encodeURIComponent("#")}${avatarID}`); }} > <Col className="m-1" xs="auto"> <AvatarDrawing avatarID={avatarID} /> </Col> <Col className="m-1" xs="auto"> <AvatarTitle avatarID={avatarID} /> <span> {avatarName} ({avatarID}) </span> <br /> <span className="avatarIntro">{avatarIntro}</span> </Col> </Row> </ListGroupItem> ); })} </ListGroup> ) : ( <> <Row className="g-0"> <Col className="m-1" xs="auto"> <AvatarDrawing avatarID={avatar.avatarID} drawingLength={144} drawingHeight={144} /> </Col> <Col className="m-1" xs="auto"> <AvatarTitle avatarID={avatar.avatarID} /> <span> {avatar.avatarName} ({avatar.avatarID}) </span> <br /> <span> {t("totalCountText", { totalCount: avatar.totalCount })} </span> <br /> <span>{avatar.totalLength}</span> <br /> <span> {t("highestCountText", { highestCount: avatar.highestCount })} </span> <br /> <span>{t("avatarDate", { date: avatar.date })}</span> <br /> <span>LV. {avatar.avatarLevels[0]}</span> <Progress value={ (100 * avatar.avatarLevels[1]) / avatar.avatarLevels[2] } /> <br /> </Col> <Col className="m-1" xs="auto"> <Image alt="" src={`${wwwAPIPath}/drawing?abilityClass5K=${ avatar.avatarAbility5KClass < 0 ? avatar.avatarAbility5KClass : 100 * avatar.avatarAbility5KClass }`} width={96} height={96} /> {avatar.avatarAbility5KPlace > 0 && ( <> <br /> <span className="avatarPlace"> #{avatar.avatarAbility5KPlaceText} </span> <span>/{avatar.avatarAbility5KCountText}</span> <br /> <span>{avatar.avatarAbility5KText} Point</span> </> )} </Col> <Col className="m-1" xs="auto"> <Image alt="" src={`${wwwAPIPath}/drawing?abilityClass7K=${ avatar.avatarAbility7KClass < 0 ? avatar.avatarAbility7KClass : 100 * avatar.avatarAbility7KClass }`} width={96} height={96} /> {avatar.avatarAbility7KPlace > 0 && ( <> <br /> <span className="avatarPlace"> #{avatar.avatarAbility7KPlace} </span> <span>/{avatar.avatarAbility7KCountText}</span> <br /> <span>{avatar.avatarAbility7KText} Point</span> </> )} </Col> <Col className="m-1" xs="auto"> <Image alt="" src={`${wwwAPIPath}/drawing?abilityClass9K=${ avatar.avatarAbility9KClass < 0 ? avatar.avatarAbility9KClass : 100 * avatar.avatarAbility9KClass }`} width={96} height={96} /> {avatar.avatarAbility9KPlace > 0 && ( <> <br /> <span className="avatarPlace"> #{avatar.avatarAbility9KPlace} </span> <span>/{avatar.avatarAbility9KCountText}</span> <br /> <span>{avatar.avatarAbility9KText} Point</span> </> )} </Col> </Row> <Row className="g-0"> <Col className="m-1" xs="auto"> <IntroView avatar={avatar} /> </Col> <Col className="m-1" xs="auto"> <DateView avatar={avatar} /> </Col> <Col className="m-1" xs="auto"> <QuitStatusValues avatar={avatar} /> </Col> </Row> <Nav tabs> <NavItem> <NavLink {...getProperties(0)}> {t("avatarFavoritesText")} </NavLink> </NavItem> <NavItem> <NavLink {...getProperties(1)}>{t("avatarLastsText")}</NavLink> </NavItem> <NavItem> <NavLink {...getProperties(2)}> {t("avatarAbilitiesText")} </NavLink> </NavItem> <NavItem> <NavLink {...getProperties(3)}>{t("wwwLevel")}</NavLink> </NavItem> </Nav> <TabContent activeTab={tabPosition}> <TabPane tabId={0}> <FavoritesView avatar={avatar} /> </TabPane> <TabPane tabId={1}> <LastsView avatar={avatar} /> </TabPane> <TabPane tabId={2}> <AbilitiesView avatar={avatar} /> </TabPane> <TabPane tabId={3}> <WwwLevelsView avatar={avatar} /> </TabPane> </TabContent> </> ))} </> ); });