import usePostGetTotem from "@/query/usePostGetTotem";
import { useTaehuiStore } from "@/state/Stores";
import CryptoJS from "crypto-js";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useState } from "react";
import { Button, Col, Input, Row } from "reactstrap";

export default observer(() => {
  const { autoLogIn, avatarCipher, setAvatarCipher, setAutoLogIn } =
    useTaehuiStore();

  const t = useTranslations();

  const [avatarID, setAvatarID] = useState("");

  const { mutateAsync: postGetTotem } = usePostGetTotem();

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

  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 onLogIn();
              }
            }}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <Button color="success" onClick={onLogIn}>
            {t("logIn")}
          </Button>
        </Col>
        <Col className="m-1" xs="auto">
          <Button
            color={autoLogIn ? "success" : "danger"}
            onClick={() => {
              setAutoLogIn(!autoLogIn);
            }}
          >
            {t("autoLogIn")}
          </Button>
        </Col>
        <Col className="m-1" xs="auto">
          <Link href="/avatar/w">
            <Button color="primary">{t("signUp")}</Button>
          </Link>
        </Col>
      </Row>
    </>
  );
});