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/taehui/AvatarTitle";
import { AvatarLoading } from "src/Loading";

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

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

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

    const to = useTo();

    const onSignIn = async () => {
      if (await signIn(t, 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());
      }
    };

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

    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 () => {
                      if (await notSignIn(t)) {
                        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={({ key }) => {
                if (key === "Enter") {
                  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>
      </>
    );
  },
);

export default AvatarView;