import { ipcRenderer } from "electron";
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useTranslation } from "react-i18next";
import { Typography, Popover } from "antd";
import { setNotice, clearNotice } from "./notificationSlice";

import "./NotificationBar.less";

const { Text } = Typography;

const kUpdateChannel = "app-update";
const kUpdateDownloaded = "update-downloaded";
const kError = "error";
const kChecking = "checking-for-update";
const kUpdateAvailable = "update-available";
const kDownloadProgress = "download-progress";

const kSuccess = "success";
const kWarning = "warning";
const kInfo = "info";
export default function NotificationBar() {
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const notice = useSelector((state) => state.notification.notice);

  useEffect(() => {
    ipcRenderer.on(kUpdateChannel, (_event, message) => {
      let title;
      let type;
      let progress = 0;
      switch (message.event) {
        case kChecking:
          dispatch(clearNotice());
          return;
        case kUpdateDownloaded:
          title = t("notification.update.downloaded");
          type = kSuccess;
          break;
        case kError:
          title = t("notification.update.error");
          type = kError;
          break;
        case kUpdateAvailable:
          title = t("notification.update.available");
          type = kInfo;
          break;
        // case kUpdateNotAvailable:
        //   title = t("notification.update.notAvailable");
        //   type = kError;
        //   break;
        case kDownloadProgress:
          title = t("notification.update.downloadInProgress");
          progress = Math.round(message.data.progress.percent);
          type = kSuccess;
          break;
        default:
          title = "Update info";
          type = kInfo;
          break;
      }

      dispatch(
        setNotice({
          title,
          text: JSON.stringify(message.data),
          event: message.event,
          type,
          progress,
        })
      );
    });
  }, [dispatch, t]);

  let titleStyle;
  switch (notice.type) {
    case kSuccess:
      titleStyle = "notification__title_success";
      break;
    case kInfo:
      titleStyle = "notification__title_info";
      break;
    case kWarning:
      titleStyle = "notification__title_warning";
      break;
    case kError:
      titleStyle = "notification__title_error";
      break;
    default:
      titleStyle = "";
      break;
  }

  return (
    <div className="notification">
      <Popover
        title={notice.event}
        mouseEnterDelay={2}
        mouseLeaveDelay={0}
        placement="left"
        content={<Text>{notice.text}</Text>}
      >
        <div className={`${titleStyle} notification__title`}>
          {notice.title}
        </div>
        <div style={{ width: `${notice.progress}%` }} className="progressbar">
          <span />
        </div>
      </Popover>
    </div>
  );
}