import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { fetchLifestyles } from '@lib/redux/actions/lifestyles-actions';
import { FullScreenLoader } from '@components/loader';
import { Row, Col, Typography, Breadcrumb } from 'antd';
import Helmet from '@lib/helmet';
import first from 'lodash/first';
import lifestyleHeader from '@assets/images/page-header.png';
import lifestyleHeadIcon from '@assets/images/lifestyle-head-icon.png';



interface LCI {
	status?,
	lifestyles?,
	fetchLifestyles?,
	match?
}


const
	LifestyleCategoryComponent = ({ status, lifestyles, fetchLifestyles, match }: LCI) => {
		React.useEffect(() => {
			fetchLifestyles(match.params.category_slug);
		}, [match.params.category_slug]);

		return (
			<>
				<Helmet pageTitle={process.env.APP_NAME + ' | ' + first(lifestyles)?.category?.name} pageImg={first(lifestyles)?.category?.picture} pageUrl={'/lifestyle/' + first(lifestyles)?.category?.slug} />
				{!status?.error
					? status?.lifestyles?.fetching
						? (<FullScreenLoader visible />)
						: (
							<section className="blog-area">
								<div style={{ background: '#333', position: 'relative', marginTop: '54px', height: '240px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
									<img src={lifestyleHeader} style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1}} />
									<div className="container" style={{ zIndex: 2, position: 'relative', height: '240px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
										<div>
											<Breadcrumb>
												<Breadcrumb.Item>
													<Link style={{color: '#fff'}} to='/'>Home</Link>
												</Breadcrumb.Item>
												<Breadcrumb.Item>
													<Link style={{color: '#fff'}} to='/lifestyle'>Ashanti Lifestyle</Link>
												</Breadcrumb.Item>
											</Breadcrumb>
											<Typography.Title className='mt-20' level={1} style={{ fontSize: '21px', color: '#fff' }}>
												{first(lifestyles)?.category?.name}
											</Typography.Title>
										</div>
										<img src={lifestyleHeadIcon} className='page-header-img' style={{height: '210px', margin: '0 0 0 auto'}} />
									</div>
								</div>
								<div className="container">
									<Row className='pt-50' gutter={[16, 16]}>
										{lifestyles?.map(itn =>
											<Col className='mb-30' key={itn?.id} xs={{ span: 24 }} md={{ span: (24 / 3) }}>
												<div>
													<div className='mb-10 view overlay zoom'>
														<img src={first(itn?.media)?.original_image ?? first(itn?.media)?.placeholder_image} alt={itn?.name} style={{ width: '100%', height: '220px' }} />
													</div>
													<Typography.Title className='mb-20' level={2} style={{ fontSize: '16px' }}>
														<Link to={'/lifestyle/' + match.params.category_slug + '/' + itn?.slug} style={{ color: '#333' }}>{itn?.name}</Link>
													</Typography.Title>

													<Typography.Paragraph ellipsis={{ rows: 3, expandable: true, symbol: 'more' }}>
														{itn?.short_description}
													</Typography.Paragraph>
												</div>
											</Col>
										)}
									</Row>
								</div>
							</section>
						)
					: null}
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchLifestyles
	}, dispatch),
	LifestyleCategory = connect(mapStateToProps, mapDispatchToProps)(LifestyleCategoryComponent);

export default LifestyleCategory;










// <div className='container' style={{marginTop: '55px', minHeight: 'calc(100vh - 55px)'}}>
// 	{status?.error
// 		? (<></>)
// 		: status?.lifestyles?.fetching
// 		? (<FullScreenLoader visible={status?.lifestyles?.fetching} />)
// 		: lifestyles?.map(lc =>
// 			<div key={lc?.id} className="responsive">
// 				<div className="gallery">
// 					<Link to={'/lifestyle/'+match.params.category_slug+'/'+lc?.slug}>
// 						<img src={lc?.picture} alt={lc?.name} width="600" height="400" />
// 					</Link>
// 					<div className="desc">{lc?.name}</div>
// 				</div>
// 			</div>
// 		)}
// 	</div>