import React from 'react';
import { Link } from 'react-router-dom';
import { List } from 'antd';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchDistricts } from '@lib/redux/actions/districts-actions';
import logo from '@assets/images/logo.png';
import chunk from 'lodash/chunk';
import { InstallButton } from '@modules/installation-prompt';


const
	FootComponent = ({ status, districts, fetchDistricts }: Record<string, any>) => {

		const [districtChunks, setDistrictChunks] = React.useState([]);

		React.useEffect(() => {
			if (!districts?.length || status?.districts?.fetching) fetchDistricts();
		}, []);

		React.useEffect(() => {
			setDistrictChunks(chunk(districts, Math.ceil(districts?.length / 4)));
		}, [districts]);

		return (
			<footer className="footer-area" style={{zIndex: 200, position: 'relative'}}>
				<div className="footer-top pt-15 pb-15">
					<div className="container">
						<div className="row align-items-center justify-content-between">
							<div className="col-xl-4 col-lg-5 col-md-6">
								<div>
									<InstallButton>
										<button className='install-button'>Get The App</button>
									</InstallButton>
								</div>
							</div>
							<div className="col-xl-4 col-lg-5 col-md-6">
								<div className="footer-follow d-flex align-items-center justify-content-center mt-25">
									<h5 className="title">Follow Us</h5>
									<ul className="social">
										<li><a href="https://web.facebook.com/ashantiwebnews" target='_blank' rel='noreferrer nofollow'><i className="fab fa-facebook-f"></i></a></li>
										<li><a href="https://twitter.com/ASHANTIWEB_MAIN" target='_blank' rel='noreferrer nofollow'><i className="fab fa-twitter"></i></a></li>
										<li><a href="https://www.instagram.com/ashantiweb/" target='_blank' rel='noreferrer nofollow'><i className="fab fa-instagram"></i></a></li>
										<li><a href="https://www.youtube.com/channel/UCiGRK-26YBUH-EoU0UHXUYQ" target='_blank' rel='noreferrer nofollow'><i className="fab fa-youtube"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div className="footer-widget pt-15 pb-15">
					<div className="container">
						<div className="row">
							<div className="col-lg-6">
								<div className="footer-link mt-10 row">
									<div className="col-6 col-md-3">
										<h4 className="footer-title">Districts</h4>
										<ul className="link">
											{districtChunks[0]?.map(ds =>
												<li key={ds?.id}>
													<a href={'//' + ds?.slug + '.' + process.env.APP_HOST+'/ads'}>{ds?.name}</a>
													{ /* <a href='#'>{ds?.name}</a> */ }
												</li>
											)}
										</ul>
									</div>
									<div className="col-6 col-md-3">
										<h4 className="footer-title" style={{ opacity: 0 }}>D</h4>
										<ul className="link">
											{districtChunks[1]?.map(ds =>
												<li key={ds?.id}>
													<a href={'//' + ds?.slug + '.' + process.env.APP_HOST+'/ads'}>{ds?.name}</a>
													{ /* <a href='#'>{ds?.name}</a> */ }
												</li>
											)}
										</ul>
									</div>
									<div className="col-6 col-md-3">
										<h4 className="footer-title" style={{ opacity: 0 }}>D</h4>
										<ul className="link">
											{districtChunks[2]?.map(ds =>
												<li key={ds?.id}>
													<a href={'//' + ds?.slug + '.' + process.env.APP_HOST+'/ads'}>{ds?.name}</a>
													{ /* <a href='#'>{ds?.name}</a> */ }
												</li>
											)}
										</ul>
									</div>
									<div className="col-6 col-md-3">
										<h4 className="footer-title" style={{ opacity: 0 }}>D</h4>
										<ul className="link">
											{districtChunks[3]?.map(ds =>
												<li key={ds?.id}>
													<a href={'//' + ds?.slug + '.' + process.env.APP_HOST+'/ads'}>{ds?.name}</a>
													{ /* <a href='#'>{ds?.name}</a> */ }
												</li>
											)}
										</ul>
									</div>
								</div>
							</div>
							<div className="col-lg-4 col-sm-4">
								<div className="footer-link mt-10 row">
									<div className="col-md-6 col-6">
										<h4 className="footer-title">Quick Links</h4>
										<ul className="link">
											<li><a href="/ads">All Ads</a></li>
											<li><a href="/shops">Registered Shops</a></li>
											<li><Link to="/rankings">Ashanti Rankings</Link></li>
											<li><Link to="/privacy-policy">Privacy Policy</Link></li>
											<li><Link to="/terms-and-conditions">Terms and Conditions</Link></li>
										</ul>
									</div>
									<div className="col-md-6 col-6">
										<h4 className="footer-title" style={{ opacity: 0 }}>Quick Links</h4>
										<ul className="link">
											<li><Link to="/ashantis-abroad">Ashantis Abroad</Link></li>
											<li><Link to="/directory">Directory</Link></li>
											<li><Link to='/vlog'>Vlog</Link></li>
											<li><Link to={'//' + process.env.NEWS_PORTAL_DOMAIN}>Portal</Link></li>
											<li><Link to="/disclaimer">Disclaimer</Link></li>
										</ul>
									</div>
								</div>
							</div>
							<div className="col-lg-2 col-sm-8">
								<div className="footer-contact mt-10">
									<h4 className="footer-title">Communication</h4>
									<div className="single-contact d-flex align-items-center mt-25">
										<div className="contact-icon">
											<i className="fal fa-phone"></i>
										</div>
										<div className="contact-content media-body">
											<p>Call Us <br /> <a className='text-white' href={'tel:' + process.env.APP_CONTACT_NUMBER}>{process.env.APP_CONTACT_NUMBER}</a></p>
										</div>
									</div>
									<div className="single-contact d-flex align-items-center mt-25">
										<div className="contact-icon">
											<i className="fal fa-envelope-open-text"></i>
										</div>
										<div className="contact-content media-body">
											<p>Send Message <br /> <a className='text-white' href={'mailto:' + process.env.APP_COMMON_MAIL_ADDRESS}>{process.env.APP_COMMON_MAIL_ADDRESS}</a></p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div className="footer-copyright-text pt-10 pb-10">
					<div className="container">
						<div className="footer-copyright-text-wrapper text-center d-md-flex align-items-center justify-content-between">
							<div className="footer-copyright mt-15">
								{ /* <p style={{ fontSize: '12px' }}>Copyright &copy; {new Date().getFullYear()} | A-Mole Projects. A product of <a href="https://nativetemple.net">nativetemple.net</a></p> */ }
								<p style={{ fontSize: '12px' }}>Copyright &copy; {new Date().getFullYear()} | {process.env.APP_NAME}</p>
							</div>
							<div className="footer-text mt-15">
								<ul className="link">
									{ /* <li><a href="#">Privacy</a></li>
									<li><a href="#">Terms & Conditions</a></li> */ }
									<li><Link to="/news">News</Link></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</footer>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchDistricts
	}, dispatch),
	Foot = connect(mapStateToProps, mapDispatchToProps)(FootComponent);


export default Foot;