import React from "react";
import PropTypes from "prop-types";
import Avatar from "@appserver/components/avatar";
import DropDown from "@appserver/components/drop-down";
import {
  AvatarContainer,
  LabelContainer,
  MainLabelContainer,
  MenuContainer,
  StyledProfileMenu,
  TopArrow,
} from "./StyledProfileMenu";

class ProfileMenu extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {
      avatarRole,
      avatarSource,
      children,
      className,
      displayName,
      email,
      clickOutsideAction,
      open,
    } = this.props;

    return (
      <DropDown
        className={className}
        directionX="right"
        open={open}
        clickOutsideAction={clickOutsideAction}
      >
        <StyledProfileMenu>
          <MenuContainer>
            <AvatarContainer>
              <Avatar
                size="medium"
                role={avatarRole}
                source={avatarSource}
                userName={displayName}
              />
            </AvatarContainer>
            <MainLabelContainer>{displayName}</MainLabelContainer>
            <LabelContainer>{email}</LabelContainer>
          </MenuContainer>
          <TopArrow />
        </StyledProfileMenu>
        {children}
      </DropDown>
    );
  }
}

ProfileMenu.displayName = "ProfileMenu";

ProfileMenu.propTypes = {
  avatarRole: PropTypes.oneOf(["owner", "admin", "guest", "user"]),
  avatarSource: PropTypes.string,
  children: PropTypes.any,
  className: PropTypes.string,
  displayName: PropTypes.string,
  email: PropTypes.string,
  id: PropTypes.string,
  open: PropTypes.bool,
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  clickOutsideAction: PropTypes.func,
};

export default ProfileMenu;