import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Input, Col, Button } from "reactstrap";
import CryptoJS from "crypto-js";
import SiteComponent from "src/site/SiteComponent";

const EventPB = require("src/Event_pb");

export default function NotSignedInInput() {
  const [avatarID, setAvatarID] = useState("");
  const [avatarCipher, setAvatarCipher] = useState("");
  const [autoSignIn, setAutoSignIn] = useState(false);
  const { t } = useTranslation();

  const onSignIn = () => {
    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());
    SiteComponent.send({
      eventID: EventPB.Event.EventID.SIGN_IN,
      text: JSON.stringify({ avatarID, avatarCipher }),
    });
  };

  return (
    <>
      <Col className="m-1" xs="auto">
        <Input
          value={avatarID}
          onChange={({ target: { value } }) => {
            setAvatarID(value);
          }}
          placeholder={t("signInID")}
        />
      </Col>
      <Col className="m-1" xs="auto">
        <Input
          value={avatarCipher}
          onChange={({ target: { value } }) => {
            setAvatarCipher(value);
          }}
          type="password"
          placeholder={t("signInCipher")}
          onKeyDown={({ key }) => {
            if (key === "Enter") {
              onSignIn();
            }
          }}
        />
      </Col>
      <Col className="m-1" xs="auto">
        <Button color="success" onClick={onSignIn} value={t("signIn")} />
      </Col>
      <Col className="m-1" xs="auto">
        <Button
          color={autoSignIn ? "success" : "danger"}
          onClick={() => {
            setAutoSignIn((autoSignIn) => !autoSignIn);
          }}
        >
          {t("autoSignIn")}
        </Button>
      </Col>
    </>
  );
}