import { useSiteStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import FormCheck from "react-bootstrap/FormCheck";
import Modal from "react-bootstrap/Modal";
import ModalBody from "react-bootstrap/ModalBody";
import Stack from "react-bootstrap/Stack";

export default observer(() => {
  const {
    isConfigureOpened,
    setConfigureOpened,
    saveTraffic,
    setSaveTraffic,
    autoEnterNotify,
    setAutoEnterNotify,
    autoEnterDefault,
    setAutoEnterDefault,
    autoEnterPlatform,
    setAutoEnterPlatform,
  } = useSiteStore();
  const t = useTranslations();

  return (
    <Modal
      show={isConfigureOpened}
      onHide={() => {
        window.localStorage.setItem("saveTraffic", saveTraffic.toString());
        window.localStorage.setItem(
          "autoEnterNotify",
          autoEnterNotify.toString(),
        );
        window.localStorage.setItem(
          "autoEnterDefault",
          autoEnterDefault.toString(),
        );
        window.localStorage.setItem(
          "autoEnterPlatform",
          autoEnterPlatform.toString(),
        );
        setConfigureOpened(false);
      }}
    >
      <ModalBody>
        <Stack gap={2}>
          <FormCheck
            id="saveTraffic"
            label={t("siteSaveTraffic")}
            checked={saveTraffic}
            onChange={() => {
              setSaveTraffic(!saveTraffic);
            }}
          />
          <FormCheck
            id="autoEnterNotify"
            label={t("siteAutoEnterNotify")}
            checked={autoEnterNotify}
            onChange={() => {
              setAutoEnterNotify(!autoEnterNotify);
            }}
          />
          <FormCheck
            id="autoEnterDefault"
            label={t("siteAutoEnterDefault")}
            checked={autoEnterDefault}
            onChange={() => {
              setAutoEnterDefault(!autoEnterDefault);
            }}
          />
          <FormCheck
            id="autoEnterPlatform"
            label={t("siteAutoEnterPlatform")}
            checked={autoEnterPlatform}
            onChange={() => {
              setAutoEnterPlatform(!autoEnterPlatform);
            }}
          />
        </Stack>
      </ModalBody>
    </Modal>
  );
});