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 { fetchVlogs } from '@lib/redux/actions/vlogs-actions';
import { GuardSpinner } from 'react-spinners-kit';
import Paginator, { paginatorEffects } from '@components/paginator-alt';
import { Link } from 'react-router-dom';
import ReactPlayer from 'react-player';
import Share from '@components/share';
import without from 'lodash/without';
import EHA from '@components/eha';
import SHA from '@components/sha';


interface VI {
	fetchVlogs?,
	match?,
	vlogs?,
	status?
}


const VlogsComponent = ({ fetchVlogs, match, vlogs, status }: VI) => {

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

		const [activeVlog, setActiveVlog] = React.useState<Record<string, any>>({});

		React.useEffect(() => {
			setActiveVlog(vlogs?.data?.find(vg => vg?.slug == match?.params?.slug));
		}, [vlogs]);

		const
			scrollToComponent = React.createRef();

		return (
			<>
				<Helmet pageTitle={activeVlog?.title ?? 'Vlog | ' + process.env.APP_NAME} pageUrl={window.location.href} pageImg={activeVlog?.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>
											{activeVlog
												? (
													<div className='mb-50'>
														<div className='mb-20'>
															<Typography.Title level={2} style={{ fontSize: '18px', color: '#fff' }} className='font-1'>{activeVlog?.title}</Typography.Title>
															<Breadcrumb>
																<Breadcrumb.Item>
																	<span style={{ color: '#fff', fontSize: '12px' }}>{activeVlog?.date}</span>
																</Breadcrumb.Item>
																<Breadcrumb.Item>
																	<Share title={activeVlog?.title} text={activeVlog?.description}>
																		<Tag color="#3db83a">Share</Tag>
																	</Share>
																</Breadcrumb.Item>
															</Breadcrumb>
														</div>
														<ReactPlayer controls width='100%' style={{ width: '100%' }} url={activeVlog?.embed_url} />
													</div>
												)
												: null}
											<Row gutter={[16, 16]} className='home-news'>
												{without(vlogs?.data, activeVlog)?.map(vlog =>
													<Col key={vlog?.id} xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: (24 / 3) }} lg={{ span: (24 / 4) }}>
														<Link to={'/vlog/' + vlog?.slug} className='news-hol' style={{ backgroundImage: 'url(' + vlog?.picture + ')', padding: '20px 10px', minHeight: '200px', maxHeight: '200px', height: '100%' }}>
															<div>
																<Typography.Title level={2} style={{ fontSize: '14px', color: '#fff' }}>
																	{vlog?.title}
																</Typography.Title>
																<Breadcrumb>
																	<Breadcrumb.Item>
																		<span style={{ color: '#fff', fontSize: '12px' }}>{vlog?.date}</span>
																	</Breadcrumb.Item>
																</Breadcrumb>
															</div>
														</Link>
													</Col>
											)}
											</Row>
											<div className="d-flex justify-content-center align-items-center">
												<Paginator entity={vlogs} scrollToComponent={scrollToComponent} />
											</div>
										</div>
									</Col>
									<Col xs={{ span: 12 }} md={{ span: (24 - 19) }}>
										<div>
											<EHA
												localKey='heyhey'
												style={{ display: 'block' }}
												client="ca-pub-1110030198957831"
												slot="6238186276"
												width='100%'
												height='300px'
											/>
											<SHA specification={{page: 'vlog', id: 'vlog-side', code: 'vlog-side', height: '240px'}} theme='light' />
											<EHA
												localKey='wooo'
												style={{ display: 'block' }}
												client="ca-pub-1110030198957831"
												slot="6238186276"
												width='100%'
												height='300px'
											/>
										</div>
									</Col>
								</Row>
							)}
					</div>
				</section>
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchVlogs
	}, dispatch),
	Vlogs = connect(mapStateToProps, mapDispatchToProps)(VlogsComponent);


export default Vlogs;