import React from "react";
import PropTypes from "prop-types";
import DoneAllIcon from "@material-ui/icons/DoneAll";
import ClearIcon from "@material-ui/icons/Clear";
import DoneIcon from "@material-ui/icons/Done";
import { Tooltip } from "@material-ui/core";

const ConnectedIcon = (props) => {
  let title = tooltip(props.connected, props.connectedHMI);

  const content = () => {
    if (props.connected && props.connectedHMI) {
      return (
        <Tooltip title={title}>
          <DoneAllIcon
            fontSize="small"
            style={{ color: "green" }}
          />
        </Tooltip>
      );
    }

    if (props.connected || props.connectedHMI) {
      let color = "blue";
      if (props.connected) {
        color = "green"
      }

      return (
        <Tooltip title={title}>
          <DoneIcon
            fontSize="small"
            style={{ color }}
          />
        </Tooltip>
      );
    }

    return (
      <Tooltip title={title}>
        <ClearIcon
          fontSize="small"
          style={{ color: "red" }}
        />
      </Tooltip>
    );
  };

  return (
    <span style={props.style}>
      {content()}
    </span>
  )
};

ConnectedIcon.propTypes = {
  connected: PropTypes.bool.isRequired,
};

function tooltip(trex, icc) {
  const status = [];

  if (trex) {
    status.push("TREX");
  }

  if (icc) {
    status.push("ICC");
  }

  if (!status.length) {
    return "OFFLINE";
  }

  return status.join(" & ");
}

export default ConnectedIcon;
