import React, { useEffect, useCallback } from "react";
import { useDispatch, useSelector, batch } from "react-redux";
import { ipcRenderer } from "electron";

import { setIsAutoHide, setIsHide } from "./toggleButtonSlice";

import "./ToggleButton.less";

const kMainWindowChannel = "mainWindow";

export default function ToggleButton() {
  const dispatch = useDispatch();
  const isHide = useSelector((state) => state.togglebutton.isHide);

  useEffect(() => {
    // due if draggable prevent mouseEvents, use 'moved' event instead of onMouseUp
    const handler = (_e, { event, data }) => {
      if (event === "set-ishide") dispatch(setIsHide(data));
    };
    ipcRenderer.on(kMainWindowChannel, handler);

    (async () => {
      const { isHide: isH, isAutoHide: isA } = await ipcRenderer.invoke(
        kMainWindowChannel,
        {
          event: "get-toggle-settings",
        }
      );
      batch(() => {
        dispatch(setIsHide(isH));
        dispatch(setIsAutoHide(isA));
      });
    })();

    return function cleanup() {
      ipcRenderer.removeListener(kMainWindowChannel, handler);
    };
  }, [dispatch]);

  const callback = useCallback(() => {
    ipcRenderer.invoke(kMainWindowChannel, {
      event: "toggle-win",
      data: !isHide,
    });

    dispatch(setIsHide(!isHide));
  }, [dispatch, isHide]);

  return (
    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
    <div
      onClick={callback}
      role="button"
      onKeyDown={() => {}}
      className="toggle-button"
    >
      <div
        className={
          isHide
            ? "toggle-button__triangle-left"
            : "toggle-button__triangle-right"
        }
      />
    </div>
  );
}