import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import type { TLineItemExpanded } from '@blocklet/payment-types';
import { useNavigate } from 'react-router-dom';

import Actions from '../../actions';
import ClickBoundary from '../../click-boundary';

type Props = {
  data: TLineItemExpanded;
  mode?: 'admin' | 'portal';
};

export default function LineItemActions({ data, mode = 'portal' }: Props) {
  const { t } = useLocaleContext();
  const navigate = useNavigate();
  const isAdmin = mode === 'admin';
  const taxRateId = (data as any).tax_rate_id;

  const actions = [
    {
      label: t('admin.price.view'),
      handler: () => navigate(`/admin/products/${data.price_id}`),
      color: 'primary',
    },
    {
      label: t('admin.product.view'),
      handler: () => navigate(`/admin/products/${data.product_id || data.price.product_id}`),
      color: 'primary',
    },
    isAdmin &&
      taxRateId && {
        label: t('admin.taxRate.view'),
        handler: () => navigate(`/admin/tax/${taxRateId}`),
        color: 'primary',
      },
  ].filter(Boolean);

  return (
    <ClickBoundary>
      <Actions actions={actions} />
    </ClickBoundary>
  );
}
