import type { TCustomer } from '@blocklet/payment-types';
import { Link } from 'react-router-dom';
import UserCard from '@arcblock/ux/lib/UserCard';
import { getCustomerAvatar } from '@blocklet/payment-react';
import { InfoType, UserCardProps } from '@arcblock/ux/lib/UserCard/types';
import DID from '@arcblock/ux/lib/DID';
import { Box, Typography } from '@mui/material';

export default function CustomerLink({
  customer,
  linked = true,
  linkTo = '',
  size = 'default',
  cardProps = {},
}: {
  customer: TCustomer;
  linked?: boolean;
  linkTo?: string;
  size?: 'default' | 'small';
  tooltip?: boolean;
  cardProps?: UserCardProps;
}) {
  if (!customer) {
    return null;
  }

  if (customer?.metadata?.isBroker) {
    return (
      <Box>
        <Typography variant="body2">{customer.name}</Typography>
        <DID did={customer.did} {...(size !== 'small' ? { responsive: false, compact: true } : {})} />
      </Box>
    );
  }
  const CustomerCard = (
    // @ts-ignore
    <UserCard
      did={customer?.did}
      showHoverCard
      sx={{
        border: 'none',
        p: 0,
        minWidth: 0,
      }}
      avatarProps={{
        size: size === 'small' ? 24 : 40,
      }}
      shortenLabelProps={{
        maxLength: 20,
      }}
      popupInfoType={InfoType.Minimal}
      showDid={size !== 'small'}
      popupShowDid
      user={{
        fullName: customer.name || customer.email,
        did: customer.did,
        email: customer.email,
        avatar: getCustomerAvatar(
          customer?.did,
          customer?.updated_at ? new Date(customer.updated_at).toISOString() : ''
        ),
      }}
      {...cardProps}
    />
  );
  if (linked) {
    return <Link to={linkTo || `/admin/customers/${customer.id}`}>{CustomerCard}</Link>;
  }

  return CustomerCard;
}
