import { Alert, Typography } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  selectWatcherError,
  selectWatcherStatus,
} from "../../../redux/application/application.selectors";

const { ipcRenderer } = window;

const mapStateToProps = createStructuredSelector({
  watcherStatus: selectWatcherStatus,
  watcherError: selectWatcherError,
});

export function WatcherStatusAtom({ watcherStatus, watcherError }) {
  const statusClassName =
    watcherStatus === "Started"
      ? "settings-watcher-status settings-watcher-status--started"
      : "settings-watcher-status settings-watcher-status--stopped";

  return (
    <div className="settings-watcher-status-wrap" onDoubleClick={() => ipcRenderer.send("test")}>
      <div className={statusClassName}>
        <Typography.Text strong>{watcherStatus || "Unknown"}</Typography.Text>
      </div>
      {watcherError && <Alert className="settings-watcher-status__error" message={watcherError} type="error" showIcon />}
    </div>
  );
}
export default connect(mapStateToProps, null)(WatcherStatusAtom);
