import React from 'react';
import styled from 'styled-components';

import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
import { UserAvatar } from '@redocly/theme/components/UserMenu/UserAvatar';

export type UserInfoMenuItemProps = {
  name: string;
  email?: string;
  picture?: string;
  className?: string;
};

export function UserInfoMenuItem({
  name,
  picture,
  email,
  className,
}: UserInfoMenuItemProps): JSX.Element {
  return (
    <UserInfoMenuItemWrapper className={className} role="none">
      <>
        <UserAvatar
          width="var(--user-menu-avatar-width)"
          height="var(--user-menu-avatar-height)"
          picture={picture}
        />
        <UserInfoDetailsWrapper>
          {name !== email ? <UserName>{name}</UserName> : null}
          {email ? <Email title={email}>{email}</Email> : null}
        </UserInfoDetailsWrapper>
      </>
    </UserInfoMenuItemWrapper>
  );
}

const UserInfoMenuItemWrapper = styled(DropdownMenuItem).attrs({
  'data-component-name': 'UserMenu/UserInfoMenuItem',
})`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--user-menu-user-info-items-gap);
  cursor: default;

  --dropdown-menu-item-padding-vertical: var(--user-menu-user-details-padding-vertical);
  --dropdown-menu-item-padding-horizontal: var(--user-menu-user-details-padding-horizontal);
  --dropdown-menu-item-bg-color: var(--user-menu-user-details-bg-color);
  --dropdown-menu-item-bg-color-hover: var(--user-menu-user-details-bg-color);
`;

const UserName = styled.div`
  font-weight: var(--user-menu-name-font-weight);
  font-size: var(--user-menu-name-font-size);
  line-height: var(--user-menu-name-line-height);
`;

const Email = styled.div`
  font-size: var(--user-menu-email-font-size);
  line-height: var(--user-menu-email-line-height);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
`;

const UserInfoDetailsWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
`;