import React, { useState, useMemo } 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";
import { useToast } from "../../../hooks";
import styles from "../styles";
import { useTuitioUser } from "@flare/tuitio-react-client";

const useStyles = makeStyles(styles);

const LoggedInComponent = ({ credentials, onChange, onLogin, onLogout }) => {
  const classes = useStyles();
  const { t } = useTranslation();
  const [expanded, setExpanded] = useState(false);
  const { info } = useToast();
  const { lastLoginDate, userName } = useTuitioUser();

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

  const loginDate = useMemo(() => {
    if (lastLoginDate) {
      const valueForDisplay = t("LONG_DATE", { date: lastLoginDate });
      return valueForDisplay;
    }

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

  const handleLogin = async () => {
    const result = await onLogin();
    if (result) {
      setExpanded(false);
      info(t("Login.UserChanged"));
    }
  };

  return (
    <div className={classes.loggedInContent}>
      <Card className={classes.loggedInCard}>
        <CardHeader
          avatar={
            <Avatar aria-label="user" className={classes.avatar}>
              <AccountBox />
            </Avatar>
          }
          title={<strong>{t("Login.Hello", { username: userName })}</strong>}
          subheader={
            <Tooltip title={t("Login.AuthenticationDate")}>
              <Typography variant="caption" display="block">
                {loginDate}
              </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={handleLogin}
            />
          </CardContent>
        </Collapse>
      </Card>
    </div>
  );
};

LoggedInComponent.propTypes = {
  credentials: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired,
  onLogin: PropTypes.func.isRequired,
  onLogout: PropTypes.func.isRequired
};

export default LoggedInComponent;