import React from "react";
import PropTypes from "prop-types";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import ActiveIcon from "../../../components/common/ActiveIcon";
import { useTranslation } from "react-i18next";
import styles from "../../../components/common/styles/gridStyles";

const useStyles = makeStyles(styles);

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.Session")}: `}
        <span className={classes.value}>{session.sessionId}</span>
      </Grid>
      <Grid item xs={12} sm={3} md={3}>
        {`${t("Session.Active")}: `}
        <ActiveIcon active={session.active} />
      </Grid>
      <Grid item xs={12} sm={4} md={4}>
        {`${t("Session.StartDate")}: `}
        <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={5} md={5}>
        {`${t("Session.RunningTime")}: `}
        <span className={classes.value}>{session.runningTime}</span>
      </Grid>

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

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

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

export default SessionSummary;