import { Box, Divider, Typography } from '@mui/material';

const styles = {
	bin: { display: 'flex', flexWrap: 'wrap', gap: 3, alignItems: 'flex-start', mb: 2 },
	binImage: { width: 'auto', maxWidth: 150, maxHeight: 170, objectFit: 'contain' },
	stepImage: { width: 'auto', maxWidth: 70, maxHeight: 90, objectFit: 'contain' },
	steps: { display: 'flex', flexWrap: 'wrap', gap: 2 },
	step: { maxWidth: 110 },
};

const dimensions = (data = {}, height = null) =>
	`${data.d ?? 0} x ${data.w ?? 0} x ${height ?? data.h ?? 0} inches`;

const PackingSteps = ({ items = [] }) => {
	if (!items.length) return null;

	return (
		<Box mb={3}>
			<Typography variant='body2' fontWeight='bold' mb={1}>
				Steps:
			</Typography>

			<Box sx={styles.steps}>
				{items.map((item, index) => (
					<Box key={index} sx={styles.step}>
						<Box component='img' src={item.image_sbs} alt='Packing step' sx={styles.stepImage} />
						{item.product_name && (
							<Typography variant='caption' display='block'>
								{item.product_name}
							</Typography>
						)}
						<Typography variant='caption' color='textSecondary' display='block'>
							{dimensions(item)}
						</Typography>
					</Box>
				))}
			</Box>
		</Box>
	);
};

/**
 * One packed box or pallet: what it is, what went in it and the packing steps, in the same
 * order as the Packaging Details widget on the order screen.
 */
const PackedBin = ({ bin, label, index, total }) => {
	const binData = bin.bin_data || {};
	const items = bin.items || [];
	const shipsAlone = binData.type === 'item';
	const hasDimensions = Number(binData.w) > 0;
	const displayHeight = label === 'Pallet' ? binData.stack_height ?? binData.h : binData.h;

	if (shipsAlone) {
		return (
			<Box mb={3}>
				<Typography variant='body2' fontWeight='bold' mb={1}>
					{label === 'Pallet'
						? 'This item ships as its own handling unit'
						: 'Item shipped as its own package'}
				</Typography>

				<Box sx={styles.bin}>
					<Box>
						<Typography variant='body2'>
							{hasDimensions
								? dimensions(binData)
								: `Weight = ${binData.weight ?? 0} lbs`}
						</Typography>
					</Box>
					<Box component='img' src={bin.image_complete} alt={label} sx={styles.binImage} />
				</Box>
			</Box>
		);
	}

	return (
		<Box mb={3}>
			<Box sx={styles.bin}>
				<Box>
					<Typography variant='body2' fontWeight='bold'>
						{label} {index + 1} of {total}
					</Typography>
					{bin.box_name && <Typography variant='body2'>{bin.box_name}</Typography>}
					<Typography variant='body2' color='textSecondary'>
						{dimensions(binData, displayHeight)}
					</Typography>
					<Typography variant='body2' fontWeight='bold'>
						Number of items: {items.length}
					</Typography>
				</Box>
				<Box component='img' src={bin.image_complete} alt={label} sx={styles.binImage} />
			</Box>

			<PackingSteps items={items} />
		</Box>
	);
};

const BinGroup = ({ title, label, bins }) => {
	if (!bins?.length) return null;

	return (
		<Box mb={2}>
			<Typography variant='subtitle1' fontWeight='bold' mb={2}>
				{title}
			</Typography>

			{bins.map((bin, index) => (
				<PackedBin key={index} bin={bin} label={label} index={index} total={bins.length} />
			))}
		</Box>
	);
};

const LogPackaging = ({ packaging }) => {
	const boxes = packaging?.boxes?.response?.bins_packed || [];
	const pallets = packaging?.pallets?.response?.bins_packed || [];

	if (!boxes.length && !pallets.length) {
		return <Typography color='textSecondary'>No packaging detail for this transaction.</Typography>;
	}

	return (
		<>
			<BinGroup
				title={packaging?.one_rate ? 'FedEx One Rate Box Packaging' : 'Box Packaging'}
				label='Box'
				bins={boxes}
			/>
			{!!boxes.length && !!pallets.length && <Divider sx={{ my: 3 }} />}
			<BinGroup title='Pallet Packaging' label='Pallet' bins={pallets} />
		</>
	);
};

export default LogPackaging;