import React from 'react';
import SHA from '@components/sha';
import { embedAd, removeEmbedFromCache } from '@lib/redux/actions/eha-actions';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';


interface EI {
	width?: string | number,
	height?: string | number,
	client?: string,
	format?: string,
	layoutKey?: string,
	layout?: string,
	slot?: string,
	style?: Record<string, any>,
	fullWidthResponsive?: string | boolean,
	mainStyle?: Record<string, any>,
	embedAd?,
	localKey: string,
	removeEmbedFromCache?
}


const
	EHAComponent = ({ width = '100%', localKey, height, slot, mainStyle, removeEmbedFromCache, format, layoutKey, embedAd, fullWidthResponsive, client, layout, style }: EI) => {

		React.useEffect(() => {
			embedAd(localKey);
			return () => removeEmbedFromCache(localKey);
		}, []);

		return process.env.NODE_ENV == 'production'
			? (
				<div className='external-ad' style={{ width, height, ...mainStyle, overflowY: 'hidden' }}>
					<ins className="adsbygoogle"
						style={{ width, height, ...style }}
						data-ad-format={format}
						data-ad-layout={layout}
						data-ad-layout-key={layoutKey}
						data-ad-client={client}
						data-ad-slot={slot}
						data-full-width-responsive={fullWidthResponsive}>
					</ins>
				</div>
			)
			: (
				<div className='external-ad' style={{ width, height }}>
					<div style={{ width, height, ...mainStyle }}>
						<SHA width={width} height={height} style={style} text={'EXTERNALLY HOSTED ADVERTISEMENT'} />
					</div>
				</div>
			);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		embedAd,
		removeEmbedFromCache
	}, dispatch),
	EHA = connect(mapStateToProps, mapDispatchToProps)(EHAComponent);

export default EHA;