import { AlertOutlined } from "@ant-design/icons";
import { Button, notification, Space } from "antd";
import i18n from "i18next";
import React from "react";
import * as serviceWorkerRegistration from "../serviceWorkerRegistration";
import { store } from "../redux/store";

const onServiceWorkerUpdate = (registration) => {
  console.log("onServiceWorkerUpdate", registration);

  const btn = (
    <Space flex>
      <Button
        onClick={async () => {
          window.open("https://imex-online.noticeable.news/", "_blank");
        }}
      >
        {i18n.t("general.actions.viewreleasenotes")}
      </Button>
      <Button
        type="primary"
        onClick={async () => {
          if (registration && registration.waiting) {
            await registration.unregister();
            // Makes Workbox call skipWaiting()
            registration.waiting.postMessage({ type: "SKIP_WAITING" });
            // Once the service worker is unregistered, we can reload the page to let
            // the browser download a fresh copy of our app (invalidating the cache)
            window.location.reload();
          }
        }}
      >
        {i18n.t("general.actions.refresh")}
      </Button>
    </Space>
  );

  store.dispatch()

  notification.open({
    icon: <AlertOutlined />,
    message: i18n.t("general.messages.newversiontitle"),
    description: i18n.t("general.messages.newversionmessage"),
    duration: 0,
    btn,
    key: "updateavailable",
  });
};

serviceWorkerRegistration.register({ onUpdate: onServiceWorkerUpdate });