import React, { useEffect, useState } from "react";
import { Image } from "antd";

import { ipcRenderer } from "electron";
import { useSelector } from "react-redux";
import supportLogo from "../../../../public/support_logo.png";
import "../../app/locale/i18n";
import "./SupportButton.less";

const kSupportWindow = "openSupportWindow";
const kHelpdeskChannel = "helpdesk-channel";

export default function SupportButton() {
  const [isForm, setIsForm] = useState(false);
  const isCompact = useSelector((state) => state.taskbar.compact);

  useEffect(() => {
    ipcRenderer.on(kHelpdeskChannel, (_e, { event }) => {
      switch (event) {
        case "helpdesk-form-opened":
          setIsForm(true);
          break;
        case "helpdesk-form-closed":
          setIsForm(false);
          break;
        default:
          throw new Error();
      }
    });
  }, []);

  const style = isCompact ? "support-button--compact" : "support-button";

  return (
    <div className={isForm ? `${style} support-button_active` : style}>
      <Image
        preview={false}
        src={supportLogo}
        onClick={() => {
          if (isForm)
            ipcRenderer.invoke(kHelpdeskChannel, {
              event: "helpdesk-form-close",
            });
          else ipcRenderer.invoke(kSupportWindow);
        }}
      />
    </div>
  );
}