import { ipcRenderer } from "electron";
import React from "react";
import { Popover } from "antd";
import { useTranslation } from "react-i18next";

import "./CompactUIButton.less";

const isDev = process.env.NODE_ENV === "development";

export default function CompactUIButton(props) {
  const { size } = props;
  const { t } = useTranslation();
  const isCompact = window.isFloating;

  return (
    <div className="compact_ui-button" style={size ? { fontSize: size } : {}}>
      <Popover
        mouseEnterDelay={2}
        mouseLeaveDelay={0}
        key="compact-ui"
        title={
          isCompact
            ? t("info.compact.titleDock")
            : t("info.compact.titleUndock")
        }
        content={
          isCompact
            ? t("info.compact.descriptionDock")
            : t("info.compact.descriptionUndock")
        }
        placement="left"
      >
        <div
          onClick={() => {
            // app.relaunch() work only with packaged app
            if (!isDev)
              if (isCompact)
                ipcRenderer.invoke("main", { event: "switch-to-normal" });
              else ipcRenderer.invoke("main", { event: "switch-to-compact" });
          }}
          onKeyDown={() => {}}
          role="button"
          tabIndex={0}
        >
          {isCompact ? "DOCK" : "UNDOCK"}
        </div>
      </Popover>
    </div>
  );
}