import React from 'react';
import { fetchRankingsTaCat } from '@lib/redux/actions/rankings-actions.ts';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { List, Button, Row, Col, PageHeader, Divider, Tag } from 'antd';
import { ShareAltOutlined } from '@ant-design/icons';
import Paginator, { paginatorEffects } from '@components/paginator-alt';
import Share from '@components/share';
import { Link } from 'react-router-dom';
import { FullScreenLoader } from '@components/loader';
import head from 'lodash/head';
import slice from 'lodash/slice';
import { Route } from 'antd/lib/breadcrumb/Breadcrumb';
import Helmet from '@lib/helmet';

interface RtKInterface {
	status,
	fetchRankingsTaCat,
	rankings_ta_cat: {
		name: string,
		slug: string,
		description: string,
		rankings: {
			data: Record<string, any>[]
		}
	},
	match
}

const
	RankingsTaCatComponent = ({ status, fetchRankingsTaCat, rankings_ta_cat, match }: RtKInterface) => {
		React.useEffect(() => {
			if (window.location.pathname.split('/')[2] == 'c') {
				fetchRankingsTaCat(match.params.slug, 'category');
			} else if (window.location.pathname.split('/')[2] == 't') {
				fetchRankingsTaCat(match.params.slug, 'tag');
			}
		}, [match.params.slug, ...paginatorEffects()]);


		const routes: Route[] = [
			{
				path: '/',
				breadcrumbName: 'Home'
			},
			{
				path: '/rankings',
				breadcrumbName: 'Rankings'
			},
			{
				path: '',
				breadcrumbName: ''
			}
		];

		return (
			<>
				<Helmet pageTitle={rankings_ta_cat?.name + ' | ' + process.env.APP_NAME} pageUrl={'/rankings/c/' + rankings_ta_cat?.slug} />
				<section className="blog-area pt-50 pb-50" style={{ minHeight: 'calc(100vh - 54px)', marginTop: '54px' }}>
					<div className="container">
						{status?.rankings_ta_cat?.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={rankings_ta_cat?.name}
										style={{ marginTop: '50px', border: '1px solid rgb(235, 237, 240)' }}
										breadcrumb={{ routes }}
									/>

									<Row style={{ marginTop: '50px' }} gutter={[16, 16]}>
										<Col xs={{ span: 24 }} md={{ span: 18 }}>
											<div className='first_ranking_by_category'>
												<Link to={'/rankings/' + head(rankings_ta_cat?.rankings?.data)?.slug} className='view overlay zoom w-100'>
													<img
														src={head(rankings_ta_cat?.rankings?.data)?.picture}
														alt={head(rankings_ta_cat?.rankings?.data)?.title}
														style={{ width: '100%', maxHeight: '450px' }} />
												</Link>
												<div className="text-center mt-20 pl-1 pr-1">
													<span>{head(rankings_ta_cat?.rankings?.data)?.date} by {head(rankings_ta_cat?.rankings?.data)?.author?.name}</span>
													<h2 style={{ fontSize: '23px' }} className='font-3'>
														<Link className='text-dark' to={'/rankings/' + head(rankings_ta_cat?.rankings?.data)?.slug}>
															{head(rankings_ta_cat?.rankings?.data)?.title}
														</Link>
													</h2>
													<p className='font-3' style={{ color: '#444' }}>{head(rankings_ta_cat?.rankings?.data)?.short_description}</p>
													<Tag
														color={head(rankings_ta_cat?.rankings?.data)?.tags[0]?.color}>
														{head(rankings_ta_cat?.rankings?.data)?.tags[0]?.name}
													</Tag>
												</div>
											</div>
											<Divider />

											<Row>
												{slice(rankings_ta_cat?.rankings?.data, 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(rankings_ta_cat?.rankings?.data, 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(rankings_ta_cat?.rankings?.data, 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>

									<Divider />

									<List
										itemLayout="vertical"
										size="large"
										dataSource={slice(rankings_ta_cat?.rankings?.data, 7)}
										footer={
											<div>
												<b>Ashanti Rankings</b>
												&nbsp;|&nbsp;
												{rankings_ta_cat?.name}
												&nbsp;|&nbsp;
												<Share
													title={rankings_ta_cat?.name}
													text={rankings_ta_cat?.description}>
													<Button type='text' icon={<ShareAltOutlined />}>Share</Button>
												</Share>

											</div>
										}
										renderItem={(item: Record<string, any>) => (
											<List.Item
												key={item?.id}
												actions={[
													<Share
														key='share'
														title={item?.title}
														text={item?.short_description}
														url={'/rankings/' + item?.slug}>
														<Button type='text' icon={<ShareAltOutlined />}>Share</Button>
													</Share>,
												]}
												extra={
													<Link className='text-dark' to={'/rankings/' + item?.slug}>
														<img
															width={272}
															alt={item?.title}
															src={item?.picture}
														/>
													</Link>
												}
											>
												<List.Item.Meta
													title={
														<h2 className='font-3' style={{ fontSize: '21px' }}>
															<Link className='text-dark' to={'/rankings/' + item?.slug}>{item?.title}</Link>
														</h2>
													}
												/>
												<p className='text-dark'>{item?.short_description}</p>
												<small>By <strong>{item?.author?.name}</strong> on <strong>{item?.date}</strong></small>
											</List.Item>
										)}
									/>
									<div className="d-flex justify-content-center">
										<Paginator entity={rankings_ta_cat?.rankings} />
									</div>
								</>
							)}
					</div>
				</section>
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchRankingsTaCat
	}, dispatch),
	RankingsTaCat = connect(mapStateToProps, mapDispatchToProps)(RankingsTaCatComponent);



export default RankingsTaCat;