import React, { ReactElement } from 'react';

import {
	ModuleContainer,
	ElementComponents,
} from '@divi/module';

import { MapsListingEditProps } from './types';
import { ModuleStyles } from './styles';
import { ModuleScriptData } from './module-script-data';
import { moduleClassnames } from './module-classnames';

const MapsListingEdit = (props: MapsListingEditProps): ReactElement => {
	const {
		attrs,
		id,
		name,
		elements,
	} = props;

	const blockId = attrs?._block_id?.innerContent?.desktop?.value || id;
	const elementId = attrs?._element_id?.innerContent?.desktop?.value;
	const dummyMapUrl =
		window?.JetEngineDiviViews?.mapsListingDummyMapUrl ||
		window?.JetEngineDiviViews?.mapsListingConfig?.dummyMapUrl ||
		'';

	return (
		<ModuleContainer
			attrs={attrs}
			elements={elements}
			id={id}
			name={name}
			stylesComponent={ModuleStyles}
			classnamesFunction={moduleClassnames}
			scriptDataComponent={ModuleScriptData}
		>
			{elements.styleComponents({
				attrName: 'module',
			})}
			<>
				<ElementComponents
					attrs={attrs?.module?.decoration ?? {}}
					id={id}
				/>
				<div
					className="jet-map-listing-block"
					data-id={blockId}
					{...( elementId ? { id: elementId } : {} )}
				>
					{dummyMapUrl ? (
						<img
							className="jet-map-listing-block__placeholder"
							src={dummyMapUrl}
							style={{ width: '100%' }}
						/>
					) : null}
				</div>
			</>
		</ModuleContainer>
	);
}

export {
	MapsListingEdit,
};
