import * as React from 'react';
import { __ } from '@wordpress/i18n';
import type { FinancialState } from './settlement';
import type { BookingApi } from './api';
import { money } from './pricing';
import { formatRange } from './dateTime';
import { methodLabel, paymentLabel } from './credit';
import { statusLabel } from './Bookings';
export interface OutstandingItem {
    id: number;
    reference: string;
    starts_at: string;
    ends_at: string;
    due_at: string;
    resource_name: string;
    final_amount: number;
    currency: string;
    financial: FinancialState;
    status: string;
    payment_method: string | null;
}
export interface OutstandingBalance {
    blocked: boolean;
    amounts_by_currency: Record<string, number>;
    items: OutstandingItem[];
    timezone: string;
    total?: number;
}
export function Amounts({ amounts }: {
    amounts: Record<string, number>;
}) { return <ul className="asb-outstanding-amounts">{Object.entries(amounts).map(([currency, amount]) => <li key={currency}><strong>{money(amount, currency)}</strong></li>)}</ul>; }
export function OutstandingTable({ items, timezone, onDetail, admin = false }: {
    items: OutstandingItem[];
    timezone: string;
    onDetail: (id: number) => void;
    admin?: boolean;
}) {
    return <div className="asb-table-scroll"><table className="widefat striped"><thead><tr>{[__('Reference', 'abece-booking'), __('Date and time', 'abece-booking'), __('Resource', 'abece-booking'), __('Original booking price', 'abece-booking'), __('Amount due', 'abece-booking'), __('Paid', 'abece-booking'), __('Outstanding', 'abece-booking'), __('Status', 'abece-booking'), ...(admin ? [__('Payment method', 'abece-booking'), __('Payment status', 'abece-booking')] : []), __('Actions', 'abece-booking')].map(t => <th scope="col" key={t}>{t}</th>)}</tr></thead><tbody>{items.map(b => <tr key={b.id}><td>{b.reference}</td><td>{formatRange(b.starts_at, b.ends_at, timezone)}</td><td>{b.resource_name}</td><td>{money(b.final_amount, b.currency)}</td><td>{money(b.financial.required_amount, b.currency)}</td><td>{money(b.financial.net_paid_amount, b.currency)}</td><td><strong>{money(b.financial.outstanding_amount, b.currency)}</strong></td><td>{statusLabel(b.status)}</td>{admin && <><td>{methodLabel(b.payment_method)}</td><td>{paymentLabel(b.financial.payment_status)}</td></>}<td><button className="button" aria-label={`${__('Details', 'abece-booking')} ${b.reference}`} onClick={() => onDetail(b.id)}>{__('Details', 'abece-booking')}</button></td></tr>)}</tbody></table></div>;
}
export declare function ClientOutstanding(props: {
    api: BookingApi;
    balance: OutstandingBalance | null;
    onRefresh: () => void;
}): React.JSX.Element;