/**
 * Skeleton placeholder for the shipments loading state.
 */
import { Spinner } from '@woocommerce/components';
import {
	Card,
	CardBody,
	Flex,
	FlexBlock,
	FlexItem,
} from '@wordpress/components';

interface ShipmentsSkeletonProps {
	columns: number;
}

export default function ShipmentsSkeleton({ columns }: ShipmentsSkeletonProps) {
	const count = columns === 2 ? 4 : 3;
	const rows: number[][] = [];
	for (let i = 0; i < count; i += columns) {
		rows.push(
			Array.from(
				{ length: Math.min(columns, count - i) },
				(_, j) => i + j,
			),
		);
	}

	return (
		<Flex direction="column" gap={4}>
			{rows.map((row, rowIdx) => (
				<Flex key={rowIdx} direction="row" gap={3} wrap>
					{row.map((i) => (
						<FlexBlock key={i}>
							<Card size="small">
								<CardBody>
									<Flex direction="column" gap={3}>
										<Flex justify="space-between" align="center">
											<FlexItem>
												<div
													style={{
														width: 120,
														height: 16,
														background: '#eee',
														borderRadius: 4,
													}}
												/>
											</FlexItem>
											<FlexItem>
												<div
													style={{
														width: 60,
														height: 16,
														background: '#eee',
														borderRadius: 4,
													}}
												/>
											</FlexItem>
										</Flex>
										{[1, 2, 3, 4, 5].map((j) => (
											<Flex key={j} justify="space-between">
												<FlexItem
													style={{
														width: 70,
														height: 14,
														background: '#eee',
														borderRadius: 3,
													}}
												/>
												<FlexItem
													style={{
														width: 100,
														height: 14,
														background: '#eee',
														borderRadius: 3,
													}}
												/>
											</Flex>
										))}
										<Flex justify="space-between" style={{ marginTop: 8 }}>
											<FlexItem
												style={{
													width: 60,
													height: 28,
													background: '#eee',
													borderRadius: 4,
												}}
											/>
											<FlexItem
												style={{
													width: 140,
													height: 28,
													background: '#eee',
													borderRadius: 4,
												}}
											/>
										</Flex>
									</Flex>
								</CardBody>
							</Card>
						</FlexBlock>
					))}
				</Flex>
			))}
			<Flex justify="center">
				<Spinner />
			</Flex>
		</Flex>
	);
}