import { createRoot } from 'react-dom/client';
import { act } from 'react';
import BulkShipBreakdown from '../features/orders/bulk-ship-breakdown';
import type { Order, PluginSettings } from '../types';

( globalThis as any ).IS_REACT_ACT_ENVIRONMENT = true;

const settings = {
	shipping: { property: '1', street: 'High Street', town: 'Leeds', postcode: 'LS1 1AA' },
	packages: [],
	defaultPackageId: '',
	overrides: { defaultWeightKg: 1 },
	units: { dimension: 'cm', weight: 'kg' },
} as unknown as PluginSettings;

const order = ( id: number, dims: [ number, number, number ] ) =>
	( {
		id,
		number: String( id ),
		units: { dimension: 'cm', weight: 'kg' },
		items: [
			{
				name: 'Item',
				quantity: 1,
				dimensions: { length: dims[ 0 ], width: dims[ 1 ], height: dims[ 2 ], weight: 1 },
			},
		],
	} ) as unknown as Order;

const render = ( orders: Order[] ) => {
	const container = document.createElement( 'div' );
	const root = createRoot( container );
	act( () =>
		root.render(
			<BulkShipBreakdown
				validationResult={ { success: false } }
				orders={ orders }
				settings={ settings }
			/>
		)
	);
	const text = container.textContent?.replace( /\s+/g, ' ' ) ?? '';
	act( () => root.unmount() );
	return text;
};

describe( 'BulkShipBreakdown packaging', () => {
	it( 'shows one size when every order uses it', () => {
		const text = render( [ order( 323, [ 10, 10, 10 ] ), order( 289, [ 10, 10, 10 ] ) ] );
		expect( text ).toContain( 'Packaging : 10 x 10 x 10 cm' );
		expect( text ).not.toContain( '#323' );
	} );

	it( 'lists each size with its orders when they differ', () => {
		const text = render( [
			order( 323, [ 10, 10, 10 ] ),
			order( 289, [ 10, 10, 10 ] ),
			order( 284, [ 30, 25, 20 ] ),
		] );
		expect( text ).toContain( '10 x 10 x 10 cm (#323, #289)' );
		expect( text ).toContain( '30 x 25 x 20 cm (#284)' );
	} );
} );