import NewSiteWindow from "@/app/[language]/site/components/NewSiteWindow";
import SiteCipherWindow from "@/app/[language]/site/components/SiteCipherWindow";
import wsAPI from "@/app/[language]/site/lib/wsAPI";
import useGetSites from "@/app/[language]/site/query/useGetSites";
import sc from "@/assets/sc.png";
import sc0 from "@/assets/sc0.png";
import sc2 from "@/assets/sc2.png";
import { useSiteStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useState } from "react";
import Modal from "react-bootstrap/Modal";
import ListGroup from "react-bootstrap/ListGroup";
import ListGroupItem from "react-bootstrap/ListGroupItem";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import ModalBody from "react-bootstrap/ModalBody";
import ModalFooter from "react-bootstrap/ModalFooter";
import { PencilFill, Plus } from "react-bootstrap-icons";

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 show={isSiteWindowOpened} onHide={onClose}>
        <ModalBody>
          <ListGroup>
            {sites.map(
              ({ siteID, hasCipher, siteConfigure, siteName, avatarCount }) => (
                <ListGroupItem key={siteID} active={targetSiteID === siteID}>
                  <Row
                    className="route"
                    onClick={() => {
                      if (hasCipher) {
                        setSiteID(siteID);
                        setSiteName(siteName);
                        setSiteCipherWindowOpened(true);
                      } else {
                        wsAPI.send({
                          eventID: EventPB.Event.EventID.ENTER_SITE,
                          text: JSON.stringify({ siteID, siteCipher: "" }),
                        });
                        onClose();
                      }
                    }}
                  >
                    <Col xs="auto">
                      <Image alt="" src={scs[siteConfigure]} height={24} />
                    </Col>
                    <Col>{siteName}</Col>
                    {hasCipher && (
                      <Col xs="auto">
                        <Image alt="" src={sc} height={24} />
                      </Col>
                    )}
                    <Col xs="auto">{t("avatarCountText", { avatarCount })}</Col>
                  </Row>
                </ListGroupItem>
              ),
            )}
          </ListGroup>
        </ModalBody>
        <ModalFooter>
          <Button
            variant="success"
            onClick={() => {
              setNewSiteWindowOpened(true);
            }}
            disabled={!siteAvatarID}
          >
            <PencilFill />
          </Button>
        </ModalFooter>
      </Modal>

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