/**
 * Skeleton placeholders for library grids / My Library lists / Global Settings.
 */
import { __ } from '@wordpress/i18n';

/**
 * @param {object} props
 * @param {'grid'|'list'|'settings'} [props.variant]
 * @param {number} [props.count]
 * @param {string} [props.className]
 */
export default function LibrarySkeleton( {
	variant = 'grid',
	count = variant === 'list' ? 5 : variant === 'settings' ? 1 : 6,
	className = '',
} ) {
	const items = Array.from( { length: Math.max( 1, count ) }, ( _, i ) => i );
	const label =
		variant === 'settings'
			? __( 'Loading settings…', 'joc-blockora-morph' )
			: __( 'Loading library…', 'joc-blockora-morph' );

	if ( variant === 'settings' ) {
		return (
			<div
				className={
					'bm-lib-skeleton bm-lib-skeleton--settings mx-auto w-full max-w-canvas px-gutter py-stack-lg' +
					( className ? ` ${ className }` : '' )
				}
				role="status"
				aria-busy="true"
				aria-label={ label }
			>
				<span className="screen-reader-text">{ label }</span>
				<div className="bm-lib-skeleton__settings-shell" aria-hidden="true">
					<aside className="bm-lib-skeleton__settings-nav">
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-nav-item" />
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-nav-item" />
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-nav-item is-short" />
					</aside>
					<div className="bm-lib-skeleton__settings-main">
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-eyebrow" />
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-heading" />
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-lead" />
						<div className="bm-lib-skeleton__settings-layout">
							<aside className="bm-lib-skeleton__settings-side">
								{ [ 0, 1, 2, 3, 4 ].map( ( i ) => (
									<span
										key={ `side-${ i }` }
										className="bm-lib-skeleton__bone bm-lib-skeleton__settings-side-item"
									/>
								) ) }
							</aside>
							<div className="bm-lib-skeleton__settings-panel">
								<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-panel-title" />
								<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-row" />
								<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-row is-mid" />
								<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-row is-short" />
								<div className="bm-lib-skeleton__settings-swatches">
									<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-swatch" />
									<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-swatch" />
									<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-swatch" />
									<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-swatch" />
								</div>
								<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-row is-mid" />
								<span className="bm-lib-skeleton__bone bm-lib-skeleton__settings-row" />
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	}

	if ( variant === 'list' ) {
		return (
			<div
				className={
					'bm-lib-skeleton bm-lib-skeleton--list' +
					( className ? ` ${ className }` : '' )
				}
				role="status"
				aria-busy="true"
				aria-label={ label }
			>
				<span className="screen-reader-text">{ label }</span>
				{ items.map( ( i ) => (
					<div
						key={ i }
						className="bm-lib-skeleton__list-card"
						aria-hidden="true"
					>
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__check" />
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__thumb" />
						<div className="bm-lib-skeleton__list-body">
							<span className="bm-lib-skeleton__bone bm-lib-skeleton__title" />
							<span className="bm-lib-skeleton__bone bm-lib-skeleton__meta" />
						</div>
						<div className="bm-lib-skeleton__list-actions">
							<span className="bm-lib-skeleton__bone bm-lib-skeleton__chip" />
							<span className="bm-lib-skeleton__bone bm-lib-skeleton__chip" />
						</div>
					</div>
				) ) }
			</div>
		);
	}

	return (
		<div
			className={
				'bm-lib-grid bm-lib-skeleton bm-lib-skeleton--grid' +
				( className ? ` ${ className }` : '' )
			}
			role="status"
			aria-busy="true"
			aria-label={ label }
		>
			<span className="screen-reader-text">{ label }</span>
			{ items.map( ( i ) => (
				<div
					key={ i }
					className="bm-lib-skeleton__card"
					aria-hidden="true"
				>
					<div className="bm-lib-skeleton__media">
						<span className="bm-lib-skeleton__chrome">
							<span className="bm-lib-skeleton__dot" />
							<span className="bm-lib-skeleton__dot" />
							<span className="bm-lib-skeleton__dot" />
						</span>
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__preview" />
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__badge" />
					</div>
					<div className="bm-lib-skeleton__body">
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__title" />
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__desc" />
						<span className="bm-lib-skeleton__bone bm-lib-skeleton__desc is-short" />
						<div className="bm-lib-skeleton__meta">
							<span className="bm-lib-skeleton__bone bm-lib-skeleton__chip" />
							<span className="bm-lib-skeleton__bone bm-lib-skeleton__chip is-wide" />
						</div>
					</div>
				</div>
			) ) }
		</div>
	);
}
