import React, { useState, useCallback } from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import {
  Avatar,
  Collapse,
  Tooltip,
  Divider,
  Typography,
  Card,
  CardContent,
  CardActions,
  CardHeader,
  IconButton
} from "@material-ui/core";
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,
  token,
  onChange,
  onLogin,
  onLogout
}) => {
  const classes = useStyles();
  const { t } = useTranslation();
  const [expanded, setExpanded] = useState(false);

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

  const getTokenValidFrom = useCallback(() => {
    const tokenValidFrom = token?.validFrom;

    if (tokenValidFrom) {
      const valueForDisplay = t("LONG_DATE", { date: tokenValidFrom });
      return valueForDisplay;
    }

    return "N/A";
  }, [token, t]);

  return (
    <Card className={classes.card}>
      <CardHeader
        avatar={
          <Avatar aria-label="user" className={classes.avatar}>
            <AccountBox />
          </Avatar>
        }
        title={
          <strong>
            {t("Login.Hello", { username: credentials.userName })}
          </strong>
        }
        subheader={
          <Tooltip title={t("Login.AuthenticationDate")}>
            <Typography variant="caption" display="block">
              {getTokenValidFrom()}
            </Typography>
          </Tooltip>
        }
      />

      <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 = {
  credentials: PropTypes.object.isRequired,
  token: PropTypes.object,
  onChange: PropTypes.func.isRequired,
  onLogin: PropTypes.func.isRequired,
  onLogout: PropTypes.func.isRequired
};

export default LoggedInComponent;