function buildStaticMapUrl(address, apiKey, zoomLevel) {
	if (!address || !apiKey) {
		return '';
	}

	const params = new URLSearchParams({
		center: address,
		zoom: String(zoomLevel || 15),
		size: '1200x700',
		scale: '2',
		markers: address,
		key: apiKey,
	});

	return 'https://maps.googleapis.com/maps/api/staticmap?' + params.toString();
}

class GoogleStaticMap extends React.Component {
	static slug = 'gmds_google_static_map';

	render() {
		const address = this.props.address || '';
		const apiKey = window.gmdsDiviModule ? window.gmdsDiviModule.apiKey : '';
		const zoomLevel = parseInt(this.props.zoom_level || '15', 10);
		const wrapperStyle = {
			width: '100%',
			height: '350px',
			borderRadius: '8px',
			overflow: 'hidden',
			backgroundColor: '#e5e3df',
		};
		const canvasStyle = {
			width: '100%',
			height: '100%',
		};

		if (!address) {
			return React.createElement('div', {
				className: 'gmds-google-map',
				style: wrapperStyle,
			});
		}

		if (!apiKey) {
			return React.createElement(
				'div',
				{
					className: 'gmds-google-map gmds-google-map--notice',
					style: {
						...wrapperStyle,
						display: 'flex',
						alignItems: 'center',
						justifyContent: 'center',
						padding: '20px',
						textAlign: 'center',
						backgroundColor: '#f7f7f7',
					},
				},
				window.gmdsDiviModule && window.gmdsDiviModule.noApiKey ? window.gmdsDiviModule.noApiKey : ''
			);
		}

		return React.createElement('div', {
			className: 'gmds-google-map',
			role: 'img',
			'aria-label': address,
			style: {
				...wrapperStyle,
				backgroundPosition: 'center',
				backgroundRepeat: 'no-repeat',
				backgroundSize: 'cover',
				backgroundImage: 'url("' + buildStaticMapUrl(address, apiKey, zoomLevel) + '")',
			},
		}, React.createElement('div', {
			className: 'gmds-google-map__canvas',
			style: canvasStyle,
		}));
	}
}

export default GoogleStaticMap;
