/* eslint-disable camelcase */

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

import "./IconButton.less";
import defaultIcon from "../../../../../public/window_exe_icon.png";

// dont use import from main due bundle isolation
const kFocus = "focus";

const focus = async (hwnd) => {
  await ipcRenderer.invoke(kFocus, hwnd);
};

export default (props) => {
  const [iconData, setIconData] = useState();

  const { program, active } = props;
  const { title, hwnd, path } = program; // {..., pid, threadPid}

  useEffect(() => {
    (async () => {
      if (path) {
        const data = await ipcRenderer.invoke("extract-icon", path);
        if (data) setIconData(data);
      }
    })();
  }, [path]);

  return (
    <div className={active ? "icon-button_active icon-button" : "icon-button"}>
      <Tooltip mouseEnterDelay={1} placement="right" title={title}>
        <Image
          src={iconData || defaultIcon}
          preview={false}
          onClick={() => focus(hwnd)}
        />
        {(() => {
          if (iconData) return null;
          return (
            <div
              className={
                active
                  ? "icon-button__title_active icon-button__title"
                  : "icon-button__title"
              }
            >
              {title}
            </div>
          );
        })()}
      </Tooltip>
    </div>
  );
};