/**
 * External dependencies.
 */
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies.
 */
import { RenderBlockVariation } from '@spectra-components/variation-picker';

/**
 * Template option choices for the predefined Tabs layouts.
 *
 * @constant
 * @type {Array}
 */
const variations = [
	{
		name: 'portrait-1',
		title: __( 'Portrait 1', 'spectra-pro' ),
		attributes: {
			variationSelected: true,
			layout: {
				type: 'grid',
				columnCount: 3,
			},
		},
		scope: [ 'block' ],
		icon: (
			<RenderBlockVariation
				{ ...{
					blockName: 'loop-builder-child-template',
					variationName: 'portrait-1',
					pluginName: 'spectra-pro',
				} }
			/>
		),
		innerBlocks: [
			// The wrapper container for the template layout.
			[
				'spectra/container',
				{
					variationSelected: true,
					height: '100%',
					layout: {
						type: 'default',
					},
					style: {
						spacing: {
							padding: '0',
							blockGap: 'var:preset|spacing|20',
						},
					},
					responsiveControls: {
						lg: {
							height: '100%',
							layout: {
								type: 'default',
							},
							style: {
								spacing: {
									padding: '0',
									blockGap: 'var:preset|spacing|20',
								},
							},
						},
					},
				},
				[
					// The featured image in 16:9, date, title and excerpt with read more text.
					[ 'core/post-featured-image', { isLink: true, aspectRatio: '16/9', width: '100%' } ],
					[ 'core/post-date' ],
					[ 'core/post-title', { isLink: true } ],
					[ 'core/post-excerpt', { moreText: __( 'Read more', 'spectra-pro' ) } ],
				],
			],
		],
	},
	{
		name: 'portrait-2',
		title: __( 'Portrait 2', 'spectra-pro' ),
		attributes: {
			variationSelected: true,
			layout: {
				type: 'grid',
				columnCount: 3,
			},
		},
		scope: [ 'block' ],
		icon: (
			<RenderBlockVariation
				{ ...{
					blockName: 'loop-builder-child-template',
					variationName: 'portrait-2',
					pluginName: 'spectra-pro',
				} }
			/>
		),
		innerBlocks: [
			// The wrapper container for the template layout.
			[
				'spectra/container',
				{
					variationSelected: true,
					overflow: 'hidden',
					height: '100%',
					layout: {
						type: 'default',
					},
					style: {
						spacing: {
							padding: '0',
							blockGap: '0',
						},
						border: {
							radius: '0.5rem',
						},
						shadow: 'var:preset|shadow|natural',
					},
					responsiveControls: {
						lg: {
							height: '100%',
							layout: {
								type: 'default',
							},
							style: {
								spacing: {
									padding: '0',
									blockGap: '0',
								},
								border: {
									radius: '0.5rem',
								},
								shadow: 'var:preset|shadow|natural',
							},
						},
					},
				},
				[
					// The featured image in 16:9.
					[ 'core/post-featured-image', { isLink: true, aspectRatio: '16/9', width: '100%' } ],
					// The content container.
					[
						'spectra/container',
						{
							variationSelected: true,
							width: '100%',
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'stretch',
								verticalAlignment: 'top',
								orientation: 'vertical',
							},
							style: {
								spacing: {
									padding: 'var:preset|spacing|40',
									blockGap: 'var:preset|spacing|20',
								},
							},
							responsiveControls: {
								lg: {
									width: '100%',
									layout: {
										type: 'flex',
										flexWrap: 'nowrap',
										justifyContent: 'stretch',
										verticalAlignment: 'top',
										orientation: 'vertical',
									},
									style: {
										spacing: {
											padding: 'var:preset|spacing|40',
											blockGap: 'var:preset|spacing|20',
										},
									},
								},
							},
						},
						[
							// The category, title, excerpt, and a container with the avatar and author name.
							[ 'core/post-terms', { term: 'category' } ],
							[ 'core/post-title', { isLink: true } ],
							[ 'core/post-excerpt' ],
							[
								'spectra/container',
								{
									variationSelected: true,
									layout: {
										type: 'flex',
										flexWrap: 'nowrap',
										justifyContent: 'left',
										verticalAlignment: 'center',
										orientation: 'horizontal',
									},
									style: {
										spacing: {
											padding: '0',
											blockGap: 'var:preset|spacing|20',
										},
									},
									responsiveControls: {
										lg: {
											layout: {
												type: 'flex',
												flexWrap: 'nowrap',
												justifyContent: 'left',
												verticalAlignment: 'center',
												orientation: 'horizontal',
											},
											style: {
												spacing: {
													padding: '0',
													blockGap: 'var:preset|spacing|20',
												},
											},
										},
									},
								},
								[
									[ 'core/avatar', { size: 48, style: { border: { radius: '999px' } } } ],
									[ 'core/post-author-name' ],
								],
							],
						],
					],
				],
			],
		],
	},
	{
		name: 'landscape',
		title: __( 'Landscape', 'spectra-pro' ),
		attributes: {
			variationSelected: true,
			layout: {
				type: 'grid',
				columnCount: 2,
			},
		},
		scope: [ 'block' ],
		icon: (
			<RenderBlockVariation
				{ ...{
					blockName: 'loop-builder-child-template',
					variationName: 'landscape',
					pluginName: 'spectra-pro',
				} }
			/>
		),
		innerBlocks: [
			// The wrapper container for the template layout.
			[
				'spectra/container',
				{
					variationSelected: true,
					height: '100%',
					fontSize: 'small',
					layout: {
						type: 'flex',
						flexWrap: 'nowrap',
						justifyContent: 'space-between',
						verticalAlignment: 'center',
						orientation: 'horizontal',
					},
					style: {
						spacing: {
							padding: '0',
							blockGap: 'var:preset|spacing|20',
						},
					},
					responsiveControls: {
						lg: {
							height: '100%',
							fontSize: 'small',
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'space-between',
								verticalAlignment: 'center',
								orientation: 'horizontal',
							},
							style: {
								spacing: {
									padding: '0',
									blockGap: 'var:preset|spacing|20',
								},
							},
						},
					},
				},
				[
					// The featured image in portrait 2:3.
					[ 'core/post-featured-image', { isLink: true, aspectRatio: '2/3', width: '100%' } ],
					// The content container.
					[
						'spectra/container',
						{
							variationSelected: true,
							width: '100%',
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'left',
								verticalAlignment: 'top',
								orientation: 'vertical',
							},
							style: {
								spacing: {
									padding: '0',
									blockGap: 'var:preset|spacing|20',
								},
							},
							responsiveControls: {
								lg: {
									width: '100%',
									layout: {
										type: 'flex',
										flexWrap: 'nowrap',
										justifyContent: 'left',
										verticalAlignment: 'top',
										orientation: 'vertical',
									},
									style: {
										spacing: {
											padding: '0',
											blockGap: 'var:preset|spacing|20',
										},
									},
								},
							},
						},
						[
							// A container with the avatar and author name, the, title, and excerpt with a read more link.
							[
								'spectra/container',
								{
									variationSelected: true,
									layout: {
										type: 'flex',
										flexWrap: 'nowrap',
										justifyContent: 'left',
										verticalAlignment: 'center',
										orientation: 'horizontal',
									},
									style: {
										spacing: {
											padding: '0',
											blockGap: 'var:preset|spacing|20',
										},
									},
									responsiveControls: {
										lg: {
											layout: {
												type: 'flex',
												flexWrap: 'nowrap',
												justifyContent: 'left',
												verticalAlignment: 'center',
												orientation: 'horizontal',
											},
											style: {
												spacing: {
													padding: '0',
													blockGap: 'var:preset|spacing|20',
												},
											},
										},
									},
								},
								[
									[ 'core/avatar', { size: 36, style: { border: { radius: '999px' } } } ],
									[ 'core/post-author-name' ],
								],
							],
							[ 'core/post-title', { isLink: true, fontSize: 'medium' } ],
							[ 'core/post-excerpt', { moreText: __( 'Read more', 'spectra-pro' ) } ],
						],
					],
				],
			],
		],
	},
	{
		name: 'boxed',
		title: __( 'Boxed', 'spectra-pro' ),
		attributes: {
			variationSelected: true,
			layout: {
				type: 'grid',
				columnCount: 3,
			},
		},
		scope: [ 'block' ],
		icon: (
			<RenderBlockVariation
				{ ...{
					blockName: 'loop-builder-child-template',
					variationName: 'boxed',
					pluginName: 'spectra-pro',
				} }
			/>
		),
		innerBlocks: [
			// The wrapper container for the template layout, with background image and a dark overlay.
			[
				'spectra/container',
				{
					variationSelected: true,
					height: '100%',
					textColor: '#ffffff',
					backgroundColor: '#00000080',
					background: {
						type: 'image',
						useOverlay: true,
					},
					layout: {
						type: 'flex',
						flexWrap: 'nowrap',
						justifyContent: 'stretch',
						verticalAlignment: 'top',
						orientation: 'vertical',
					},
					style: {
						spacing: {
							padding: 'var:preset|spacing|40',
							blockGap: 'var:preset|spacing|20',
						},
					},
					responsiveControls: {
						lg: {
							height: '100%',
							background: {
								type: 'image',
								useOverlay: true,
							},
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'stretch',
								verticalAlignment: 'top',
								orientation: 'vertical',
							},
							style: {
								spacing: {
									padding: 'var:preset|spacing|40',
									blockGap: 'var:preset|spacing|20',
								},
							},
						},
					},
					// Enable dynamic image.
					spectraProEnableDynamicImage: true,
					spectraProDynamicImage: {
						type: 'image',
						source: {
							type: 'current_post',
							field: 'featured_image',
						},
					},
				},
				[
					// The category, title and a container for the icon and date, all white.
					[
						'core/post-terms',
						{
							term: 'category',
							style: {
								elements: {
									link: {
										color: {
											text: '#ffffff',
										},
									},
								},
							},
							textColor: 'white',
						},
					],
					[
						'core/post-title',
						{
							isLink: true,
							term: 'category',
							style: {
								elements: {
									link: {
										color: {
											text: '#ffffff',
										},
									},
								},
							},
							textColor: 'white',
						},
					],
					[
						'spectra/container',
						{
							variationSelected: true,
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'left',
								verticalAlignment: 'center',
								orientation: 'horizontal',
							},
							style: {
								spacing: {
									padding: '0',
									blockGap: 'var:preset|spacing|20',
								},
							},
							responsiveControls: {
								lg: {
									layout: {
										type: 'flex',
										flexWrap: 'nowrap',
										justifyContent: 'left',
										verticalAlignment: 'center',
										orientation: 'horizontal',
									},
									style: {
										spacing: {
											padding: '0',
											blockGap: 'var:preset|spacing|20',
										},
									},
								},
							},
						},
						[
							// The calendar icon, and the post date.
							[
								'spectra/icon',
								{
									icon: 'calendar-days',
									size: '1.25rem',
									textColor: '#ffffff',
								},
							],
							[
								'core/post-date',
								{
									term: 'category',
									style: {
										elements: {
											link: {
												color: {
													text: '#ffffff',
												},
											},
										},
									},
									textColor: 'white',
								},
							],
						],
					],
				],
			],
		],
	},
	{
		name: 'create-from-scratch',
		title: __( 'Create from scratch', 'spectra-pro' ),
		isDefault: true,
		attributes: {
			variationSelected: true,
		},
		scope: [ 'block' ],
		icon: (
			<RenderBlockVariation
				{ ...{
					blockName: 'loop-builder-child-template',
					variationName: 'create-from-scratch',
					pluginName: 'spectra-pro',
				} }
			/>
		),
		innerBlocks: [
			// The post title to get the user started.
			[ 'core/post-title', { isLink: true } ],
		],
	},
];

export default variations;
