stort/src/components/HeaderBar/Settings/Settings.tsx

import { BugReportOutlined, SettingsOutlined } from "@mui/icons-material";
import { LoadingButton, TabContext, TabList, TabPanel } from "@mui/lab";
import { Box, Button, IconButton, Tab, Tooltip, useTheme } from "@mui/material";
import { useAtom } from "jotai";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useSettings } from "../../../contexts/SettingsContext";
import { stagedSettingsAtom } from "../../../lib/store/jotai/settings";
import { FloatingDialog } from "../../Generic/FloatingDialog";
import { Background } from "./SettingsTabs/Background";
import { Style } from "./SettingsTabs/Style";
import { Window } from "./SettingsTabs/Window";

export const Settings = () => {
  // contexts
  const theme = useTheme();
  const { settings, updateSettings } = useSettings();
  const router = useRouter();

  // atoms
  const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);

  // states
  const [settingsOpenState, setSettingsOpenState] = useState<boolean>(false);
  const [settingsMaximisedState, setSettingsMaximisedState] = useState<boolean>(false);
  const [subTabValue, setSubTabValue] = useState("style");
  const [applyLoading, setApplyLoading] = useState<boolean>(false);
  const [saveLoading, setSaveLoading] = useState<boolean>(false);

  const toggleSettings = () => {
    setSettingsOpenState((prevState) => !prevState);
  };

  const closeSettings = () => {
    setSettingsOpenState(false);
  };

  // logic for switching tabs
  const subTabChangeEvent = (newTabValue: string) => {
    setSubTabValue(newTabValue);
  };

  // set staged settings back to current settings on cancel
  const cancelClickEvent = () => {
    setStagedSettings(settings);
    setSettingsOpenState(false);
  };

  const applyClickEvent = () => {
    setApplyLoading(true);
    updateSettings(stagedSettings);
    setApplyLoading(false);
  };

  const saveClickEvent = () => {
    applyClickEvent();

    closeSettings();
  };

  // set staged settings back to current settings on close
  useEffect(() => {
    if (!settingsOpenState) setStagedSettings(settings);
  }, [settingsOpenState]);

  return (
    <FloatingDialog
      actionButtons={
        <>
          <IconButton
            onClick={() => {
              router.push("/testing");
            }}
            sx={{
              mr: 1,
            }}
          >
            <BugReportOutlined />
          </IconButton>
        </>
      }
      body={
        <Box
          sx={{
            border: "1px solid " + theme.palette.grey[700],
            borderRadius: settings.style.radius + "px",
            display: "flex",
            flexDirection: "column",
            flexGrow: 1,
            my: 2,
            overflow: "hidden",
            p: 0,
          }}
        >
          <TabContext value={subTabValue}>
            <TabList
              onChange={(e, value) => {
                subTabChangeEvent(value);
              }}
              scrollButtons={true}
              sx={{
                borderBottom: "1px solid " + theme.palette.divider,
              }}
              variant="scrollable"
            >
              <Tab
                label="Style"
                value="style"
              />
              <Tab
                label="Background"
                value="background"
              />
              <Tab
                label="Window"
                value="window"
              />
            </TabList>
            <Box
              overflow="auto"
              sx={{
                height: "100%",
                width: "100%",
              }}
            >
              <TabPanel
                sx={{ p: 2 }}
                value="style"
              >
                <Style />
              </TabPanel>
              <TabPanel
                sx={{ p: 2 }}
                value="background"
              >
                <Background />
              </TabPanel>
              <TabPanel
                sx={{ p: 2 }}
                value="window"
              >
                <Window />
              </TabPanel>
            </Box>
          </TabContext>
        </Box>
      }
      bottomBar={
        <Box
          sx={{
            display: "flex",
            justifyContent: "flex-end",
            px: 0,
          }}
        >
          <Button
            onClick={cancelClickEvent}
            size="small"
            sx={{
              mr: 1,
            }}
            variant="outlined"
          >
            Cancel
          </Button>

          <LoadingButton
            loading={applyLoading}
            onClick={applyClickEvent}
            size="small"
            sx={{
              mr: 1,
            }}
            variant="outlined"
          >
            Apply
          </LoadingButton>
          <LoadingButton
            loading={saveLoading}
            onClick={saveClickEvent}
            size="small"
            variant="contained"
          >
            Save
          </LoadingButton>
        </Box>
      }
      close={closeSettings}
      maximisedState={settingsMaximisedState}
      openButton={
        <Tooltip title="Settings">
          <IconButton
            onClick={toggleSettings}
            size="small"
          >
            <SettingsOutlined />
          </IconButton>
        </Tooltip>
      }
      openState={settingsOpenState}
      setMaximisedState={setSettingsMaximisedState}
      title="Settings"
    />
  );
};