import React, { useMemo } from "react";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import { Card, CardHeader, CardContent } from "@mui/material";
import PageTitle from "../../../../components/common/PageTitle";
import UserProfileCardContent from "./UserProfileCardContent";
import SecurityComponent from "../security/SecurityComponent";
import { getStyles } from "../styles";
import { useTheme } from "@mui/material/styles";

const UserProfileComponent = ({ userData }) => {
  const { t } = useTranslation();
  const theme = useTheme();
  const styles = getStyles(theme);

  const userLoginDate = useMemo(
    () =>
      t("DATE_FORMAT", {
        date: { value: userData.lastLoginDate, format: "DD-MM-YYYY HH:mm:ss" }
      }),
    [t, userData.lastLoginDate]
  );

  const userDescription = t("User.Profile.Description", {
    userName: `${userData.firstName} ${userData.lastName}`,
    loginDate: userLoginDate
  });

  return (
    <>
      <PageTitle text={t("User.Profile.Hello", { userName: userData.firstName })} />
      <Card>
        <CardHeader title={userData.userName} subheader={userDescription} />
        <CardContent>
          <UserProfileCardContent userData={userData} />
        </CardContent>
      </Card>

      <div style={styles.section}>
        <SecurityComponent userGroups={userData.userGroups} userRoles={userData.userRoles} />
      </div>
    </>
  );
};

UserProfileComponent.propTypes = {
  userData: PropTypes.object.isRequired
};

export default UserProfileComponent;
