/**
 * Container wrapper
 */

// Setup the block
const { Component } = wp.element;

// Import block dependencies and components
import classnames from 'classnames';

/**
 * Create a Button wrapper Component
 */
export default class Container extends Component {
	render() {
		// Setup the attributes
		const {
			attributes: {
				containerBackgroundColor,
				containerAlignment,
				containerPaddingTop,
				containerPaddingRight,
				containerPaddingBottom,
				containerPaddingLeft,
				containerMarginTop,
				containerMarginBottom,
				containerWidth,
				containerMaxWidth,
				containerImgURL,
				containerImgAlt,
				containerDimRatio,
			},
		} = this.props;

		const styles = {
			backgroundColor: containerBackgroundColor
				? containerBackgroundColor
				: undefined,
			textAlign: containerAlignment ? containerAlignment : undefined,
			paddingLeft: containerPaddingLeft
				? `${containerPaddingLeft}%`
				: undefined,
			paddingRight: containerPaddingRight
				? `${containerPaddingRight}%`
				: undefined,
			paddingBottom: containerPaddingBottom
				? `${containerPaddingBottom}%`
				: undefined,
			paddingTop: containerPaddingTop
				? `${containerPaddingTop}%`
				: undefined,
			marginTop: containerMarginTop
				? `${containerMarginTop}%`
				: undefined,
			marginBottom: containerMarginBottom
				? `${containerMarginBottom}%`
				: undefined,
		};

		const className = classnames(
			[this.props.className, 'gb-block-container'],
			{
				['align' + containerWidth]: containerWidth,
			}
		);

		return (
			<div style={styles} className={className ? className : undefined}>
				<div className="gb-container-inside">
					{containerImgURL && !!containerImgURL.length && (
						<div className="gb-container-image-wrap">
							<img
								className={classnames(
									'gb-container-image',
									dimRatioToClass(containerDimRatio),
									{
										'has-background-dim':
											0 !== containerDimRatio,
									}
								)}
								src={containerImgURL}
								alt={containerImgAlt}
							/>
						</div>
					)}

					<div
						className="gb-container-content"
						style={{
							maxWidth: containerMaxWidth
								? `${containerMaxWidth}px`
								: undefined,
						}}
					>
						{this.props.children}
					</div>
				</div>
			</div>
		);
	}
}

function dimRatioToClass(ratio) {
	return 0 === ratio || 50 === ratio
		? null
		: `has-background-dim-${10 * Math.round(ratio / 10)}`;
}
