import { Button, Col, Modal, Row } from "reactstrap";
import { observer } from "mobx-react-lite";
import { useTranslation } from "react-i18next";
import { useSiteStore } from "src/Stores";

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

  return (
    <Modal
      isOpen={isConfigureOpened}
      toggle={() => {
        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);
      }}
      centered
    >
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <Button
            color={saveTraffic ? "success" : "danger"}
            onClick={() => {
              setSaveTraffic(!saveTraffic);
            }}
          >
            {t("siteSaveTraffic")}
          </Button>
        </Col>
      </Row>
      <Row className="justify-content-center g-0">
        <Col className="m-1" xs="auto">
          <Button
            color={autoEnterNotify ? "success" : "danger"}
            onClick={() => {
              setAutoEnterNotify(!autoEnterNotify);
            }}
          >
            {t("siteAutoEnterNotify")}
          </Button>
        </Col>
        <Col className="m-1" xs="auto">
          <Button
            color={autoEnterDefault ? "success" : "danger"}
            onClick={() => {
              setAutoEnterDefault(!autoEnterDefault);
            }}
          >
            {t("siteAutoEnterDefault")}
          </Button>
        </Col>
        <Col className="m-1" xs="auto">
          <Button
            color={autoEnterPlatform ? "success" : "danger"}
            onClick={() => {
              setAutoEnterPlatform(!autoEnterPlatform);
            }}
          >
            {t("siteAutoEnterPlatform")}
          </Button>
        </Col>
      </Row>
    </Modal>
  );
});