import React from 'react';
import { fetchRanking } from '@lib/redux/actions/rankings-actions.ts';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Share from '@components/share';
import { FullScreenLoader } from '@components/loader';
import { Typography, Avatar, Col, Row, Divider } from 'antd';
import Helmet from '@lib/helmet';


interface RI {
	status?,
	fetchRanking?,
	ranking?,
	match?
}


const
	RankingComponent = ({ status, fetchRanking, ranking, match }: RI) => {
		React.useEffect(() => {
			fetchRanking(match.params.slug);
		}, [match.params.slug]);

		return (
			<>
				<Helmet pageTitle={ranking?.title} pageDescription={ranking?.short_description} pageImg={ranking?.picture} pageUrl={'/rankings/' + ranking?.slug} />
				<section style={{ minHeight: 'calc(100vh - 54px)', marginTop: '54px' }}>

					<div className="container pt-50 pb-100">

						{status?.ranking?.fetching
							? (<FullScreenLoader visible={true} />)
							: (
								<>
									<div className='text-center'>
										<Typography.Title level={1} className='mb-10 font-3'>
											{ranking?.title}
										</Typography.Title>
										<Share title={ranking?.title} text={ranking?.short_description} />
										<img className='mt-20' src={ranking?.picture} alt={ranking?.title} style={{ width: '100%' }} />
									</div>

									<div className='mt-30 text-justify'>
										<Row gutter={16}>
											<Col span={80}>
												<Avatar src={ranking?.author?.picture} size={80} />
											</Col>
											<Col flex={'auto'}>
												<div style={{ maxWidth: '100%' }}>
													<Typography.Title level={3} style={{ fontSize: '16px' }}>
														<a style={{ color: '#888' }} href={'/users/' + ranking?.author?.username}>{ranking?.author?.name}</a>
													</Typography.Title>
													<Typography.Paragraph ellipsis={{ rows: 1, expandable: false }}>
														{ranking?.author?.description?.length > 50 ? ranking?.author?.description?.substr(0, 50) + '...' : ranking?.author?.description}
													</Typography.Paragraph>
												</div>
											</Col>
										</Row>
									</div>
									<Divider style={{ borderTop: 'green' }} />


									<div className="mt-30" dangerouslySetInnerHTML={{ __html: ranking?.content}}></div>

								</>
							)}

					</div>



				</section>
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchRanking
	}, dispatch),
	Ranking = connect(mapStateToProps, mapDispatchToProps)(RankingComponent);



export default Ranking;