import React from 'react';
import { fetchRankings } from '@lib/redux/actions/rankings-actions.ts';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Row, Col, PageHeader, Divider, Tag } from 'antd';
import { CaretRightOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { FullScreenLoader } from '@components/loader';
import head from 'lodash/head';
import slice from 'lodash/slice';
import Helmet from '@lib/helmet';


interface RI {
	status?,
	fetchRankings?,
	rankings_categories?
}


const
	RankingsComponent = ({ status, fetchRankings, rankings_categories }: RI) => {
		React.useEffect(() => {
			fetchRankings();
		}, []);


		return (
			<>
				<Helmet pageTitle={process.env.APP_NAME + ' | Ashanti Rankings'} pageUrl={'/rankings'} />
				<section className="blog-area pt-50 pb-50" style={{ minHeight: 'calc(100vh - 54px)', marginTop: '54px' }}>
					<div className="container">
						{status?.rankings_categories?.fetching
							? (<FullScreenLoader visible={true} />)
							: (
								<>
									<div style={{
										background: '#ccc',
										display: 'flex',
										justifyContent: 'center',
										alignItems: 'center',
										width: '100%',
										height: '100px'
									}}>ADVERTISEMENT</div>
									<PageHeader
										className="site-page-header"
										title="Ashanti Rankings"
										style={{ marginTop: '50px', border: '1px solid rgb(235, 237, 240)' }}
									/>
									{rankings_categories?.map(rc =>
										<Row style={{ marginTop: '50px' }} key={rc?.id} gutter={[16, 16]}>
											<Col span={24}>
												<div className='mb-10'>
													<PageHeader
														className="site-page-header"
														title={
															<Link className="text-dark" to={'/rankings/c/' + rc?.slug}>{rc?.name}</Link>
														}
														subTitle={
															<Link className="text-dark" to={'/rankings/c/' + rc?.slug}>View more <CaretRightOutlined /></Link>
														}
														style={{ borderTop: '3px solid green', borderBottom: '1px solid green' }} />
												</div>
											</Col>
											<Col xs={{ span: 24 }} md={{ span: 18 }}>
												<div className='first_ranking_by_category'>
													<Link to={'/rankings/' + head(rc?.rankings)?.slug} className='view overlay zoom w-100'>
														<img
															src={head(rc?.rankings)?.picture}
															alt={head(rc?.rankings)?.title}
															style={{ width: '100%', maxHeight: '450px' }} />
													</Link>
													<div className="text-center mt-20 pl-1 pr-1">
														<span>{head(rc?.rankings)?.date} by {head(rc?.rankings)?.author?.name}</span>
														<h2 className='font-3' style={{ fontSize: '23px' }}>
															<Link className='text-dark' to={'/rankings/' + head(rc?.rankings)?.slug}>
																{head(rc?.rankings)?.title}
															</Link>
														</h2>
														<p className='font-3' style={{ color: '#444' }}>{head(rc?.rankings)?.short_description}</p>
														<Tag
															color={head(rc?.rankings)?.tags[0]?.color}>
															{head(rc?.rankings)?.tags[0]?.name}
														</Tag>
													</div>
												</div>
												<Divider />

												<Row>
													{slice(rc?.rankings, 1, 5)?.map(rk =>
														<Col key={rk?.id} xs={{ span: 24 }} md={{ span: 12 }}>
															<Link to={'rankings/' + rk?.slug} className="d-flex">
																<div style={{ flexBasis: '80px', padding: '10px' }}>
																	<img src={rk?.picture} alt={rk?.title} style={{ width: '100%', maxHeight: '90px' }} />
																</div>
																<div style={{ flexBasis: 'calc(100% - 80px)', padding: '10px' }}>
																	<div>
																		<h2 className='font-3' style={{ fontSize: '17px' }}>{rk?.title}</h2>
																		<span>{rk?.date} by {rk?.author?.name}</span>
																	</div>
																</div>
															</Link>
														</Col>
													)}
												</Row>
											</Col>
											<Col xs={{ span: 24 }} md={{ span: 6 }}>
												{slice(rc?.rankings, 5, 7)?.map(rk =>
													<div className='mt-10' key={rk?.id}>
														<Link to={'rankings/' + rk?.slug}>
															<div className='view overlay zoom w-100'>
																<img src={rk?.picture} alt={rk?.title} style={{ width: '100%', height: '270px' }} />
															</div>
															<span>{rk?.date} by {rk?.author?.name}</span>
															<h2 className='font-3' style={{ fontSize: '21px' }}>{rk?.title}</h2>
														</Link>
													</div>
												)}
												{Array.from(Array(2 - slice(rc?.rankings, 5, 7)?.length), (e, i) =>
													<div className='mt-10' key={i} style={{
														background: '#ccc',
														display: 'flex',
														justifyContent: 'center',
														alignItems: 'center',
														width: '100%',
														height: '300px'
													}}>ADVERTISEMENT</div>
												)}
											</Col>
										</Row>
									)}
								</>
							)}
					</div>
				</section>
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchRankings
	}, dispatch),
	Rankings = connect(mapStateToProps, mapDispatchToProps)(RankingsComponent);



export default Rankings;

// <div className="container">
// 	<List
// 		loading={status?.rankings?.fetching}
// 		itemLayout="vertical"
// 		size="large"
// 		dataSource={rankings?.data}
// 		footer={
// 			<div>
// 				<b>Ashanti Rankings</b> <Share title='Ashanti Rankings' text='Find best rankings for all Ashanti content' />
// 			</div>
// 		}
// 		renderItem={item => (
// 			<List.Item
// 				key={item?.title}
// 				actions={[
// 					<Share
// 						key={1}
// 						title={item?.title}
// 						text={item?.short_description}
// 						url={'/rankings/' + item?.slug}
// 						>
// 						<Button type='text'>
// 							Share
// 							<ShareAltOutlined />
// 						</Button>
// 					</Share>
// 				]}
// 				>
// 				<Row>
// 					<Col span={18}>
// 						<h1 style={{ fontSize: '22px', margin: '15px' }}>
// 							<Link to={'/rankings/' + item?.slug}>{item?.title}</Link>
// 						</h1>
// 						<Typography.Paragraph ellipsis={{ rows: 1, expandable: false }}>
// 							{item?.short_description}
// 						</Typography.Paragraph>
// 					</Col>
// 					<Col span={6}>
// 						<img
// 							style={{ width: '100%', maxHeight: '230px' }}
// 							src={item?.picture}
// 							alt={item?.title}
// 							/>
// 					</Col>
// 				</Row>
// 			</List.Item>
// 		)}
// 		/>
// 	<div className='d-flex justify-content-center'>
// 		<Paginator entity={rankings} />
// 	</div>
// </div>