import wsAPI from "@/app/[language]/site/lib/wsAPI";
import { useSiteStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { UnlockFill } from "react-bootstrap-icons";
import Button from "react-bootstrap/Button";
import FormControl from "react-bootstrap/FormControl";
import InputGroup from "react-bootstrap/InputGroup";
import InputGroupText from "react-bootstrap/InputGroupText";
import Modal from "react-bootstrap/Modal";
import ModalBody from "react-bootstrap/ModalBody";
import ModalFooter from "react-bootstrap/ModalFooter";
import Stack from "react-bootstrap/Stack";

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

export default observer(
  ({ siteID, siteName }: { siteID: string; siteName: string }) => {
    const {
      setSiteWindowOpened,
      isSiteCipherWindowOpened,
      setSiteCipherWindowOpened,
    } = useSiteStore();
    const [siteCipher, setSiteCipher] = useState("");
    const t = useTranslations();

    const onEnterSite = () => {
      wsAPI.send({
        eventID: EventPB.Event.EventID.ENTER_SITE,
        text: JSON.stringify({ siteID, siteCipher }),
      });
      setSiteCipherWindowOpened(false);
      setSiteWindowOpened(false);
    };

    return (
      <Modal
        show={isSiteCipherWindowOpened}
        onHide={() => {
          setSiteCipherWindowOpened(false);
        }}
      >
        <ModalBody>
          <Stack gap={2}>
            <InputGroup>
              <InputGroupText>{t("siteName")}</InputGroupText>
              <FormControl type="text" value={siteName} disabled />
            </InputGroup>
            <InputGroup>
              <InputGroupText>{t("siteCipher")}</InputGroupText>
              <FormControl
                type="password"
                value={siteCipher}
                placeholder={t("siteCipher")}
                onChange={({ target: { value } }) => {
                  setSiteCipher(value);
                }}
                onKeyDown={({ key }) => {
                  if (key === "Enter") {
                    onEnterSite();
                  }
                }}
              />
            </InputGroup>
          </Stack>
        </ModalBody>
        <ModalFooter>
          <Button variant="success" onClick={onEnterSite}>
            <UnlockFill />
          </Button>
        </ModalFooter>
      </Modal>
    );
  },
);