/**
 * BLOCK: Genesis Blocks Container
 */

// Import block dependencies and components
import Inspector from './components/inspector';
import Container from './components/container';

// Deprecated components
import deprecated from './deprecated/deprecated';

// Import CSS
import './styles/style.scss';
import './styles/editor.scss';

// Components
const { __ } = wp.i18n;

// Extend component
const { Component } = wp.element;

// Register block
const { registerBlockType } = wp.blocks;

// Register editor components
const { InnerBlocks } = wp.blockEditor;

const blockAttributes = {
	containerPaddingTop: {
		type: 'number',
	},
	containerPaddingRight: {
		type: 'number',
	},
	containerPaddingBottom: {
		type: 'number',
	},
	containerPaddingLeft: {
		type: 'number',
	},
	containerMarginTop: {
		type: 'number',
	},
	containerMarginBottom: {
		type: 'number',
	},
	containerWidth: {
		type: 'string',
	},
	containerMaxWidth: {
		type: 'number',
	},
	containerBackgroundColor: {
		type: 'string',
	},
	containerImgURL: {
		type: 'string',
		source: 'attribute',
		attribute: 'src',
		selector: 'img',
	},
	containerImgID: {
		type: 'number',
	},
	containerImgAlt: {
		type: 'string',
		source: 'attribute',
		attribute: 'alt',
		selector: 'img',
	},
	containerDimRatio: {
		type: 'number',
		default: 50,
	},
};

class GBContainerBlock extends Component {
	render() {
		// Setup the attributes
		const { setAttributes } = this.props;

		return [
			// Show the block controls on focus
			<Inspector
				key={'gb-container-inspector-' + this.props.clientId}
				{...{ setAttributes, ...this.props }}
			/>,

			// Show the container markup in the editor
			<Container
				key={'gb-container-' + this.props.clientId}
				{...this.props}
			>
				<InnerBlocks />
			</Container>,
		];
	}
}

// Register the block
registerBlockType('genesis-blocks/gb-container', {
	title: __('Container', 'genesis-blocks'),
	description: __(
		'Add a container block to wrap several blocks in a parent container.',
		'genesis-blocks'
	),
	icon: 'editor-table',
	category: 'genesis-blocks',
	keywords: [
		__('container', 'genesis-blocks'),
		__('section', 'genesis-blocks'),
		__('genesis', 'genesis-blocks'),
	],

	supports: {
		align: ['center', 'wide', 'full'],
		html: false,
	},

	attributes: blockAttributes,

	gb_settings_data: {
		gb_container_containerOptions: {
			title: __('Container Options', 'genesis-blocks'),
		},
		gb_container_backgroundOptions: {
			title: __('Background Options', 'genesis-blocks'),
		},
	},

	// Render the block components
	edit: GBContainerBlock,

	// Save the attributes and markup
	save(props) {
		// Save the block markup for the front end
		return (
			<Container {...props}>
				<InnerBlocks.Content />
			</Container>
		);
	},
	getEditWrapperProps({ containerWidth }) {
		if (
			'center' === containerWidth ||
			'wide' === containerWidth ||
			'full' === containerWidth
		) {
			return { 'data-align': containerWidth };
		}
	},

	deprecated,
});
