import { SettingsOutlined } from "@mui/icons-material";
import { LoadingButton } from "@mui/lab";
import { Box, Button, IconButton, Typography, useTheme } from "@mui/material";
import { useAtom } from "jotai";
import { useEffect, useState } from "react";
import { useSettings } from "../../../contexts/SettingsContext";
import { settingsAtom } from "../../../lib/store/jotai/settings";
import { FloatingDialog } from "../../Generic/FloatingDialog";

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

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

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

  const toggleSettings = () => {
    // reset the settings maximised state
    setSettingsMaximisedState(false);
    setSettingsOpenState((prevState) => !prevState);
  };

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

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

  const applyClickEvent = () => {
    setApplyLoading(true);

    updateSettings(stagedSettings);

    setApplyLoading(false);
  };

  const saveClickEvent = () => {
    setSaveLoading(true);

    updateSettings(stagedSettings);

    setSaveLoading(false);
    closeSettings();
  };

  useEffect(() => {
    setStagedSettings(settings);
  }, [setStagedSettings, settings]);

  return (
    <FloatingDialog
      body={<Typography>Settings</Typography>}
      bottomBar={
        <Box
          sx={{
            display: "flex",
            justifyContent: "flex-end",
            px: 0,
          }}
        >
          <Button
            onClick={() => setSettingsOpenState(false)}
            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={
        <IconButton
          onClick={toggleSettings}
          size="small"
        >
          <SettingsOutlined />
        </IconButton>
      }
      openState={settingsOpenState}
      setMaximisedState={setSettingsMaximisedState}
      title="Settings"
    />
  );
};
