import { useState } from "react";
import { observer } from "mobx-react-lite";
import { useTranslation } from "react-i18next";
import { Button, Col, Modal, Row } from "reactstrap";
import { sprintf } from "sprintf-js";
import { useSiteStore } from "src/Stores";
import NewSiteWindow from "src/site/NewSiteWindow";
import SiteComponent from "src/site/SiteComponent";
import SiteCipherWindow from "src/site/SiteCipherWindow";

import sc0 from "src/assets/sc0.png";
import sc2 from "src/assets/sc2.png";
import sc from "src/assets/sc.png";

import scss from "src/site/SiteWindow.module.scss";

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

const scs = [sc0, "", sc2];

export default observer(() => {
  const {
    siteAvatarID,
    sites,
    isSiteWindowOpened,
    setSiteWindowOpened,
    setSiteCipherWindowOpened,
    targetSiteID,
    setNewSiteWindowOpened,
  } = useSiteStore();
  const { t } = useTranslation();

  const [siteID, setSiteID] = useState("");
  const [siteName, setSiteName] = useState("");

  const onClose = () => {
    setSiteWindowOpened(false);
  };

  return (
    <Modal isOpen={isSiteWindowOpened} toggle={onClose} centered>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          {sites.map(
            ({ siteID, hasCipher, siteConfigure, siteName, avatarCount }) => (
              <Row
                key={siteID}
                className={`g-0 ${targetSiteID === siteID ? "target" : ""}`}
              >
                <Col className="m-1" xs="auto">
                  {scs[siteConfigure] && (
                    <img alt="" src={scs[siteConfigure]} className={scss.sc} />
                  )}{" "}
                  <span
                    className="route"
                    onClick={() => {
                      if (hasCipher) {
                        setSiteID(siteID);
                        setSiteName(siteName);
                        setSiteCipherWindowOpened(true);
                      } else {
                        SiteComponent.send({
                          eventID: EventPB.Event.EventID.ENTER_SITE,
                          text: JSON.stringify({ siteID, siteCipher: "" }),
                        });
                        onClose();
                      }
                    }}
                  >
                    {siteName} ({sprintf(t("avatarCountText"), avatarCount)})
                    {hasCipher && (
                      <>
                        {" "}
                        <img alt="" src={sc} className={scss.sc} />
                      </>
                    )}
                  </span>
                </Col>
              </Row>
            ),
          )}
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <Button
            onClick={() => {
              setNewSiteWindowOpened(true);
            }}
            disabled={!siteAvatarID}
          >
            {t("siteWindowNew")}
          </Button>
        </Col>
      </Row>

      <SiteCipherWindow siteID={siteID} siteName={siteName} />
      <NewSiteWindow />
    </Modal>
  );
});
