import React from 'react';
import { Divider, Tooltip } from 'antd';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchSHA } from '@lib/redux/actions/sha-actions';
import { Facebook } from 'react-content-loader';


interface SI {
	width?: string | number,
	height?: string | number,
	text?: string,
	style?: Record<string, any>,
	sha?: Record<string, any>,
	specification?: Record<string, any>,
	fetchSHA?,
	status?,
	theme?: 'light' | 'dark',
	hideLabel?: boolean,
	imageOnly?: boolean,
	imageHeight?: string,
	showLoadingIndicator?: boolean
}

const
	SHAComponent = ({ hideLabel, showLoadingIndicator = true, width, theme, height, imageHeight, text, style, sha, specification, imageOnly, fetchSHA, status }: SI) => {


		const [widthClass, setWidthClass] = React.useState('sha-sm');
		const [imgSrc, setImgSrc] = React.useState('');

		React.useEffect(() => {
			if (specification) {
				fetchSHA(specification);
			}
		}, []);

		React.useEffect(() => {
			if(sha) {
				if(document.body.getBoundingClientRect().width >= 1200) {
					setImgSrc(sha[specification?.id]?.mediaGallery?.large);
				} else if(document.body.getBoundingClientRect().width >= 700) {
					setImgSrc(sha[specification?.id]?.mediaGallery?.medium);
				} else if(document.body.getBoundingClientRect().width <= 700) {
					setImgSrc(sha[specification?.id]?.mediaGallery?.small);
				}
			}
		}, [sha, specification]);



		if (specification) {
			return showLoadingIndicator && status?.sha && status?.sha[specification?.id]?.fetching
				? (
					<div style={{ position: 'relative', width, height, ...style }}>
						<Facebook />
					</div>
				)
				: sha
					? (
						<div data-sha-id={specification?.id ?? 'none set'} data-sha-code={specification?.code ?? 'none set'} style={{ position: 'relative', width, height, ...style }}>
							{!hideLabel
								? (
									<Divider plain><small className='font-2' style={{ color: '#888', fontSize: '9px' }}>ADVERTISEMENT</small></Divider>
								)
								: null}
							<a
								ref={el => {
									if (!el) return;
									if(sha) {
										if(el.getBoundingClientRect().width >= 1200) {
											setImgSrc(sha[specification?.id]?.mediaGallery?.large);
										} else if(el.getBoundingClientRect().width >= 700) {
											setImgSrc(sha[specification?.id]?.mediaGallery?.medium);
										} else if(el.getBoundingClientRect().width <= 700) {
											setImgSrc(sha[specification?.id]?.mediaGallery?.small);
										}
									}
								}}
								rel='noreferrer nofollow noopener'
								target='_block'
								className={`sha ${widthClass}`}
								href={sha[specification?.id]?.url}
								data-element='ADVERTISEMENT'
							>
								<div className="sha-img">
									<Tooltip title={sha[specification?.id]?.title}>
										<img
											src={imgSrc}
											style={{ width: '100%', height: imageHeight ?? 'unset', maxHeight: imageHeight ?? '200px' }}
											alt={sha[specification?.id]?.title ?? ''}
										/>
									</Tooltip>
								</div>
								{!imageOnly
									? (
										<div className="sha-text" style={{ marginTop: '10px', padding: '0 15px' }}>
											<h5 className='font-1' style={{ fontSize: '13px', color: theme == 'light' ? '#fff' : '#000', marginBottom: '10px' }}>{sha[specification?.id]?.title}</h5>
											<p className='font-1' style={{ fontSize: '12px', color: theme == 'light' ? '#f5f5f5' : '#555', margin: 0 }}>{sha[specification?.id]?.description}</p>
											<div className='sha-btn'>
												<button className="btn btn-sm btn-success">Learn More</button>
											</div>
										</div>
									) : null}
							</a>
							{!hideLabel
								? (
									<Divider plain />
								)
								: null}
						</div>
					)
					: null;
		} else {
			return (
				<div
					style={{ background: '#999', position: 'relative', width, height, ...style, display: 'flex', justifyContent: 'center', alignItems: 'center' }}
					data-element='ADVERTISEMENT'
				>
					{text ?? 'ADVERTISEMENT'}
				</div>
			);
		}
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchSHA
	}, dispatch),
	SHA = connect(mapStateToProps, mapDispatchToProps)(SHAComponent);

export default SHA;