import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

const FIELD_GIFT_WRAP = 'rtgw/gift-wrap';
const FIELD_STYLE = 'rtgw/gift-wrap-style';
const FIELD_MESSAGE = 'rtgw/gift-message';

export default function GiftWrapSummary() {
	const settings = window.rtgwCheckoutData?.settings;

	const additionalFields = useSelect( ( select ) => {
		const store = select( 'wc/store/checkout' );
		return store ? store.getAdditionalFields() : {};
	}, [] );

	if ( ! settings || ! additionalFields ) {
		return null;
	}

	const wantsGiftWrap = !! additionalFields[ FIELD_GIFT_WRAP ];

	if ( ! wantsGiftWrap ) {
		return null;
	}

	const styleIndex = additionalFields[ FIELD_STYLE ] ?? '0';
	const option = settings.wrap_options[ parseInt( styleIndex, 10 ) ] || settings.wrap_options[ 0 ];
	const message = additionalFields[ FIELD_MESSAGE ] || '';

	return (
		<div className="rtgw-block-summary">
			<div className="rtgw-block-summary__row">
				{ option?.image_url && (
					<span className="rtgw-block-summary__thumb">
						<img src={ option.image_url } alt="" />
					</span>
				) }
				<div>
					<p className="rtgw-block-summary__title">
						🎁 { __( 'This order will be gift wrapped', 'rt-gift-wrap-for-woocommerce' ) }
					</p>
					{ option && (
						<p className="rtgw-block-summary__style">
							{ option.name }{ option.price_html && (
								<span dangerouslySetInnerHTML={ { __html: ` (${ option.price_html })` } } />
							) }
						</p>
					) }
					{ message && <p className="rtgw-block-summary__message">“{ message }”</p> }
				</div>
			</div>
		</div>
	);
}