import { useCreation } from 'ahooks';
import { Typography } from '@mui/material';
import { isEthereumDid } from '@arcblock/ux/lib/Util';
import DidAddress from '@arcblock/ux/lib/Address';
import { AppBadgeDefaultProps, BadgeContainer } from './app-badge-default';

export interface AppBadgeDIDProps extends Omit<AppBadgeDefaultProps, 'value'> {
  value?: string;
}

export function AppBadgeDID({ value = '', loading = false, ...rest }: AppBadgeDIDProps) {
  const label = useCreation(() => {
    const isEthDid = isEthereumDid(value);

    return `DID:${isEthDid ? 'ETH' : 'ABT'}`;
  }, [value]);

  return (
    <BadgeContainer loading={loading} {...rest}>
      <Typography className="app-badge-label">{label}</Typography>
      <Typography className="app-badge-value">
        <DidAddress inline size={14} compact responsive={false}>
          {value}
        </DidAddress>
      </Typography>
    </BadgeContainer>
  );
}
