import React, { memo } from 'react';
import { Typography, Box, useMediaQuery, Divider } from '@mui/material';
import { DID } from '../../DID';
import { User, UserCardProps } from '../types';
import TooltipAvatar from './tooltip-avatar';
import { renderTopRight } from '../components';
import ShortenLabel from './shorten-label';
import SocialActions from '../Cards/social-actions';

interface MinimalContentProps extends UserCardProps {
  user: User;
  avatarSize: number;
  shouldShowHoverCard: boolean;
  renderCardContent?: () => React.ReactNode | null;
  avatarProps?: UserCardProps['avatarProps'];
  shortenLabelProps?: UserCardProps['shortenLabelProps'];
}

function MinimalContent({ ...props }: MinimalContentProps) {
  const {
    user,
    showDid,
    didProps,
    avatarSize,
    shouldShowHoverCard,
    renderCardContent,
    renderTopRightContent,
    topRightMaxWidth,
    avatarProps,
    shortenLabelProps,
    renderName,
    ...rest
  } = props;
  const isSmallScreen = useMediaQuery('(max-width:500px)');
  return (
    <Box
      className="user-card__avatar-content"
      sx={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          flexDirection: isSmallScreen ? 'column' : 'row',
          alignItems: isSmallScreen ? 'flex-start' : 'center',
          gap: isSmallScreen ? 2 : 1,
          flex: 1,
          minWidth: 0,
          flexWrap: 'wrap',
        }}>
        <Box sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', gap: 1, flex: 1 }}>
          <TooltipAvatar
            user={user}
            avatarSize={avatarSize}
            shouldShowHoverCard={shouldShowHoverCard}
            renderCardContent={renderCardContent}
            avatarProps={avatarProps}
            {...rest}
          />
          <Box>
            <Typography
              variant="subtitle1"
              className="user-card__full-name-label"
              noWrap
              sx={{
                fontWeight: 500,
                color: 'text.primary',
                fontSize: 18,
                lineHeight: 1.1,
              }}>
              {renderName ? (
                renderName(user)
              ) : (
                <ShortenLabel sx={{ fontWeight: 500 }} {...shortenLabelProps}>
                  {user.fullName || user.email || user.did}
                </ShortenLabel>
              )}
            </Typography>

            {showDid && user.did ? (
              <DID
                did={user.did}
                size={14}
                copyable
                compact
                locale="en"
                sx={{ lineHeight: 1.5 }}
                {...(didProps ?? {})}
              />
            ) : null}
          </Box>
        </Box>
        {isSmallScreen && !renderTopRightContent && rest.showSocialActions ? <Divider sx={{ width: '100%' }} /> : null}
        {!renderTopRightContent ? (
          <SocialActions
            onFollowClick={rest.onFollowClick}
            showSocialActions={rest.showSocialActions}
            user={user!}
            session={rest.session}
          />
        ) : null}
      </Box>
      {renderTopRight(renderTopRightContent, topRightMaxWidth)}
    </Box>
  );
}
export default memo(MinimalContent);
