import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { observer } from "mobx-react-lite";
import { sprintf } from "sprintf-js";
import {
  Button,
  Col,
  Input,
  ListGroup,
  ListGroupItem,
  Progress,
  Row,
} from "reactstrap";
import { useTo } from "taehui-ts/fe-utility";

import { useAvatarStore, useSiteStore } from "src/Stores";
import DateView from "src/avatar/DateView";
import FavoritesView from "src/avatar/FavoritesView";
import WwwLevelsView from "src/avatar/WwwLevelsView";
import LastsView from "src/avatar/LastsView";
import IntroView from "src/avatar/IntroView";
import { formatText, getDefaultAvatarID } from "src/Utility";
import { wwwAPI } from "src/Www";
import AvatarDrawing from "src/AvatarDrawing";
import QuitStatusValues from "src/avatar/QuitValues";
import AvatarTitle from "src/AvatarTitle";
import { AvatarViewLoading } from "src/Loading";

import scss from "src/avatar/AvatarView.module.scss";

export default observer(() => {
  const {
    wantAvatars,
    input,
    setInput,
    avatarID,
    avatarName,
    totalCount,
    totalLength,
    highestCount,
    date,
    avatarLevels,
    avatarAbility5K,
    avatarAbility5KClass,
    avatarAbility5KPlace,
    avatarAbility5KCount,
    avatarAbility7K,
    avatarAbility7KClass,
    avatarAbility7KPlace,
    avatarAbility7KCount,
    avatarAbility9K,
    avatarAbility9KClass,
    avatarAbility9KPlace,
    avatarAbility9KCount,
    getAvatarFavorites5K,
    getAvatarFavorites7K,
    getAvatarFavorites9K,
    getAvatarFavorites10K,
    getAvatarFavorites14K,
    getAvatarFavorites24K,
    getAvatarFavorites48K,
    getAvatarLasts5K,
    getAvatarLasts7K,
    getAvatarLasts9K,
    getAvatarLasts10K,
    getAvatarLasts14K,
    getAvatarLasts24K,
    getAvatarLasts48K,
    getAvatarWwwLevels,
    getAvatar,
  } = useAvatarStore();
  const { siteAvatarID, isSignedIn, setSignInOpened } = useSiteStore();

  const [isLoading, setLoading] = useState(false);

  const to = useTo();

  const { wantAvatarName } = useParams<{ wantAvatarName: string }>();

  const { t } = useTranslation();

  useEffect(() => {
    setInput(wantAvatarName ?? "");
  }, [wantAvatarName, setInput]);

  useEffect(() => {
    if (wantAvatarName) {
      setLoading(true);
      (async () => {
        if (wantAvatarName.startsWith("#")) {
          await getAvatar(t, {
            avatarID: wantAvatarName.substring(wantAvatarName.indexOf("#") + 1),
          });
        } else {
          await getAvatar(t, { avatarName: wantAvatarName });
        }
        setLoading(false);
      })();
    }
  }, [getAvatar, t, wantAvatarName]);

  useEffect(() => {
    if (avatarID) {
      Promise.all([
        getAvatarFavorites5K(t),
        getAvatarFavorites7K(t),
        getAvatarFavorites9K(t),
        getAvatarFavorites10K(t),
        getAvatarFavorites14K(t),
        getAvatarFavorites24K(t),
        getAvatarFavorites48K(t),
        getAvatarLasts5K(),
        getAvatarLasts7K(),
        getAvatarLasts9K(),
        getAvatarLasts10K(),
        getAvatarLasts14K(),
        getAvatarLasts24K(),
        getAvatarLasts48K(),
        getAvatarWwwLevels(),
      ]);
    }
  }, [
    avatarID,
    getAvatarFavorites10K,
    getAvatarFavorites14K,
    getAvatarFavorites24K,
    getAvatarFavorites48K,
    getAvatarFavorites5K,
    getAvatarFavorites7K,
    getAvatarFavorites9K,
    getAvatarLasts10K,
    getAvatarLasts14K,
    getAvatarLasts24K,
    getAvatarLasts48K,
    getAvatarLasts5K,
    getAvatarLasts7K,
    getAvatarLasts9K,
    getAvatarWwwLevels,
    t,
  ]);

  const onWant = () => {
    to(`/qwilight/avatar/${input}`);
  };

  return (
    <>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <Button
            color="info"
            onClick={() => {
              if (isSignedIn) {
                to(
                  `/qwilight/avatar/${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={() => {
              to("/qwilight/avatar");
            }}
          >
            {t("onClose")}
          </Button>
        </Col>
      </Row>
      {isLoading ? (
        <AvatarViewLoading />
      ) : (
        <>
          {wantAvatars && (
            <ListGroup>
              {wantAvatars.map(({ avatarID, avatarName, avatarIntro }) => {
                return (
                  <ListGroupItem>
                    <Row
                      className="g-0 route"
                      onClick={() => {
                        to(
                          `/qwilight/avatar/${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>
          )}
          {avatarID && (
            <>
              <Row className="g-0">
                <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>{sprintf(t("totalCountText"), totalCount)}</span>
                  <br />
                  <span>{totalLength}</span>
                  <br />
                  <span>{sprintf(t("highestCountText"), highestCount)}</span>
                  <br />
                  <span>{sprintf(t("avatarDate"), date)}</span>
                  <br />
                  <span>LV. {avatarLevels[0]}</span>
                  <Progress value={(100 * avatarLevels[1]) / avatarLevels[2]} />
                  <br />
                </Col>
                <Col className="m-1" xs="auto">
                  <img
                    className={scss.abilityClass}
                    alt=""
                    src={`${wwwAPI}/drawing?abilityClass5K=${
                      avatarAbility5KClass < 0
                        ? avatarAbility5KClass
                        : 100 * avatarAbility5KClass
                    }`}
                  />
                  {avatarAbility5KPlace > 0 && (
                    <>
                      <br />
                      <span className="avatarPlace">
                        ＃{formatText(avatarAbility5KPlace)}
                      </span>
                      <span>／{formatText(avatarAbility5KCount)}</span>
                      <br />
                      <span>{formatText(avatarAbility5K)} Point</span>
                    </>
                  )}
                </Col>
                <Col className="m-1" xs="auto">
                  <img
                    className={scss.abilityClass}
                    alt=""
                    src={`${wwwAPI}/drawing?abilityClass7K=${
                      avatarAbility7KClass < 0
                        ? avatarAbility7KClass
                        : 100 * avatarAbility7KClass
                    }`}
                  />
                  {avatarAbility7KPlace > 0 && (
                    <>
                      <br />
                      <span className="avatarPlace">
                        ＃{formatText(avatarAbility7KPlace)}
                      </span>
                      <span>／{formatText(avatarAbility7KCount)}</span>
                      <br />
                      <span>{formatText(avatarAbility7K)} Point</span>
                    </>
                  )}
                </Col>
                <Col className="m-1" xs="auto">
                  <img
                    className={scss.abilityClass}
                    alt=""
                    src={`${wwwAPI}/drawing?abilityClass9K=${
                      avatarAbility9KClass < 0
                        ? avatarAbility9KClass
                        : 100 * avatarAbility9KClass
                    }`}
                  />
                  {avatarAbility9KPlace > 0 && (
                    <>
                      <br />
                      <span className="avatarPlace">
                        ＃{formatText(avatarAbility9KPlace)}
                      </span>
                      <span>／{formatText(avatarAbility9KCount)}</span>
                      <br />
                      <span>{formatText(avatarAbility9K)} Point</span>
                    </>
                  )}
                </Col>
                <Col className="m-1" xs="auto">
                  <IntroView />
                </Col>
                <Col className="m-1" xs="auto">
                  <DateView />
                </Col>
                <Col className="m-1" xs="auto">
                  <QuitStatusValues />
                </Col>
              </Row>
              <FavoritesView />
              <LastsView />
              <Row className="g-0">
                <Col className="m-1" xs="auto">
                  <WwwLevelsView />
                </Col>
              </Row>
            </>
          )}
        </>
      )}
    </>
  );
});