'use strict';

const { getBlockVariations, registerBlockVariation } = wp.blocks;
const { __ } = wp.i18n;
const domReady = wp.domReady;

domReady(() => {
	const variations = getBlockVariations('core/group');

	if (! variations.some(variation => 'group-grid' === variation.name)) {
		registerBlockVariation(
			'core/group', 
			{
			name: 'group-grid',
			title: __('Grid', 'lifttruck'),
			icon: 'grid-view',
			description: __('Arrange blocks in a grid.', 'lifttruck'),
			attributes: {
				layout: {
					type: 'grid' 
				}
			},
			scope: [ 'block', 'inserter', 'transform' ],
			isActive: (blockAttributes) =>
				blockAttributes.layout?.type === 'grid',
		});
	}
/* ------------------------   Banner Variation   ---------------------------------------*/

registerBlockVariation(
	'core/group',
	{
		name: 'banner',
		title: 'Banner',
		icon: {
			foreground: '#007dff',
			src:<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19 3h-14c-.6 0-1 .4-1 1v7c0 .5.4 1 1 1h14c.5 0 1-.4 1-1v-7c0-.6-.4-1-1-1zm-13.5 7.5v-.4l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 2.4 2.4zm13 0h-2.9l-4-4c-.3-.3-.8-.3-1.1 0l-1.6 1.5-1.2-.8c-.3-.2-.6-.2-.9 0l-1.3 1v-3.7h13zm-14.5 9.5h9v-1.5h-9zm0-4h16v-1.5h-16z"/></svg>,
		},
		attributes: {
			
			style: {
				color: {
					text: '#000',
					background: '#8ed1fc',
				},
			},
			
		},
		innerBlocks: [
			[ 'core/group', {
				
				style: {
					spacing: {
						padding: {
							bottom: "3rem",
							left: "3rem",
							right: "3rem",
							top: "3rem"
						}
					}
				},
				
			} , [
				[
					'core/heading', { 
						level: 4,
						content: 'The Best Cameras',
						
					}
				],
				[ 'core/group', {
						layout: {
						type:"flex",
						flexWrap:"nowrap"
						},
						style: {
							spacing: {
								blockGap: '0.5rem',
							}
						}
							
						
				}, [
					[
						'core/paragraph',
						{
							
							content: 'from just',
							fontSize:"medium"
						} 
					],
					[
						'core/paragraph',
						{
							
							content: '€/mes'
						} 
					],
				] ],
				
				[
					'core/button',
					{
						
						content: 'See More',
						className: "is-style-ghost"
					} 
				]

			]],

			[ 'core/image', {} ]
			
		],
		isDefault: false,
		
	}
);


/* ------------------------   Section Title Variation   ---------------------------------------*/
registerBlockVariation(
	'core/group',
	{
		name: 'section-title',
		title: 'Section Title',
		icon: {
			foreground: '#007dff',
			src:<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m11 7.00247329v9.99505341c0 .5467123.4477153 1.0024733 1 1.0024733.5561352 0 1-.4488226 1-1.0024733v-9.99505341c0-.54671233-.4477153-1.00247329-1-1.00247329-.5561352 0-1 .44882258-1 1.00247329zm-2 0c0-1.65726511 1.3383203-3.00247329 3-3.00247329 1.6577294 0 3 1.35202341 3 3.00247329v9.99505341c0 1.6572651-1.3383203 3.0024733-3 3.0024733-1.6577294 0-3-1.3520234-3-3.0024733zm10-5.00001162c0-.55364429.4438648-1.00246167 1-1.00246167.5522847 0 1 .43945834 1 1.00246167v19.99507663c0 .5536443-.4438648 1.0024617-1 1.0024617-.5522847 0-1-.4394583-1-1.0024617zm-16 0c0-.55364429.44386482-1.00246167 1-1.00246167.55228475 0 1 .43945834 1 1.00246167v19.99507663c0 .5536443-.44386482 1.0024617-1 1.0024617-.55228475 0-1-.4394583-1-1.0024617z"  transform="matrix(0 1 -1 0 24 0)"/></svg>,
		},
		attributes: {
			
			style: {
				spacing: {
					padding: {
						bottom: "1rem",
					},
					margin: {
						bottom: "0",
					},
					blockGap: '0.5rem',
					
				}
			},
			layout: {
					type:"flex",
					orientation:"vertical",
					justifyContent:"center"
			},
			className:"section-title"
		},
		innerBlocks: [
			[
				'core/paragraph',
				{
					
					content: 'When you have Questions'
				} 
			],
			[
				'core/heading',
				{
					
					content: 'Frequently Asked Questions'
				} 
			],
		],
		isDefault: false,
		
	}
  );

}); // END domReady