import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchLifestyleCategories } from '@lib/redux/actions/lifestyles-actions';
import { fetchDistricts } from '@lib/redux/actions/districts-actions';

import { Link } from 'react-router-dom';
import { Row, Col, Typography, Breadcrumb } from 'antd';
import Helmet from '@lib/helmet';
import lifestyleHeader from '@assets/images/page-header.png';
import Foot from '@components/foot';
import { SwapSpinner } from 'react-spinners-kit';
import lifestyleHeadIcon from '@assets/images/lifestyle-head-icon.png';
import SHA from '@components/sha';

// districts
// district_lifestyle -> has district, lifestyles





interface LI {
	status?,
	lifestyle_categories?,
	fetchLifestyleCategories?
}


const
	LifestylesComponent = ({ status, lifestyle_categories, fetchLifestyleCategories }: LI) => {
		React.useEffect(() => {
			fetchLifestyleCategories();
		}, []);

		return (
			<>
				<Helmet pageTitle={process.env.APP_NAME + ' | Ashanti Lifestyle'} pageUrl={'/lifestyle'} />

				<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 page-header-row">
							<div>
								<Breadcrumb>
									<Breadcrumb.Item>
										<Link style={{color: '#fff'}} to='/'>Home /</Link>
									</Breadcrumb.Item>
								</Breadcrumb>
								<Typography.Title className='mt-10' level={1} style={{ fontSize: '21px', color: '#fff' }}>
								Ashanti Lifestyle
								</Typography.Title>
							</div>
							<div className='page-header-sha'>
								<SHA showLoadingIndicator={false} imageHeight='120px' hideLabel imageOnly specification={{ page: 'lifestyles', id: 'lifestyles-1', code: 'lifestyles-top-page' }} />
							</div>
							<img src={lifestyleHeadIcon} className='page-header-img' style={{height: '210px', margin: '0 0 0 auto'}} />
						</div>
						{ /* <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>
								<Typography.Title className='mt-20' level={1} style={{ fontSize: '21px', color: '#fff' }}>
							Ashanti Lifestyle
								</Typography.Title>
							</div>
							<img src={lifestyleHeadIcon} className='page-header-img' style={{height: '210px', margin: '0 0 0 auto'}} />
						</div> */ }
					</div>
					<div className="container">
						{status?.lifestyle_categories?.fetching
							? (
								<div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '200px'}}>
									<SwapSpinner color='#00ff89' />
								</div>
							): (
								<Row className='pt-50' gutter={[16, 16]}>
									{lifestyle_categories?.map(itn =>
										<Col className='mb-30' key={itn?.id} xs={{ span: 24 }} md={{ span: (24 / 4) }}>
											<Link style={{display: 'block'}} to={'/lifestyle/' + itn?.slug}>
												<div className='mb-10'>
													<img src={itn?.picture} alt={itn?.name} style={{ width: '100%', height: '180px' }} />
												</div>
												<Typography.Title className='mb-20 clr1 text-center' level={2} style={{ fontSize: '16px' }}>
													<Link to={'/lifestyle/' + itn?.slug} className='clr-1-important'>{itn?.name}</Link>
												</Typography.Title>

												<Typography.Paragraph className='text-center' ellipsis={{ rows: 3, expandable: true, symbol: 'more' }}>
													{itn?.short_description}
												</Typography.Paragraph>
											</Link>
										</Col>
							)}
								</Row>
							)}
					</div>
				</section>
				<Foot />
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchLifestyleCategories, fetchDistricts
	}, dispatch),
	Lifestyles = connect(mapStateToProps, mapDispatchToProps)(LifestylesComponent);

export default Lifestyles;









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