import wsAPI from "@/app/[language]/site/lib/wsAPI";
import AvatarDrawing from "@/components/AvatarDrawing";
import { useTranslations } from "next-intl";
import { Back } from "react-bootstrap-icons";
import Button from "react-bootstrap/Button";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";

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

export default function LoggedInAvatarView({
  avatarID,
  avatarName,
}: {
  avatarID: string;
  avatarName: string;
}) {
  const t = useTranslations();

  return (
    <Row className="flex-nowrap">
      <Col xs="auto">
        <AvatarDrawing avatarID={avatarID} />
      </Col>
      <Col>
        <Stack gap={2}>
          <span className="text-nowrap">
            {avatarName} ({avatarID})
          </span>
          <Button
            disabled={!avatarID}
            variant="danger"
            onClick={async () => {
              window.localStorage.removeItem("avatarCipher");
              window.localStorage.removeItem("autoLogIn");
              wsAPI.send({
                eventID: EventPB.Event.EventID.NOT_LOG_IN,
              });
            }}
          >
            <Back />
          </Button>
        </Stack>
      </Col>
    </Row>
  );
}