import { Chip, Theme, Tooltip } from "@mui/material";
import React from "react";
import { getFirmwareVersionHelper } from "pbHelpers/FirmwareVersion";
import { withStyles, WithStyles } from "@mui/styles";

const styles = (_theme: Theme) => ({});

interface Props extends WithStyles<typeof styles> {
  version: string;
  available: string;
}

interface State {}

class VersionChip extends React.Component<Props, State> {
  render() {
    const { version, available } = this.props;
    const firmwareVersionHelper = getFirmwareVersionHelper(version, available);
    return (
      <Tooltip title={firmwareVersionHelper.tooltip}>
        <Chip
          variant="outlined"
          label={firmwareVersionHelper.description}
          icon={firmwareVersionHelper.icon}
          sx={
            firmwareVersionHelper.colour
              ? {
                  borderColor: firmwareVersionHelper.colour,
                  color: firmwareVersionHelper.colour
                }
              : undefined
          }
        />
      </Tooltip>
    );
  }
}

export default withStyles(styles)(VersionChip);