import os from "os";
import { ipcRenderer } from "electron";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useSelector, useDispatch } from "react-redux";
import { setInterval } from "timers";
import { Typography, Popover, Button } from "antd";
import { updateIpaddrs, setNextIpId, setAppVersion } from "./infoSlice";
import { useLazyFetchWorkplaceQuery } from "../../apis/backendHttp";

import "../../app/locale/i18n";
import "./InfoComponent.less";
import NotificationBar from "./notification_bar/NotificationBar";
import IndicatorsBar from "./indicators_bar/IndicatorsBar";

const { Text } = Typography;

const kIpUpdateTimeout = 10; // in sec.
const kUpdateChannel = "app-update";
const kChecking = "checking-for-update";

export default function Info(props) {
  const { compact } = props;
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const ipaddrs = useSelector((state) => state.info.ipaddrs);
  const selectedIpId = useSelector((state) => state.info.selectedIpId);
  const addr = ipaddrs[selectedIpId];

  const appVersion = useSelector((state) => state.info.appVersion);
  const [trigger] = useLazyFetchWorkplaceQuery();

  useEffect(() => {
    (async () => {
      const version = await ipcRenderer.invoke("info", {
        event: "getAppVersion",
      });
      dispatch(setAppVersion(version));
    })();

    const ipInterval = setInterval(
      () => dispatch(updateIpaddrs()),
      kIpUpdateTimeout * 1000
    );
    return () => {
      clearInterval(ipInterval);
    };
  }, [dispatch]);

  return (
    <div className={compact ? "info--compact" : "info"}>
      <div className={compact ? "info__pc--compact" : "info__pc"}>
        <Popover
          key="hostname"
          title="Info"
          placement="left"
          content={
            <>
              <Text>Version: {appVersion}</Text>
              <Button
                className="check-update"
                onClick={() => ipcRenderer.invoke(kUpdateChannel, kChecking)}
              >
                ↻
              </Button>
              <Button
                className="check-update"
                onClick={() => {
                  trigger(window.hostname);
                }}
              >
                ↶
              </Button>
              <br />
              <Text>
                OS: {os.release()}, {os.arch()}
              </Text>
            </>
          }
        >
          <Text
            className={compact ? "info__hostname--compact" : "info__hostname"}
          >
            {window.hostname}
          </Text>{" "}
        </Popover>
        {(() => {
          if (addr)
            return (
              <Popover
                key={addr.name}
                title={addr.name}
                placement="left"
                content={
                  <>
                    <Text>{addr.ip}</Text>
                    <br />
                    <Text>{addr.mac}</Text>
                  </>
                }
              >
                <Text
                  className={compact ? "info__ipaddr--compact" : "info__ipaddr"}
                  onClick={() => dispatch(setNextIpId())}
                >
                  {addr.ip}
                </Text>
              </Popover>
            );
          return <div className="info__no_ipaddr">{t("info.noIpaddr")}</div>;
        })()}
      </div>
      <NotificationBar />
      <IndicatorsBar />
    </div>
  );
}