import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Helmet from '@lib/helmet';
import { Row, Col, Breadcrumb, Typography, Tag } from 'antd';
import { fetchHuman } from '@lib/redux/actions/humans-actions';
import { GuardSpinner } from 'react-spinners-kit';
import { Link } from 'react-router-dom';
import ReactPlayer from 'react-player';
import Share from '@components/share';


interface VI {
	fetchHuman?,
	match?,
	human?,
	status?,
}


const HumanComponent = ({ fetchHuman, match, human, status }: VI) => {

		React.useEffect(() => {
			fetchHuman(match?.params?.slug);
		}, [match?.params?.slug]);



		return (
			<>
				<Helmet pageTitle={human?.name ?? 'Humans of Ashanti | ' + process.env.APP_NAME} pageDescription={human?.description} pageUrl={window.location.href} pageImg={human?.picture} />

				<section className="pt-120" style={{ background: '#202127', minHeight: '100vh', height: '100%' }}>
					<div className="container">
						{status?.vlogs?.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>
											<div className='mb-50'>
												<div className='mb-20'>
													<Typography.Title level={2} style={{ fontSize: '18px', color: '#fff' }} className='font-1'>{human?.name}</Typography.Title>
													<Breadcrumb>
														<Breadcrumb.Item>
															<span style={{ color: '#fff', fontSize: '12px' }}>{human?.date}</span>
														</Breadcrumb.Item>
														<Breadcrumb.Item>
															<Share title={human?.name} text={human?.description}>
																<Tag color="#3db83a">Share</Tag>
															</Share>
														</Breadcrumb.Item>
													</Breadcrumb>
												</div>
												<ReactPlayer controls width='100%' style={{ width: '100%' }} url={human?.embed_url} />
												<div className="mt-20 text-white" dangerouslySetInnerHTML={{ __html: human?.content}}></div>
											</div>
											<Row gutter={[16, 16]} className='home-news'>
												{human?.other_humans?.map(human =>
													<Col key={human?.id} xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: (24 / 3) }} lg={{ span: (24 / 4) }}>
														<Link to={'/vlog/' + 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>
									</Col>
									<Col xs={{ span: 12 }} md={{ span: (24 - 19) }}>

									</Col>
								</Row>
							)}
					</div>
				</section>
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchHuman
	}, dispatch),
	Human = connect(mapStateToProps, mapDispatchToProps)(HumanComponent);


export default Human;