import sc from "@/assets/sc.png";

import sc0 from "@/assets/sc0.png";
import sc2 from "@/assets/sc2.png";
import NewSiteWindow from "@/site/NewSiteWindow";
import SiteCipherWindow from "@/site/SiteCipherWindow";
import SiteComponent from "@/site/SiteComponent";

import useGetSites from "@/site/useGetSites";

import { useSiteStore } from "@/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useState } from "react";
import { Button, Col, Modal, Row } from "reactstrap";

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

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

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

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

  const { data: sites } = useGetSites();

  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] && (
                    <Image alt="" src={scs[siteConfigure]} height={24} />
                  )}{" "}
                  <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} ({t("avatarCountText", { avatarCount })})
                    {hasCipher && (
                      <>
                        {" "}
                        <Image alt="" src={sc} height={24} />
                      </>
                    )}
                  </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>
  );
});