import React from "react";
import PropTypes from "prop-types";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons";
import { useTranslation } from "react-i18next";

const useStyles = makeStyles((theme) => ({
  value: {
    fontWeight: theme.typography.fontWeightMedium
  },
  miniContainer: {
    paddingTop: "10px"
  }
}));

const SessionSummary = ({ session }) => {
  const classes = useStyles();
  const { t } = useTranslation();

  return (
    <>
      <Grid container className={classes.miniContainer}>
        <Grid item xs={12} sm={5} md={5}>
          {`${t("Session")}: `}
          <span className={classes.value}>{session.sessionId}</span>
        </Grid>
        <Grid item xs={12} sm={2} md={2}>
          {"Active: "}
          {session.active ? (
            <CheckCircleOutlineRounded color="primary" />
          ) : (
            <RemoveRounded />
          )}
        </Grid>
        <Grid item xs={12} sm={3} md={3}>
          {"Start date: "}
          <span className={classes.value}>
            {t("DATE_FORMAT", {
              date: { value: session.startDate, format: "DD-MM-YYYY HH:mm:ss" }
            })}
          </span>
        </Grid>

        <Grid item xs={12} sm={3} md={3}>
          {"Stop date: "}
          <span className={classes.value}>
            {session.stopDate
              ? t("DATE_FORMAT", {
                  date: {
                    value: session.stopDate,
                    format: "DD-MM-YYYY HH:mm:ss"
                  }
                })
              : "---"}
          </span>
        </Grid>

        <Grid item xs={12} sm={3} md={3}>
          {"Running time: "}
          <span className={classes.value}>{session.runningTime}</span>
        </Grid>

        <Grid item xs={12} sm={3} md={3}>
          {"Host: "}
          <span className={classes.value}>{session.hostName}</span>
        </Grid>
      </Grid>
    </>
  );
};

SessionSummary.propTypes = {
  session: PropTypes.object.isRequired
};

export default SessionSummary;