import AvatarTitle from "@/components/AvatarTitle";
import useWipeTotem from "@/query/useWipeTotem";
import { useTaehuiStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { Button, Col, Row } from "reactstrap";
import { useTo } from "taehui-ts/fe-utilities";

export default observer<{ avatarID: string; avatarName: string }>(
  ({ avatarID, avatarName }) => {
    const { totem, setAvatarCipher, setAutoLogIn } = useTaehuiStore();

    const t = useTranslations();

    const to = useTo();

    const { mutateAsync: wipeTotem } = useWipeTotem();

    return (
      <Row className="g-0">
        <AvatarTitle avatarID={avatarID} avatarName={avatarName}>
          <Row className="g-0">
            <Col className="m-1" xs="auto">
              <Button
                disabled={!avatarID}
                color="danger"
                onClick={async () => {
                  await wipeTotem({ totem });
                  window.localStorage.removeItem("avatarID");
                  window.localStorage.removeItem("avatarCipher");
                  window.localStorage.removeItem("autoLogIn");
                  setAvatarCipher("");
                  setAutoLogIn(false);
                }}
              >
                {t("notLoggedIn")}
              </Button>
            </Col>
            <Col className="m-1" xs="auto">
              <Button
                disabled={!avatarID}
                onClick={() => {
                  to("/avatar/m");
                }}
              >
                {t("doModifyAvatar")}
              </Button>
            </Col>
          </Row>
        </AvatarTitle>
      </Row>
    );
  },
);