import usePostDrawing from "@/query/usePostDrawing";
import useWipeTotem from "@/query/useWipeTotem";
import { useTaehuiStore } from "@/state/Stores";
import { wwwAPIPath } from "@/utilities/wwwAPI";
import dayjs from "dayjs";
import { observer } from "mobx-react-lite";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { Back, PencilFill } from "react-bootstrap-icons";
import Button from "react-bootstrap/Button";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";

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

    const { push } = useRouter();

    const { mutateAsync: postDrawing } = usePostDrawing();
    const { mutateAsync: wipeTotem } = useWipeTotem();

    return (
      <Row className="flex-nowrap">
        <Col xs="auto">
          <Image
            className="rounded border route"
            alt=""
            src={`${wwwAPIPath}/avatar/drawing/${avatarID}?${dayjs().valueOf()}`}
            width={48}
            height={48}
            onClick={() => {
              const inputElement = document.createElement("input");
              inputElement.type = "file";
              inputElement.accept = "image/png";
              inputElement.addEventListener("change", async ({ target }) => {
                const file = (target as HTMLInputElement).files?.[0];
                if (file) {
                  await postDrawing({ file });
                }
              });
              inputElement.click();
            }}
          />
        </Col>
        <Col>
          <Stack gap={2}>
            <span className="text-nowrap">
              {avatarName} ({avatarID})
            </span>
            <ButtonGroup>
              <Button
                variant="warning"
                disabled={!avatarID}
                onClick={() => {
                  push("/avatar");
                }}
              >
                <PencilFill />
              </Button>
              <Button
                disabled={!avatarID}
                variant="danger"
                onClick={async () => {
                  await wipeTotem({ totem });
                  window.localStorage.removeItem("avatarID");
                  window.localStorage.removeItem("avatarCipher");
                  window.localStorage.removeItem("autoLogIn");
                  setAvatarCipher("");
                  setAutoLogIn(false);
                }}
              >
                <Back />
              </Button>
            </ButtonGroup>
          </Stack>
        </Col>
      </Row>
    );
  },
);