import { useEffect } 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 {
  Input,
  Button,
  Row,
  Col,
  Progress,
  ListGroup,
  ListGroupItem,
} from "reactstrap";
import { useTo } from "taehui-ts/fe-utility";

import { useAvatarStore, useSiteStore } from "src/Stores";
import DateView from "src/avatar/DateView";
import Favorites from "src/avatar/Favorites";
import Levels from "src/avatar/Levels";
import Lasts from "src/avatar/Lasts";
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 { AvatarLoading } 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,
    isLoading,
    getAvatar,
  } = useAvatarStore();
  const { siteAvatarID, isSignedIn, setSignInOpened } = useSiteStore();

  const to = useTo();

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

  const { t } = useTranslation();

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

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

  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 ? (
        <AvatarLoading />
      ) : (
        <>
          {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>
              <Col className="m-1" xs="auto">
                <Favorites />
              </Col>
              <Col className="m-1" xs="auto">
                <Lasts />
              </Col>
              <Col className="m-1" xs="auto">
                <Levels />
              </Col>
            </Row>
          )}
        </>
      )}
    </>
  );
});