/**
 * External dependencies
 */
import clsx from 'clsx';
import { getSetting } from '@woocommerce/settings';
import {
	PlaceOrderButton,
	ReturnToCartButton,
} from '@woocommerce/base-components/cart-checkout';
import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
import { noticeContexts } from '@woocommerce/base-context';
import { StoreNoticesContainer } from '@woocommerce/blocks-components';
import { applyCheckoutFilter } from '@woocommerce/blocks-checkout';
import { CART_STORE_KEY } from '@woocommerce/block-data';
import { useSelect } from '@wordpress/data';
import { formatPrice } from '@woocommerce/price-format';

/**
 * Internal dependencies
 */
import { defaultPlaceOrderButtonLabel } from './constants';
import './style.scss';

const Block = ( {
	cartPageId,
	showReturnToCart,
	className,
	placeOrderButtonLabel,
}: {
	cartPageId: number;
	showReturnToCart: boolean;
	className?: string;
	placeOrderButtonLabel: string;
} ): JSX.Element => {
	const { paymentMethodButtonLabel } = useCheckoutSubmit();

	const cartTotals = useSelect( ( select ) => {
		const store = select( CART_STORE_KEY );
		return store.getCartTotals();
	}, [] );

	const totalPrice = formatPrice( cartTotals.total_price );

	let label = applyCheckoutFilter( {
		filterName: 'placeOrderButtonLabel',
		defaultValue:
			paymentMethodButtonLabel ||
			placeOrderButtonLabel ||
			defaultPlaceOrderButtonLabel,
	} );

	if ( label.includes( '<price/>' ) ) {
		if ( cartTotals.total_price === '0' ) {
			label = label.replace( '<price/>', '' );
			label = label.replace( /[^a-zA-Z\s]/g, '' );
		} else {
			label = label.replace( '<price/>', totalPrice );
		}
	}

	return (
		<div className={ clsx( 'wc-block-checkout__actions', className ) }>
			<StoreNoticesContainer
				context={ noticeContexts.CHECKOUT_ACTIONS }
			/>
			<div className="wc-block-checkout__actions_row">
				{ showReturnToCart && (
					<ReturnToCartButton
						link={ getSetting( 'page-' + cartPageId, false ) }
					/>
				) }
				<PlaceOrderButton
					label={ label }
					fullWidth={ ! showReturnToCart }
				/>
			</div>
		</div>
	);
};

export default Block;