import React from "react";
import { makeStyles } from "@material-ui/core/styles";
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 { Avatar, Collapse, Tooltip, Divider } from "@material-ui/core";
import IconButton from "@material-ui/core/IconButton";
import { AccountBox, RotateLeft, ExitToApp } from "@material-ui/icons";
import LoginComponent from "./LoginComponent";
import { useTranslation } from "react-i18next";

const useStyles = makeStyles(theme => ({
  card: {
    minWidth: 350
  },
  onRight: {
    marginLeft: "auto"
  },
  avatar: {
    backgroundColor: theme.palette.primary.main
  },
  collapseContent: {
    padding: 0
  }
}));

const LoggedInComponent = ({ credentials, onChange, onLogin, onLogout }) => {
  const classes = useStyles();
  const { t } = useTranslation();
  const [expanded, setExpanded] = React.useState(false);

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

  return (
    <Card className={classes.card}>
      <CardHeader
        avatar={
          <Avatar aria-label="recipe" className={classes.avatar}>
            <AccountBox />
          </Avatar>
        }
        title={<strong>{t("Server.ActiveSession")}</strong>}
        subheader="September 14, 2016"
      />

      <CardActions disableSpacing>
        <Tooltip title={t("Login.ChangeUser")}>
          <IconButton
            size="small"
            className={classes.onRight}
            onClick={handleExpandLogin}
            aria-expanded={expanded}
            aria-label="show login component"
          >
            <RotateLeft />
          </IconButton>
        </Tooltip>
        <Tooltip title={t("Login.Logout")}>
          <IconButton size="small" onClick={onLogout}>
            <ExitToApp />
          </IconButton>
        </Tooltip>
      </CardActions>
      <Divider />
      <Collapse in={expanded} timeout="auto" unmountOnExit>
        <CardContent
          className={classes.collapseContent}
          style={{ paddingBottom: "5px" }}
        >
          <LoginComponent
            credentials={credentials}
            onChange={onChange}
            onLogin={onLogin}
          />
        </CardContent>
      </Collapse>
    </Card>
  );
};

LoggedInComponent.propTypes = {};

export default LoggedInComponent;