import { memo } from 'react';
import { Button, Flex } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

interface BookingModalFooterProps {
	fulfilled?: boolean;
	working: boolean;
	balance: number;
	amount: number;
	isLoading: boolean;
	hasError: boolean;
	isLinked: boolean;
	
	onClose: () => void;
	setPrePayTopup: (value: boolean) => void;
	onPayWithProviders: () => void;
	onPayWithPrePay: () => void;
	onComplete?: () => void;
}

function BookingModalFooter({
	fulfilled,
	working,
	balance,
	amount,
	isLoading,
	hasError,
	onClose,
	onComplete,
	setPrePayTopup,
	onPayWithProviders,
	onPayWithPrePay,
	isLinked,
}: BookingModalFooterProps): JSX.Element {
	if (fulfilled) {
		return (
			<Flex
				justify="flex-end"
                align="center"
				gap={3}
				style={{ paddingTop: 16, borderTop: '1px solid #ddd' }}
			>
				<Button
					variant="primary"
					onClick={() => {
						onClose();
						onComplete?.();
					}}
				>
					{__('Done', 'parcel2go-shipping')}
				</Button>
			</Flex>
		);
	}

	return (
		<Flex
			justify="flex-end"
            align="center"
			gap={3}
			style={{ paddingTop: 16, borderTop: '1px solid #ddd' }}
		>
			<Flex gap={2} justify='flex-end' align='center'>
				<Button variant="tertiary" onClick={onClose} disabled={working}>
					{__('Cancel', 'parcel2go-shipping')}
				</Button>
				{isLinked && balance < amount && (
					<Button
						variant="secondary"
						onClick={() => setPrePayTopup(true)}
						disabled={
							working || hasError || isLoading
						}
						isBusy={working || isLoading}
					>
						{__('Top up balance', 'parcel2go-shipping')}
					</Button>
				)}
				{isLinked && balance >= amount && (
					<Button
						variant="secondary"
						onClick={onPayWithProviders}
						disabled={
							working || hasError || isLoading
						}
						isBusy={working || isLoading}
					>
						{__('Pay by Card', 'parcel2go-shipping')}
					</Button>
				)}
			</Flex>
			<Button
				variant="primary"
				onClick={
					isLinked && balance >= amount ? onPayWithPrePay : onPayWithProviders
				}
				disabled={working || hasError || isLoading}
				isBusy={working || isLoading}
				style={{ flexShrink: 0 }}
			>
				{isLinked && balance >= amount
					? __('Pay with PrePay', 'parcel2go-shipping')
					: __('Pay by Card', 'parcel2go-shipping')}
			</Button>
		</Flex>
	);
}

export default memo(BookingModalFooter);