/**
 * 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: 'variation-1',
		title: __( 'Variation 1', 'spectra-pro' ),
		attributes: {
			variationSelected: true,
			layout: {
				type: 'flex',
				flexWrap: 'nowrap',
				orientation: 'vertical',
				justifyContent: 'stretch',
				verticalAlignment: null,
			},
		},
		scope: [ 'block' ],
		icon: (
			<RenderBlockVariation
				{ ...{
					blockName: 'loop-builder',
					variationName: 'variation-1',
					pluginName: 'spectra-pro',
				} }
			/>
		),
		innerBlocks: [
			// The wrapper contianer for the filters.
			[
				'spectra/container',
				{
					variationSelected: true,
					width: '100%',
					layout: {
						type: 'flex',
						flexWrap: 'nowrap',
						justifyContent: 'space-between',
						verticalAlignment: 'center',
						orientation: 'horizontal',
					},
					style: {
						spacing: {
							padding: '0',
						},
					},
					responsiveControls: {
						lg: {
							width: '100%',
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'space-between',
								verticalAlignment: 'center',
								orientation: 'horizontal',
							},
							style: {
								spacing: {
									padding: '0',
								},
							},
						},
					},
				},
				[
					// The default search and category filter dropdown blocks.
					[ 'spectra-pro/loop-builder-child-search' ],
					[ 'spectra-pro/loop-builder-child-filter' ],
				],
			],
			// The default template, pagination, and no results blocks.
			[ 'spectra-pro/loop-builder-child-template' ],
			[ 'spectra-pro/loop-builder-child-pagination' ],
			[ 'spectra-pro/loop-builder-child-no-results' ],
		],
	},
	{
		name: 'variation-2',
		title: __( 'Variation 2', 'spectra-pro' ),
		attributes: {
			variationSelected: true,
			layout: {
				type: 'flex',
				flexWrap: 'nowrap',
				orientation: 'vertical',
				justifyContent: 'stretch',
				verticalAlignment: null,
			},
		},
		scope: [ 'block' ],
		icon: (
			<RenderBlockVariation
				{ ...{
					blockName: 'loop-builder',
					variationName: 'variation-2',
					pluginName: 'spectra-pro',
				} }
			/>
		),
		innerBlocks: [
			// The wrapper container for all the filters.
			[
				'spectra/container',
				{
					variationSelected: true,
					width: '100%',
					layout: {
						type: 'flex',
						flexWrap: 'nowrap',
						justifyContent: 'space-between',
						verticalAlignment: 'center',
						orientation: 'horizontal',
					},
					style: {
						spacing: {
							padding: '0',
						},
					},
					responsiveControls: {
						lg: {
							width: '100%',
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'space-between',
								verticalAlignment: 'center',
								orientation: 'horizontal',
							},
							style: {
								spacing: {
									padding: '0',
								},
							},
						},
					},
				},
				[
					// The wrapper inner container for the category and sort dropdowns.
					[
						'spectra/container',
						{
							variationSelected: true,
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'left',
								verticalAlignment: 'center',
								orientation: 'horizontal',
							},
							style: {
								spacing: {
									padding: '0',
								},
							},
							responsiveControls: {
								lg: {
									layout: {
										type: 'flex',
										flexWrap: 'nowrap',
										justifyContent: 'left',
										verticalAlignment: 'center',
										orientation: 'horizontal',
									},
									style: {
										spacing: {
											padding: '0',
										},
									},
								},
							},
						},
						[
							// The default category filter dropdown and search blocks.
							[ 'spectra-pro/loop-builder-child-filter' ],
							[ 'spectra-pro/loop-builder-child-sort' ],
						],
					],
					// The wrapper inner container for the category and sort dropdowns.
					[
						'spectra/container',
						{
							variationSelected: true,
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'right',
								verticalAlignment: 'center',
								orientation: 'horizontal',
							},
							style: {
								spacing: {
									padding: '0',
								},
							},
							responsiveControls: {
								lg: {
									layout: {
										type: 'flex',
										flexWrap: 'nowrap',
										justifyContent: 'right',
										verticalAlignment: 'center',
										orientation: 'horizontal',
									},
									style: {
										spacing: {
											padding: '0',
										},
									},
								},
							},
						},
						[
							// The default search and reset button blocks.
							[ 'spectra-pro/loop-builder-child-search' ],
							[
								'spectra-pro/loop-builder-child-reset-all-button',
								{
									text: __( 'Reset', 'spectra-pro' ),
									style: {
										spacing: {
											padding: {
												top: 'var:preset|spacing|20',
												bottom: 'var:preset|spacing|20',
											},
										},
									},
									responsiveControls: {
										lg: {
											style: {
												spacing: {
													padding: {
														top: 'var:preset|spacing|20',
														bottom: 'var:preset|spacing|20',
													},
												},
											},
										},
									},
								},
							],
						],
					],
				],
			],
			// The default template, pagination, and no results blocks.
			[ 'spectra-pro/loop-builder-child-template' ],
			[ 'spectra-pro/loop-builder-child-pagination' ],
			[ 'spectra-pro/loop-builder-child-no-results' ],
		],
	},
	{
		name: 'variation-3',
		title: __( 'Variation 3', 'spectra-pro' ),
		attributes: {
			variationSelected: true,
			layout: {
				type: 'flex',
				flexWrap: 'nowrap',
				orientation: 'vertical',
				justifyContent: 'stretch',
				verticalAlignment: null,
			},
		},
		scope: [ 'block' ],
		icon: (
			<RenderBlockVariation
				{ ...{
					blockName: 'loop-builder',
					variationName: 'variation-3',
					pluginName: 'spectra-pro',
				} }
			/>
		),
		innerBlocks: [
			[
				// The wrapper contianer for all the filters.
				'spectra/container',
				{
					width: '100%',
					layout: {
						type: 'flex',
						flexWrap: 'nowrap',
						justifyContent: 'space-between',
						verticalAlignment: 'center',
						orientation: 'horizontal',
					},
					style: {
						spacing: {
							padding: '0',
						},
					},
					responsiveControls: {
						lg: {
							width: '100%',
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'space-between',
								verticalAlignment: 'center',
								orientation: 'horizontal',
							},
							style: {
								spacing: {
									padding: '0',
								},
							},
						},
					},
				},
				[
					// The button category filter and default search blocks.
					[ 'spectra-pro/loop-builder-child-filter', { filterType: 'button' } ],
					[ 'spectra-pro/loop-builder-child-search' ],
				],
			],
			// The default template, pagination, and no results blocks.
			[ 'spectra-pro/loop-builder-child-template' ],
			[ 'spectra-pro/loop-builder-child-pagination' ],
			[ 'spectra-pro/loop-builder-child-no-results' ],
		],
	},
	{
		name: 'variation-4',
		title: __( 'Variation 4', 'spectra-pro' ),
		attributes: {
			variationSelected: true,
			layout: {
				type: 'flex',
				flexWrap: 'nowrap',
				orientation: 'horizontal',
				justifyContent: 'space-between',
				verticalAlignment: 'top',
			},
		},
		scope: [ 'block' ],
		icon: (
			<RenderBlockVariation
				{ ...{
					blockName: 'loop-builder',
					variationName: 'variation-4',
					pluginName: 'spectra-pro',
				} }
			/>
		),
		innerBlocks: [
			// The left-side contianer for the filters.
			[
				'spectra/container',
				{
					variationSelected: true,
					layout: {
						type: 'flex',
						flexWrap: 'nowrap',
						justifyContent: 'left',
						verticalAlignment: 'top',
						orientation: 'vertical',
					},
					style: {
						layout: {
							selfStretch: 'fixed',
							flexSize: '25%',
						},
						spacing: {
							padding: '0',
						},
					},
					responsiveControls: {
						lg: {
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'left',
								verticalAlignment: 'top',
								orientation: 'vertical',
							},
							style: {
								layout: {
									selfStretch: 'fixed',
									flexSize: '25%',
								},
								spacing: {
									padding: '0',
								},
							},
						},
					},
				},
				[
					// The default search, checkbox category filter and reset blocks, with content blocks for headings.
					[ 'spectra/content', { tagName: 'h4', text: __( 'Search', 'spectra-pro' ) } ],
					[ 'spectra-pro/loop-builder-child-search' ],
					[ 'spectra/content', { tagName: 'h4', text: __( 'Categories', 'spectra-pro' ) } ],
					[ 'spectra-pro/loop-builder-child-filter', { filterType: 'checkbox' } ],
					[
						'spectra-pro/loop-builder-child-reset-all-button',
						{ text: __( 'Reset Filters', 'spectra-pro' ) },
					],
				],
			],
			// The right-side contianer for the sort, loop and pagination.
			[
				'spectra/container',
				{
					variationSelected: true,
					layout: {
						type: 'flex',
						flexWrap: 'nowrap',
						justifyContent: 'stretch',
						verticalAlignment: 'top',
						orientation: 'vertical',
					},
					style: {
						layout: {
							selfStretch: 'fixed',
							flexSize: '75%',
						},
						spacing: {
							padding: '0',
						},
					},
					responsiveControls: {
						lg: {
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'stretch',
								verticalAlignment: 'top',
								orientation: 'vertical',
							},
							style: {
								layout: {
									selfStretch: 'fixed',
									flexSize: '75%',
								},
								spacing: {
									padding: '0',
								},
							},
						},
					},
				},
				[
					// Container to align the sort to the right, despite the parent being stretch for other blocks.
					[
						'spectra/container',
						{
							variationSelected: true,
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'right',
								verticalAlignment: 'top',
								orientation: 'horizontal',
							},
							style: {
								spacing: {
									padding: '0',
								},
							},
							responsiveControls: {
								lg: {
									layout: {
										type: 'flex',
										flexWrap: 'nowrap',
										justifyContent: 'right',
										verticalAlignment: 'top',
										orientation: 'horizontal',
									},
									style: {
										spacing: {
											padding: '0',
										},
									},
								},
							},
						},
						[
							// The default sort block.
							[ 'spectra-pro/loop-builder-child-sort' ],
						],
					],
					// The default template, pagination, and no results blocks.
					[ 'spectra-pro/loop-builder-child-template' ],
					[ 'spectra-pro/loop-builder-child-pagination' ],
					[ 'spectra-pro/loop-builder-child-no-results' ],
				],
			],
		],
	},
	{
		name: 'variation-5',
		title: __( 'Variation 5', 'spectra-pro' ),
		attributes: {
			variationSelected: true,
			layout: {
				type: 'flex',
				flexWrap: 'nowrap',
				orientation: 'horizontal',
				justifyContent: 'space-between',
				verticalAlignment: 'top',
			},
		},
		scope: [ 'block' ],
		icon: (
			<RenderBlockVariation
				{ ...{
					blockName: 'loop-builder',
					variationName: 'variation-5',
					pluginName: 'spectra-pro',
				} }
			/>
		),
		innerBlocks: [
			// The left-side contianer for the filters.
			[
				'spectra/container',
				{
					variationSelected: true,
					layout: {
						type: 'flex',
						flexWrap: 'nowrap',
						justifyContent: 'left',
						verticalAlignment: 'top',
						orientation: 'vertical',
					},
					style: {
						layout: {
							selfStretch: 'fixed',
							flexSize: '25%',
						},
						spacing: {
							padding: '0',
						},
					},
					responsiveControls: {
						lg: {
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'left',
								verticalAlignment: 'top',
								orientation: 'vertical',
							},
							style: {
								layout: {
									selfStretch: 'fixed',
									flexSize: '25%',
								},
								spacing: {
									padding: '0',
								},
							},
						},
					},
				},
				[
					// The default sort and search, checkbox category filter and reset blocks, with content blocks for headings.
					[ 'spectra/content', { tagName: 'h4', text: __( 'Sort', 'spectra-pro' ) } ],
					[ 'spectra-pro/loop-builder-child-sort' ],
					[ 'spectra/content', { tagName: 'h4', text: __( 'Search', 'spectra-pro' ) } ],
					[ 'spectra-pro/loop-builder-child-search' ],
					[ 'spectra/content', { tagName: 'h4', text: __( 'Categories', 'spectra-pro' ) } ],
					[ 'spectra-pro/loop-builder-child-filter', { filterType: 'checkbox' } ],
					[
						'spectra-pro/loop-builder-child-reset-all-button',
						{ text: __( 'Reset Filters', 'spectra-pro' ) },
					],
				],
			],
			// The right-side contianer for the sort, loop and pagination.
			[
				'spectra/container',
				{
					variationSelected: true,
					layout: {
						type: 'flex',
						flexWrap: 'nowrap',
						justifyContent: 'stretch',
						verticalAlignment: 'top',
						orientation: 'vertical',
					},
					style: {
						layout: {
							selfStretch: 'fixed',
							flexSize: '75%',
						},
						spacing: {
							padding: '0',
						},
					},
					responsiveControls: {
						lg: {
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'stretch',
								verticalAlignment: 'top',
								orientation: 'vertical',
							},
							style: {
								layout: {
									selfStretch: 'fixed',
									flexSize: '75%',
								},
								spacing: {
									padding: '0',
								},
							},
						},
					},
				},
				[
					// The default template, pagination, and no results blocks.
					[ 'spectra-pro/loop-builder-child-template' ],
					[ 'spectra-pro/loop-builder-child-pagination' ],
					[ 'spectra-pro/loop-builder-child-no-results' ],
				],
			],
		],
	},
	{
		name: 'variation-6',
		title: __( 'Variation 6', 'spectra-pro' ),
		attributes: {
			variationSelected: true,
			layout: {
				type: 'flex',
				flexWrap: 'nowrap',
				orientation: 'horizontal',
				justifyContent: 'space-between',
				verticalAlignment: 'top',
			},
		},
		scope: [ 'block' ],
		icon: (
			<RenderBlockVariation
				{ ...{
					blockName: 'loop-builder',
					variationName: 'variation-6',
					pluginName: 'spectra-pro',
				} }
			/>
		),
		innerBlocks: [
			// The left-side contianer for the sort, loop and pagination.
			[
				'spectra/container',
				{
					variationSelected: true,
					layout: {
						type: 'flex',
						flexWrap: 'nowrap',
						justifyContent: 'stretch',
						verticalAlignment: 'top',
						orientation: 'vertical',
					},
					style: {
						spacing: {
							padding: '0',
						},
					},
					responsiveControls: {
						lg: {
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'stretch',
								verticalAlignment: 'top',
								orientation: 'vertical',
							},
							style: {
								spacing: {
									padding: '0',
								},
							},
						},
					},
				},
				[
					// Container to align the sort to the left, despite the parent being stretch for other blocks.
					[
						'spectra/container',
						{
							variationSelected: true,
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'left',
								verticalAlignment: 'top',
								orientation: 'horizontal',
							},
							style: {
								spacing: {
									padding: '0',
								},
							},
							responsiveControls: {
								lg: {
									layout: {
										type: 'flex',
										flexWrap: 'nowrap',
										justifyContent: 'left',
										verticalAlignment: 'top',
										orientation: 'horizontal',
									},
									style: {
										spacing: {
											padding: '0',
										},
									},
								},
							},
						},
						[
							// The default sort block.
							[ 'spectra-pro/loop-builder-child-sort' ],
						],
					],
					// The default template, pagination, and no results blocks.
					[ 'spectra-pro/loop-builder-child-template' ],
					[ 'spectra-pro/loop-builder-child-pagination' ],
					[ 'spectra-pro/loop-builder-child-no-results' ],
				],
			],
			// The right-side contianer for the filters.
			[
				'spectra/container',
				{
					variationSelected: true,
					layout: {
						type: 'flex',
						flexWrap: 'nowrap',
						justifyContent: 'left',
						verticalAlignment: 'top',
						orientation: 'vertical',
					},
					style: {
						layout: {
							selfStretch: 'fixed',
							flexSize: '25vw',
						},
						spacing: {
							padding: '0',
						},
					},
					responsiveControls: {
						lg: {
							layout: {
								type: 'flex',
								flexWrap: 'nowrap',
								justifyContent: 'left',
								verticalAlignment: 'top',
								orientation: 'vertical',
							},
							style: {
								layout: {
									selfStretch: 'fixed',
									flexSize: '25vw',
								},
								spacing: {
									padding: '0',
								},
							},
						},
					},
				},
				[
					// The default search, checkbox category filter and reset blocks, with content blocks for headings.
					[ 'spectra/content', { tagName: 'h4', text: __( 'Search', 'spectra-pro' ) } ],
					[ 'spectra-pro/loop-builder-child-search' ],
					[ 'spectra/content', { tagName: 'h4', text: __( 'Categories', 'spectra-pro' ) } ],
					[ 'spectra-pro/loop-builder-child-filter', { filterType: 'checkbox' } ],
					[
						'spectra-pro/loop-builder-child-reset-all-button',
						{ text: __( 'Reset Filters', 'spectra-pro' ) },
					],
				],
			],
		],
	},
	{
		name: 'create-from-scratch',
		title: __( 'Create from scratch', 'spectra-pro' ),
		isDefault: true,
		attributes: {
			variationSelected: true,
		},
		scope: [ 'block' ],
		icon: (
			<RenderBlockVariation
				{ ...{
					blockName: 'loop-builder',
					variationName: 'create-from-scratch',
					pluginName: 'spectra-pro',
				} }
			/>
		),
		innerBlocks: [
			// The default template block.
			[
				'spectra-pro/loop-builder-child-template',
				{
					layout: {
						type: 'grid',
						columnCount: 3,
					},
					responsiveControls: {
						lg: {
							layout: {
								type: 'grid',
								columnCount: 3,
							},
						},
					},
				},
			],
		],
	},
];

export default variations;
