"use client";

import Loading from "@/app/[language]/avatar/loading";
import scss from "@/app/[language]/avatar/page.module.scss";
import AbilitiesView from "@/avatar/AbilitiesView";
import DateView from "@/avatar/DateView";
import FavoritesView from "@/avatar/FavoritesView";
import IntroView from "@/avatar/IntroView";
import LastsView from "@/avatar/LastsView";
import QuitStatusValues from "@/avatar/QuitStatusValues";
import useGetAvatar from "@/avatar/useGetAvatar";
import WwwLevelsView from "@/avatar/WwwLevelsView";
import AvatarDrawing from "@/AvatarDrawing";
import AvatarTitle from "@/AvatarTitle";
import { useAvatarStore, useSiteStore } from "@/Stores";
import { getDefaultAvatarID } from "@/Utility";
import { wwwAPI } from "@/Www";
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 { sprintf } from "sprintf-js";
import { useWant } from "taehui-ts/fe-utility";

export default observer(() => {
  const { input, setInput, tabPosition, setTabPosition } = useAvatarStore();
  const { siteAvatarID, isSignedIn, setSignInOpened } = useSiteStore();

  const { want, setWant } = useWant("/avatar");

  const t = useTranslations();

  useEffect(() => {
    setInput(want);
  }, [want, setInput]);

  const { isFetched: isAvatarLoaded, data: avatar } = useGetAvatar();

  const onWant = () => {
    setWant(input);
  };

  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 (isSignedIn) {
                setWant(
                  `${encodeURIComponent("#")}${getDefaultAvatarID(
                    siteAvatarID,
                  )}`,
                );
              } else {
                setSignInOpened(true);
              }
            }}
          >
            {t("onWantMe")}
          </Button>
        </Col>
        <Col className="m-1">
          <Input
            type="search"
            value={input}
            onChange={({ target: { value } }) => {
              setInput(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>{sprintf(t("totalCountText"), avatar.totalCount)}</span>
                <br />
                <span>{avatar.totalLength}</span>
                <br />
                <span>
                  {sprintf(t("highestCountText"), avatar.highestCount)}
                </span>
                <br />
                <span>{sprintf(t("avatarDate"), 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
                  className={scss.abilityClass}
                  alt=""
                  src={`${wwwAPI}/drawing?abilityClass5K=${
                    avatar.avatarAbility5KClass < 0
                      ? avatar.avatarAbility5KClass
                      : 100 * avatar.avatarAbility5KClass
                  }`}
                />
                {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
                  className={scss.abilityClass}
                  alt=""
                  src={`${wwwAPI}/drawing?abilityClass7K=${
                    avatar.avatarAbility7KClass < 0
                      ? avatar.avatarAbility7KClass
                      : 100 * avatar.avatarAbility7KClass
                  }`}
                />
                {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
                  className={scss.abilityClass}
                  alt=""
                  src={`${wwwAPI}/drawing?abilityClass9K=${
                    avatar.avatarAbility9KClass < 0
                      ? avatar.avatarAbility9KClass
                      : 100 * avatar.avatarAbility9KClass
                  }`}
                />
                {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>
          </>
        ))}
    </>
  );
});