import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Row, Col, Typography } from 'antd';

import covidBG from '@assets/images/covid1.jpg';
import { fetchCovidStats } from '@lib/redux/actions/external-api-actions';


interface CTI {
	corona_metrics?,
	status?,
	country?: string,
	fetchCovidStats?
}

const
	CoronaTrackerComponent = ({ corona_metrics, country, fetchCovidStats }: CTI) => {
		// <img src={covidBG} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1 }} />;

		React.useEffect(() => {
			setTimeout(() => fetchCovidStats(country), 3e3);
		}, []);

		return (
			<div
				className='text-center d-flex align-items-center'
				style={{
					background: '#202127',
					position: 'relative',
					width: '100%',
					height: '100%',
					padding: '10px',
					borderRadius: '5px',
					overflow: 'hidden',
					boxShadow: '0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)'
				}}>
				<img src={covidBG} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1 }} />
				<div style={{ position: 'relative', flexBasis: '100%', width: '100%', zIndex: 30 }}>
					<Typography.Title level={4} className='font-3' style={{ fontSize: '25px', color: '#fff' }}>{country ?? 'Global'}</Typography.Title>
					<Row gutter={[16, 16]}>
						<Col xs={{ span: 24 }} sm={{ span: (24 / 3) }} md={{ span: (24 / 3) }}>
							<div>
								<div className='w-100 d-flex justify-content-center'>
									<span className='d-flex justify-content-center align-items-center' style={{ background: '#ffe799', width: '80px', height: '80px', borderRadius: '80px' }}>
										<strong>{corona_metrics && corona_metrics[country?.toLowerCase() ?? 'world']?.confirmed?.value}</strong>
									</span>
								</div>
								<Typography.Title level={5} className='font-2' style={{ fontSize: '12px', color: '#fff', margin: 0, marginTop: '10px' }}>Confirmed Cases</Typography.Title>
							</div>
						</Col>
						<Col xs={{ span: 24 }} sm={{ span: (24 / 3) }} md={{ span: (24 / 3) }}>
							<div>
								<div className='w-100 d-flex justify-content-center'>
									<span className='d-flex justify-content-center align-items-center' style={{ background: '#ffe799', width: '80px', height: '80px', borderRadius: '80px' }}>
										<strong>{corona_metrics && corona_metrics[country?.toLowerCase() ?? 'world']?.deaths?.value}</strong>
									</span>
								</div>
								<Typography.Title level={5} className='font-2' style={{ fontSize: '12px', color: '#fff', margin: 0, marginTop: '10px' }}>Total Deaths</Typography.Title>
							</div>
						</Col>
						<Col xs={{ span: 24 }} sm={{ span: (24 / 3) }} md={{ span: (24 / 3) }}>
							<div>
								<div className='w-100 d-flex justify-content-center'>
									<span className='d-flex justify-content-center align-items-center' style={{ background: '#ffe799', width: '80px', height: '80px', borderRadius: '80px' }}>
										<strong>{corona_metrics && corona_metrics[country?.toLowerCase() ?? 'world']?.recovered?.value}</strong>
									</span>
								</div>
								<Typography.Title level={5} className='font-2' style={{ fontSize: '12px', color: '#fff', margin: 0, marginTop: '10px' }}>Total Recoveries</Typography.Title>
							</div>
						</Col>
					</Row>
				</div>
			</div>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchCovidStats
	}, dispatch),
	CoronaTracker = connect(mapStateToProps, mapDispatchToProps)(CoronaTrackerComponent);


export default CoronaTracker;