import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Helmet from '@lib/helmet';
import { Row, Col, Breadcrumb, Typography } from 'antd';
import { fetchHumans } from '@lib/redux/actions/humans-actions';
import { GuardSpinner } from 'react-spinners-kit';
import Paginator, { paginatorEffects } from '@components/paginator-alt';
import { Link } from 'react-router-dom';


interface VI {
	fetchHumans?,
	humans?,
	status?
}


const HumansComponent = ({ fetchHumans, humans, status }: VI) => {

		React.useEffect(() => {
			fetchHumans();
		}, [...paginatorEffects()]);

		const
			scrollToComponent = React.createRef();

		return (
			<>
				<Helmet pageTitle={'Humans of Ashanti | ' + process.env.APP_NAME} pageUrl={window.location.href} />

				<section className="pt-120" style={{ background: '#202127', minHeight: '100vh', height: '100%' }}>
					<div className="container">
						{status?.humans?.fetching
							? (
								<div style={{ minHeight: '100vh', width: '100%' }} className='d-flex justify-content-center align-items-center'>
									<GuardSpinner loading />
								</div>
							)
							: (
								<Row gutter={[16, 16]}>
									<Col sm={{ span: 24 }} md={{ span: 19 }}>
										<div>
											<Row gutter={[16, 16]} className='home-news'>
												{humans?.data?.map(human =>
													<Col key={human?.id} xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: (24 / 3) }} lg={{ span: (24 / 4) }}>
														<Link to={'/humans-of-ashanti/' + human?.slug} className='news-hol' style={{ backgroundImage: 'url(' + human?.picture + ')', padding: '20px 10px', minHeight: '200px', maxHeight: '200px', height: '100%' }}>
															<div>
																<Typography.Title level={2} style={{ fontSize: '14px', color: '#fff' }}>
																	{human?.name}
																</Typography.Title>
																<Breadcrumb>
																	<Breadcrumb.Item>
																		<span style={{ color: '#fff', fontSize: '12px' }}>{human?.date}</span>
																	</Breadcrumb.Item>
																</Breadcrumb>
															</div>
														</Link>
													</Col>
											)}
											</Row>
											<div className="d-flex justify-content-center align-items-center">
												<Paginator entity={humans} scrollToComponent={scrollToComponent} />
											</div>
										</div>
									</Col>
									<Col xs={{ span: 12 }} md={{ span: (24 - 19) }}>

									</Col>
								</Row>
							)}
					</div>
				</section>
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchHumans
	}, dispatch),
	Humans = connect(mapStateToProps, mapDispatchToProps)(HumansComponent);


export default Humans;