import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import clsx from "clsx";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
import Collapse from "@material-ui/core/Collapse";
import Avatar from "@material-ui/core/Avatar";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import SurroundSoundRoundedIcon from "@material-ui/icons/SurroundSoundRounded";
import ActiveSessionSummary from "./ActiveSessionSummary";
import styles from "../../../components/common/styles/expandableCardStyles";
import { useTranslation } from "react-i18next";

const useStyles = makeStyles(styles);

const ActiveSessionComponent = ({ session }) => {
  const classes = useStyles();
  const { t } = useTranslation();
  const [expanded, setExpanded] = React.useState(false);

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  return (
    <Card>
      <CardHeader
        avatar={
          <Avatar aria-label="recipe" className={classes.avatar}>
            <SurroundSoundRoundedIcon />
          </Avatar>
        }
        action={
          <IconButton
            className={clsx(classes.expand, {
              [classes.expandOpen]: expanded
            })}
            onClick={handleExpandClick}
            aria-expanded={expanded}
            aria-label="show more"
          >
            <ExpandMoreIcon />
          </IconButton>
        }
        title={<strong>{t("Server.ActiveSession")}</strong>}
        subheader={t("Server.ActiveSessionSubtitle")}
      />
      <CardContent>
        <ActiveSessionSummary session={session} />
      </CardContent>
      <CardActions disableSpacing></CardActions>
      <Collapse in={expanded} timeout="auto" unmountOnExit>
        <CardContent>
          <Typography paragraph>Method:</Typography>
          <Typography paragraph>
            Tabel ca cel de pana acum cu redirectarile. From va fi link si la
            click va deschide in tab nou aplicatia
          </Typography>
        </CardContent>
      </Collapse>
    </Card>
  );
};

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

export default ActiveSessionComponent;