import { AlertFilled } from "@ant-design/icons";
import { Button, Layout, Progress } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import ipcTypes from "../../../ipc.types";
import {
  selectUpdateAvailable,
  selectUpdateProgress,
} from "../../../redux/application/application.selectors";
const { ipcRenderer } = window;
const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  updateAvailable: selectUpdateAvailable,
  updateProgress: selectUpdateProgress,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function UpdateManagerOrganism({ updateAvailable, updateProgress }) {
  console.log(
    "UpdateManagerOrganism -> updateAvailable, updateProgress",
    updateAvailable,
    updateProgress
  );
  if (!updateAvailable) return null;
  return (
    <Layout.Footer>
      {updateAvailable && !updateProgress && (
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <div>
            <AlertFilled
              style={{ marginRight: ".5rem", color: "tomato" }}
              className="blink_me"
            />
            <span>{`An update to ImEX RPS is available. (Version ${updateAvailable.version})`}</span>
          </div>
          <Button
            type="primary"
            style={{ margin: "0rem .5rem" }}
            onClick={() =>
              ipcRenderer.send(ipcTypes.app.toMain.downloadUpdates)
            }
          >
            Download
          </Button>
        </div>
      )}
      {updateAvailable && updateProgress && (
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <Progress
            style={{ flex: 1, margin: "0rem .5rem" }}
            status={updateProgress.percent === 100 ? "success" : "active"}
            percent={updateProgress.percent.toFixed(1)}
          />
          {updateProgress.percent === 100 ? (
            <div tyle={{ margin: "0rem .5rem" }}>
              <span
                style={{ margin: "0rem .5rem" }}
              >{`Updated downloaded.`}</span>
              <Button
                type="primary"
                style={{ margin: "0rem .5rem" }}
                onClick={() =>
                  ipcRenderer.send(ipcTypes.app.toMain.installUpdates)
                }
              >
                Install
              </Button>
            </div>
          ) : (
            <span
              style={{ margin: "0rem .5rem" }}
            >{`Downloading update at ${formatBytes(
              updateProgress.bytesPerSecond
            )})`}</span>
          )}
        </div>
      )}
    </Layout.Footer>
  );
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UpdateManagerOrganism);

// download Info
// {
//   // bytesPerSecond: 6633258;
//   // delta: 2479242;
//   // percent: 100;
//   // total: 95651575;
//   // transferred: 95651575;
// }

function formatBytes(bytes) {
  var marker = 1024; // Change to 1000 if required
  var decimal = 1; // Change as required
  var kiloBytes = marker; // One Kilobyte is 1024 bytes
  var megaBytes = marker * marker; // One MB is 1024 KB
  var gigaBytes = marker * marker * marker; // One GB is 1024 MB
  //var teraBytes = marker * marker * marker * marker; // One TB is 1024 GB

  // return bytes if less than a KB
  if (bytes < kiloBytes) return bytes + " Bytes/sec";
  // return KB if less than a MB
  else if (bytes < megaBytes)
    return (bytes / kiloBytes).toFixed(decimal) + " KB/sec";
  // return MB if less than a GB
  else if (bytes < gigaBytes)
    return (bytes / megaBytes).toFixed(decimal) + " MB/sec";
  // return GB if less than a TB
  else return (bytes / gigaBytes).toFixed(decimal) + " GB/sec";
}
