import React, { useMemo } from "react";
import PropTypes from "prop-types";
import UserProfilePicture from "./UserProfilePicture";
import ContactOptions from "../contact/ContactOptions";
import { useTheme } from "@mui/material/styles";
import { getStyles } from "../styles";

const UserProfileCardContent = ({ userData }) => {
  const { profilePictureUrl } = userData;
  const theme = useTheme();
  const styles = getStyles(theme);

  const userName = useMemo(() => `${userData.firstName} ${userData.lastName}`, [userData.firstName, userData.lastName]);
  const _contactOptions = useMemo(
    () =>
      profilePictureUrl
        ? [
            ...userData.contactOptions,
            {
              id: userData.contactOptions.length + 1,
              contactTypeCode: "PROFILE_PICTURE",
              contactValue: profilePictureUrl
            }
          ]
        : userData.contactOptions,
    [profilePictureUrl, userData.contactOptions]
  );

  return (
    <div style={styles.panel}>
      <UserProfilePicture pictureUrl={userData.profilePictureUrl} />
      <ContactOptions contactOptions={_contactOptions} userName={userName} />
    </div>
  );
};

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

export default UserProfileCardContent;
