/* eslint-disable @typescript-eslint/indent */
import { Avatar, Box, Stack, Typography } from '@mui/material';
import { BN } from '@ocap/util';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import DID from '@arcblock/ux/lib/DID';
import { formatBNStr, formatLinkWithLocale } from '../libs/util';

export interface TBeneficiary {
  name: string;
  address: string;
  avatar?: string;
  percent: number;
  amount?: string;
  url?: string;
  type?: 'user' | 'dapp';
}

interface BenefitsProps {
  data: TBeneficiary[];
  currency: {
    symbol: string;
    decimal: number;
    maximum_precision?: number;
  };
  totalAmount?: string;
}

export default function PaymentBeneficiaries({ data, currency, totalAmount = '0' }: BenefitsProps) {
  const { t, locale } = useLocaleContext();
  return (
    <Stack spacing={2}>
      <Typography
        variant="subtitle2"
        sx={{
          color: 'text.secondary',
        }}>
        {t('benefits.title', { count: data.length })}
      </Typography>
      {data.map((item) => {
        const amount =
          item.amount ||
          (totalAmount
            ? new BN(totalAmount)
                .mul(new BN(Number(item.percent)))
                .div(new BN(100))
                .toString()
            : '0');
        return (
          <Stack
            key={item.address}
            direction="row"
            sx={{
              alignItems: 'center',
              justifyContent: 'space-between',
              px: 0.5,
              borderRadius: 1,
              bgcolor: 'background.paper',

              '&:hover': {
                bgcolor: 'action.hover',
              },
            }}>
            <Stack
              direction="row"
              spacing={1.5}
              sx={{
                alignItems: 'center',
                width: { xs: '100%', sm: 'auto' },
              }}>
              <Avatar
                src={item.avatar}
                alt={item.name}
                sx={{ width: 32, height: 32 }}
                variant={item.type === 'dapp' ? 'square' : 'circular'}
              />
              <Box>
                <Typography
                  variant="subtitle2"
                  onClick={() => {
                    if (item.url) {
                      window.open(formatLinkWithLocale(item.url, locale), '_blank');
                    }
                  }}
                  sx={{
                    cursor: item.url ? 'pointer' : 'default',
                    '&:hover': {
                      color: item.url ? 'text.link' : 'inherit',
                    },
                  }}>
                  {item.name}
                </Typography>
                <DID
                  did={item.address}
                  compact
                  responsive={false}
                  sx={{ whiteSpace: 'nowrap', fontSize: '0.875rem !important' }}
                  copyable={false}
                />
              </Box>
            </Stack>
            <Stack
              sx={{
                alignItems: 'flex-end',
                width: { xs: '100%', sm: 'auto' },
                mt: { xs: 1, sm: 0 },
              }}>
              <Typography variant="subtitle2">
                {formatBNStr(amount, currency.decimal, currency?.maximum_precision ?? 6)} {currency.symbol}
              </Typography>
              <Typography
                variant="caption"
                sx={{
                  color: 'text.secondary',
                  fontSize: '0.875rem',
                }}>
                {Number(item.percent)}%
              </Typography>
            </Stack>
          </Stack>
        );
      })}
    </Stack>
  );
}