import { observer } from "mobx-react-lite";
import { useState } from "react";
import { Button, Col, Input, Row } from "reactstrap";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import CryptoJS from "crypto-js";
import { useTo } from "taehui-ts/fe-utility";

import { useAvatarStore } from "src/Stores";
import AvatarTitle from "src/AvatarTitle";
import { AvatarViewLoading } from "src/Loading";
import usePostGetTotem from "src/avatar/usePostGetTotem";
import useWipeTotem from "src/avatar/useWipeTotem";

export default observer(
  ({ isSessionLoading }: { isSessionLoading: boolean }) => {
    const { t } = useTranslation();

    const { totem, taehuiAvatarID, taehuiAvatarName } = useAvatarStore();

    const [avatarID, setAvatarID] = useState("");
    const [avatarCipher, setAvatarCipher] = useState("");
    const [autoSignIn, setAutoSignIn] = useState(false);

    const to = useTo();

    const { mutateAsync: postGetTotem } = usePostGetTotem();

    const onSignIn = async () => {
      await postGetTotem({ avatarID, avatarCipher });
      if (autoSignIn) {
        window.localStorage.setItem("avatarID", avatarID);
        window.localStorage.setItem(
          "avatarCipher",
          CryptoJS.AES.encrypt(
            avatarCipher,
            "591A6F91-2A27-4A88-88FA-0FEB7CB5FD94",
          ).toString(),
        );
      }
      window.localStorage.setItem("autoSignIn", autoSignIn.toString());
    };

    const { mutateAsync: wipeTotem } = useWipeTotem();

    if (isSessionLoading) {
      return <AvatarViewLoading />;
    }

    if (totem) {
      return (
        <Row className="g-0">
          <AvatarTitle avatarID={taehuiAvatarID} avatarName={taehuiAvatarName}>
            <Row className="g-0">
              <Col className="m-1" xs="auto">
                <Button
                  color="danger"
                  onClick={async () => {
                    await wipeTotem({ totem });
                    window.localStorage.removeItem("avatarID");
                    window.localStorage.removeItem("avatarCipher");
                    window.localStorage.removeItem("autoSignIn");
                    setAvatarCipher("");
                    setAutoSignIn(false);
                  }}
                >
                  {t("notSignedIn")}
                </Button>
              </Col>
              <Col className="m-1" xs="auto">
                <Button
                  onClick={() => {
                    to("/avatar/m");
                  }}
                >
                  {t("doModifyAvatar")}
                </Button>
              </Col>
            </Row>
          </AvatarTitle>
        </Row>
      );
    }

    return (
      <>
        <Row className="g-0">
          <Col className="m-1" xs="auto">
            <Input
              placeholder={t("avatarID")}
              value={avatarID}
              onChange={({ target: { value } }) => {
                setAvatarID(value);
              }}
            />
          </Col>
        </Row>
        <Row className="g-0">
          <Col className="m-1" xs="auto">
            <Input
              type="password"
              placeholder={t("avatarCipher")}
              value={avatarCipher}
              onChange={({ target: { value } }) => {
                setAvatarCipher(value);
              }}
              onKeyDown={async ({ key }) => {
                if (key === "Enter") {
                  await onSignIn();
                }
              }}
            />
          </Col>
          <Col className="m-1" xs="auto">
            <Button color="success" onClick={onSignIn}>
              {t("signIn")}
            </Button>
          </Col>
          <Col className="m-1" xs="auto">
            <Button
              color={autoSignIn ? "success" : "danger"}
              onClick={() => {
                setAutoSignIn((prevState) => !prevState);
              }}
            >
              {t("autoSignIn")}
            </Button>
          </Col>
          <Col className="m-1" xs="auto">
            <Link to="/avatar/w">
              <Button color="primary">{t("signUp")}</Button>
            </Link>
          </Col>
        </Row>
      </>
    );
  },
);