/* eslint-disable react/no-unstable-nested-components */
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { formatPrice, Table, usePaymentContext } from '@blocklet/payment-react';
import type { TLineItemExpanded, TPaymentCurrency, TPriceExpanded } from '@blocklet/payment-types';
import { Avatar, Stack, Typography, Box } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import Copyable from '../copyable';

type CreditGrantItemListProps = {
  data: TLineItemExpanded[];
  currency: TPaymentCurrency;
  mode?: 'dashboard' | 'portal';
};

export default function CreditGrantItemList({ data, currency, mode = 'portal' }: CreditGrantItemListProps) {
  const { t } = useLocaleContext();
  const navigate = useNavigate();
  const { session } = usePaymentContext();
  const isAdmin = mode === 'dashboard' && ['owner', 'admin'].includes(session?.user?.role || '');

  const viewProduct = (price: TPriceExpanded) => {
    if (!isAdmin) {
      return;
    }
    navigate(`/admin/products/${price.product_id}?price_id=${price.id}&currency_id=${price.currency_id}`);
  };

  const columns = [
    {
      label: t('admin.subscription.product'),
      name: 'product_id',
      options: {
        customBodyRenderLite: (_: string, index: number) => {
          const item = data[index] as TLineItemExpanded;
          return (
            <Stack direction="row" spacing={1} onClick={() => viewProduct(item.price)}>
              <Avatar
                src={item.price?.product?.images?.[0]}
                alt={item.price?.product?.name}
                variant="square"
                sx={{ borderRadius: 1 }}
              />
              <Stack direction="column" spacing={0.5}>
                <Typography
                  variant="body2"
                  sx={{
                    fontWeight: 500,
                  }}>
                  {item.price?.product?.name}
                </Typography>
                <Typography
                  variant="body2"
                  sx={{
                    color: 'text.secondary',
                  }}>
                  {formatPrice(item.price, currency, item.price?.product?.unit_label || '')}
                </Typography>
              </Stack>
            </Stack>
          );
        },
      },
    },
    {
      label: t('common.id'),
      name: 'id',
      options: {
        customBodyRenderLite: (_: string, index: number) => {
          const item = data[index] as TLineItemExpanded;
          return (
            <Box onClick={() => viewProduct(item.price)}>
              <Copyable text={item.id} />
            </Box>
          );
        },
      },
    },
  ].filter(Boolean);

  return (
    <Table
      data={data}
      columns={columns}
      loading={false}
      footer={false}
      toolbar={false}
      components={{
        TableToolbar: () => null,
        TableFooter: () => null,
      }}
      options={{
        count: data.length,
        page: 0,
        rowsPerPage: 100,
      }}
      emptyNodeText={t('admin.customer.creditGrants.noApplicableProducts')}
    />
  );
}
