import { Button, Flex, Typography } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import ipcTypes from "../../../ipc.types";
import { selectWatcherStatus } from "../../../redux/application/application.selectors";
import WatcherStatusAtom from "../../atoms/watcher-status/watcher-status.atom";
const { ipcRenderer } = window;

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

export function WatcherManagerOrganism({ watcherStatus }) {
  const watcherStarted = watcherStatus === "Started";
  const handleWatcherToggle = () => {
    ipcRenderer.send(
      watcherStarted
        ? ipcTypes.fileWatcher.toMain.stop
        : ipcTypes.fileWatcher.toMain.start
    );
  };

  return (
    <div className="settings-watcher-manager">
      <div className="settings-watcher-manager__header">
        <Typography.Title level={5}>Watcher Status</Typography.Title>
        <Typography.Text type="secondary">
          Start or stop the watcher without leaving settings.
        </Typography.Text>
      </div>
      <Flex align="center" justify="space-between" gap="small" wrap className="settings-watcher-manager__content">
        <WatcherStatusAtom />
        <Button
          size="small"
          type={watcherStarted ? "default" : "primary"}
          danger={watcherStarted}
          className="settings-watcher-manager__toggle"
          onClick={handleWatcherToggle}
        >
          {watcherStarted ? "Stop Watcher" : "Start Watcher"}
        </Button>
      </Flex>
    </div>
  );
}

export default connect(mapStateToProps)(WatcherManagerOrganism);
