import { Close, CloseFullscreen, Minimize } from "@mui/icons-material";
import { Box, Button, ButtonGroup, IconButton, Stack, useTheme } from "@mui/material";
import { WebviewWindow } from "@tauri-apps/api/window";
import { useEffect, useState } from "react";
import { useSettings } from "../../contexts/SettingsContext";
import { exit } from "@tauri-apps/api/process";

export const WindowButtons = () => {
  // contexts
  const userTheme = useTheme();
  const { settings } = useSettings();

  // states
  const [appWindow, setAppWindow] = useState<WebviewWindow>();

  // explanation:
  // this is needed due to the server-sided nature of next js,
  // this means that the window object might not be available on first load
  // we will use dynamic imports to load the window object only when needed
  // in hindsight, using next js for this project was a mistake
  // using create-react-app or vite would have been a better choice just to generate a static site
  const initializeAppWindow = async () => {
    const { appWindow } = await import("@tauri-apps/api/window");
    setAppWindow(appWindow);
  };

  const minimize = () => {
    appWindow?.minimize();
  };

  const maximize = () => {
    appWindow?.toggleMaximize();
  };

  const close = async () => {
    await exit(1);
  };

  useEffect(() => {
    initializeAppWindow();
  });

  return (
    <Box
      sx={{
        alignItems: "center",
        display: "flex",
        flexDirection: "row",
      }}
    >
      <Stack
        direction="row"
        spacing={1}
      >
        {settings.window.minimize_button && (
          <IconButton
            onClick={minimize}
            size="small"
            sx={{
              backgroundColor: userTheme.palette.grey[800],
            }}
          >
            <Minimize
              fontSize="inherit"
              sx={{
                backgroundColor: userTheme.palette.grey[800],
              }}
            />
          </IconButton>
        )}
        {settings.window.maximize_button && (
          <IconButton
            onClick={maximize}
            size="small"
            sx={{
              backgroundColor: userTheme.palette.grey[800],
            }}
          >
            <CloseFullscreen fontSize="inherit" />
          </IconButton>
        )}
        <IconButton
          onClick={close}
          size="small"
          sx={{
            backgroundColor: userTheme.palette.grey[800],
          }}
        >
          <Close fontSize="inherit" />
        </IconButton>
      </Stack>
    </Box>
  );
};