import React from 'react';
import { Avatar } from '../Avatar';
import { MemberBadge } from '../Badge/MemberBadge';
import { Dropdown } from '../Dropdown';
import { getFormattedMembershipLevel } from './utils';

export interface IUserMenu {
  fullName: string;
  membership: string;
  profileImage: string;
  logoutUrl: string;
  className?: string;
  winByReferralLink?: string;
  theme?: 'light' | 'dark';
  [x: string]: any;
}

export const UserMenu: React.FC<IUserMenu> = (props) => {
  const { fullName = "", membership = "", profileImage = "", logoutUrl, className, winByReferralLink = "https://member.buffiniandcompany.com/winbyreferral", theme = 'dark', ...otherProps } = props;

  return (
    <React.Fragment>
      <a href={winByReferralLink} target="_blank" className={`b-win-by-referral ${theme === 'light' ? 'light' : 'dark'}`}>Send Referral</a>
      <Dropdown>
        <Dropdown.Toggle as="span" className="b-user-menu-toggle">
          {profileImage && <Avatar src={profileImage} size="sm" className="b-user-menu-avatar" />}
          {fullName && <span className={`b-user-menu-name ${theme}`}>{fullName}</span>}
          {membership != null && membership != "" && <MemberBadge level={getFormattedMembershipLevel(membership)} />}
        </Dropdown.Toggle>
        <Dropdown.Content placement="bottom">
          <Dropdown.Menu>
            <Dropdown.Item href="https://account.buffiniandcompany.com" target="_blank">
              View Profile
            </Dropdown.Item>
            <Dropdown.Divider />
            <Dropdown.Item href={logoutUrl}>Log out</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown.Content>
      </Dropdown>
    </React.Fragment>
  );
};