import React, { FunctionComponent } from 'react';
import { Link } from 'react-router-dom';
import { bindActionCreators } from 'redux';
import ContentLoader from 'react-content-loader';

import { fetchClassifieds } from '@lib/redux/actions/classifieds-actions';
import { connect } from 'react-redux';
import { Typography, Avatar, Menu, Dropdown, Button, Col, Row, Card, Breadcrumb } from 'antd';
import Helmet from '@lib/helmet';
import classifiedsHeader from '@assets/images/page-header.png';
import Foot from '@components/foot';
import classifiedsHeadIcon from '@assets/images/classifieds-head-icon.png';
import SHA from '@components/sha';




const
	Component: FunctionComponent = ({ classifieds = [], status, fetchClassifieds }: { [propName: string]: any }) => {
		React.useEffect(() => {
			fetchClassifieds(null, {
				queryParams: {
					include: 'subclassifieds.'.repeat(8).slice(0, -1),
				}
			});
		}, []);

		return (
			<>
				<Helmet pageTitle={process.env.APP_NAME + ' | Classifieds'} pageUrl={'/classifieds'} />
				<div style={{ background: '#333', position: 'relative', marginTop: '54px', height: '240px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
					<img src={classifiedsHeader} 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 Classifieds
							</Typography.Title>
						</div>
						<div className='page-header-sha'>
							<SHA showLoadingIndicator={false} imageHeight='120px' hideLabel imageOnly specification={{ page: 'classifieds', id: 'classifieds-1', code: 'classifieds-top-page' }} />
						</div>
						<img src={classifiedsHeadIcon} className='page-header-img' style={{height: '210px', margin: '0 0 0 auto'}} />
					</div>
				</div>
				{ /*				<section className="page-banner" style={{height: '250px'}}>
					<div className="container">
						<div className="page-banner-content text-center">
							<h4 className="title">Classifieds</h4>
							<p>Search from over 2000+ Active Ads in 29+ Classifieds for Free</p>
						</div>
					</div>
				</section> */ }


				<section className="category-area pt-115 pb-120">
					<div className="container">
						<div className="row justify-content-center">
							<div className="col-lg-7">
								<div className="category-title text-center pb-25">
									<h4 className="title">Buy And Sell Everything From Our Top Classifieds; Property, Jobs And More</h4>
								</div>
							</div>
						</div>
						<Row gutter={[16, 16]}>
							{status?.classifieds?.fetching
								? (
									<>
										<div className="col-lg-3 col-sm-6">
											<ContentLoader viewBox="0 0 380 800">
												<rect x="0" y="30" rx="10" ry="10" width="370" height="250" />
												<rect x="0" y="290" rx="10" ry="10" width="370" height="500" />
											</ContentLoader>
										</div>
										<div className="col-lg-3 col-sm-6">
											<ContentLoader viewBox="0 0 380 800">
												<rect x="0" y="30" rx="10" ry="10" width="370" height="250" />
												<rect x="0" y="290" rx="10" ry="10" width="370" height="500" />
											</ContentLoader>
										</div>
										<div className="col-lg-3 col-sm-6">
											<ContentLoader viewBox="0 0 380 800">
												<rect x="0" y="30" rx="10" ry="10" width="370" height="235" />
												<rect x="0" y="275" rx="10" ry="10" width="370" height="500" />
											</ContentLoader>
										</div>
										<div className="col-lg-3 col-sm-6">
											<ContentLoader viewBox="0 0 380 800">
												<rect x="0" y="30" rx="10" ry="10" width="370" height="250" />
												<rect x="0" y="290" rx="10" ry="10" width="370" height="500" />
											</ContentLoader>
										</div>
									</>
								)
								: classifieds?.filter(cl => !cl?.classified_id)?.map(cl => (
									<Col key={cl.id} xs={{ span: '24' }} md={{ span: '6' }} className="text-center">
										<Card>
											<Avatar shape="square" size={64} src={cl.picture} />
											<br />
											<Typography.Link href={'/' + cl.slug} strong>
												{cl.name}
											</Typography.Link>
											<br />
											<Typography.Paragraph ellipsis={{ rows: 3, expandable: true, symbol: 'expand' }}>
												{cl.description}
											</Typography.Paragraph>
											<Dropdown overlay={
												<Menu>
													{cl?.subclassifieds?.map(sc =>
														<Menu.Item key={sc.id}>
															<Link to={'/' + sc.slug}>{sc.name}</Link>
														</Menu.Item>
													)}
												</Menu>
											}>
												<Button type='ghost'>View SubClassifieds</Button>
											</Dropdown>
										</Card>
									</Col>
								))}
						</Row>
					</div>
				</section>
				<Foot />
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchClassifieds
	}, dispatch),
	Classifieds = connect(mapStateToProps, mapDispatchToProps)(Component);



export default Classifieds;