text: import { Button, Classes, Icon } from "@blueprintjs/core";
  import React from "react";
  import styled from "styled-components";
  import { useTheme } from "../shared/stores/ThemeStore";
  
  const MenuContainer = styled.div`
    -webkit-app-region: drag;
    z-index: 1;
    position: fixed;
    align-items: center;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    height: 30px;
    width: 100%;
    background: ${props =>
      props.theme === Classes.DARK ? "#293742" : "#BFCCD6"};
    justify-content: space-between;
  
    .menu-container {
      display: flex;
      align-items: center;
      &: first;
      .menu-button {
        -webkit-app-region: no-drag;
        &:hover {
          cursor: pointer;
        }
      }
      .title {
        padding-left: 10px;
      }
    }
  
    .theme-changer {
      -webkit-app-region: no-drag;
      margin-left: auto;
      margin-right: 50px;
    }
  
    .window-effects-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      -webkit-app-region: no-drag;
      .theme-changer {
        &:hover {
          cursor: pointer;
        }
      }
      .window-button {
        border-radius: 0;
        width: 3.2em;
      }
    }
  `;
  
  type TMinMaxIconType = "duplicate" | "square";
  
  const DesktopMenu = () => {
    // Importing electron here so that code doesn't give compilation error when running in browser
    const { remote, ipcRenderer } = require("electron");
    const currentWindow = remote.getCurrentWindow();
    const startingIcon: TMinMaxIconType = currentWindow.isMaximized()
      ? "duplicate"
      : "square";
  
    const openAppMenu = e => {
      ipcRenderer.send(`display-app-menu`, {
        x: e.x,
        y: e.y
      });
    };
  
    const { theme, setTheme } = useTheme();
    const [maximizeIcon, setMaximizeIcon] = React.useState<TMinMaxIconType>(
      startingIcon
    );
    const [isCloseButtonMinimal, setIsCloseButtonMinimal] = React.useState<
      boolean
    >(true);
  
    return (
      <MenuContainer theme={theme}>
        <span className="menu-container">
          <Button
            className="menu-button"
            icon="menu"
            minimal={true}
            onContextMenu={openAppMenu}
            onClick={openAppMenu}
          />
          <span className="title">Ten Hands</span>
        </span>
        <div className="theme-changer">
          {theme === Classes.DARK ? (
            <Button
              data-testid="theme-light"
              icon="moon"
              onClick={() => setTheme(`light`)}
              minimal={true}
            >
              Dark
            </Button>
          ) : (
            <Button
              data-testid="theme-dark"
              icon="flash"
              onClick={() => setTheme(Classes.DARK)}
              minimal={true}
            >
              Light
            </Button>
          )}
        </div>
  
        <span className="window-effects-container">
          <Button
            minimal={true}
            className="window-button minimize-button"
            onClick={() => {
              currentWindow.isMinimizable() && currentWindow.minimize();
            }}
          >
            <Icon icon="minus" />
          </Button>
          <Button
            minimal={true}
            className="window-button min-max-button"
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center"
            }}
            onClick={() => {
              if (currentWindow.isMaximized()) {
                currentWindow.unmaximize();
                setMaximizeIcon("square");
              } else {
                currentWindow.maximize();
                setMaximizeIcon("duplicate");
              }
            }}
          >
            <Icon icon={maximizeIcon} iconSize={10} className="all-center" />
          </Button>
          <Button
            minimal={isCloseButtonMinimal}
            className="window-button close-button"
            intent={!isCloseButtonMinimal ? "danger" : "none"}
            onMouseOver={() => setIsCloseButtonMinimal(false)}
            onMouseOut={() => setIsCloseButtonMinimal(true)}
            onClick={() => {
              remote.getCurrentWindow().close();
            }}
          >
            <Icon icon="cross" />
          </Button>
        </span>
      </MenuContainer>
    );
  };
  
  export default DesktopMenu;
  