import { useState } from "react";
import { Button, Col, Input, Modal, Row } from "reactstrap";
import { observer } from "mobx-react-lite";

import { useSiteStore } from "@/Stores";
import SiteComponent from "@/site/SiteComponent";
import { useTranslations } from "next-intl";

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

export default observer(() => {
  const { isNewSiteWindowOpened, setSiteWindowOpened, setNewSiteWindowOpened } =
    useSiteStore();
  const [siteName, setSiteName] = useState("");
  const [siteCipher, setSiteCipher] = useState("");
  const t = useTranslations();

  const onNewSite = () => {
    SiteComponent.send({
      eventID: EventPB.Event.EventID.NEW_SITE,
      text: JSON.stringify({
        siteName: siteName,
        siteCipher: siteCipher,
        isNetSite: false,
      }),
    });
    setNewSiteWindowOpened(false);
    setSiteWindowOpened(false);
  };

  return (
    <Modal
      isOpen={isNewSiteWindowOpened}
      toggle={() => {
        setNewSiteWindowOpened(false);
      }}
      centered
    >
      <Row className="g-0">
        <Col className="m-1">
          <Input
            autoComplete="off"
            value={siteName}
            onChange={({ target: { value } }) => {
              setSiteName(value);
            }}
            placeholder={t("siteName")}
          />
        </Col>
      </Row>
      <Row className="g-0">
        <Col className="m-1">
          <Input
            autoComplete="off"
            value={siteCipher}
            onChange={({ target: { value } }) => {
              setSiteCipher(value);
            }}
            type="password"
            placeholder={t("siteCipher")}
            onKeyDown={({ key }) => {
              if (key === "Enter") {
                onNewSite();
              }
            }}
          />
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <Button onClick={onNewSite}>{t("inputNewSite")}</Button>
        </Col>
      </Row>
    </Modal>
  );
});