import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Row, Col, List, Typography } from 'antd';
import EHA from '@components/eha';
import sortBy from 'lodash/sortBy';
import findIndex from 'lodash/findIndex';
import { Link } from 'react-router-dom';
import { fetchDirectories } from '@lib/redux/actions/directories-actions';



interface HI {
	status?,
	classifieds?,
	managed_content?,
	fetchManagedContent?,
	lifestyle_categories?,
	fetchLifestyleCategories?,
	directories?,
	fetchDirectories?,
	currentDistrict?
}


const
	DirectoriesComponent = ({ directories, fetchDirectories }: HI) => {

		React.useEffect(() => {
			if (!directories?.length) fetchDirectories(); // rarely change
		}, []);

		const groupedAr: {
			label: string,
			content: object[]
		}[] = [];

		/******************************SORT ALGORITHM AND DUMMY DATA FOR DIRECTORY*******************/
		directories?.map(ea => {
			const
				firstLetter = ea.name.split('')[0].toLowerCase(),
				labelIndex = findIndex(groupedAr, { label: firstLetter });

			labelIndex >= 0
				? groupedAr.splice(labelIndex, 1, { label: firstLetter, content: [...groupedAr[labelIndex].content, ea] })
				: groupedAr.push({ label: firstLetter, content: [ea] });
		});

		/******************************END OF SORT ALGORITHM AND DUMMY DATA FOR DIRECTORY*******************/

		return (
			<section className='container mb-60' style={{ marginTop: '80px' }}>
				<Row gutter={16}>
					<Col xs={{ span: 24 }} md={{ span: 18 }}>
						<List
							header={<Typography.Title style={{ fontSize: '25px' }} level={2}>Ashanti Business Resources</Typography.Title>}
							size='small'
							bordered
							grid={{}}
							dataSource={sortBy(groupedAr, o => o?.label?.toLowerCase())}
							renderItem={(item: any) => (
								<List.Item>
									<Typography.Text className='font-3' mark>[{item?.label?.toUpperCase()}]</Typography.Text>
									<List
										split={false}
										bordered={false}
										dataSource={item?.content}
										renderItem={(directory: any) =>
											<List.Item style={{ paddingTop: '3px', paddingBottom: '3px', borderBottom: 'none' }}>
												<Link className='font-3' to={'/directory/' + directory?.slug} style={{ fontSize: '16px', color: '#555' }}>
													{directory?.name}
												</Link>
											</List.Item>
										}
									/>
								</List.Item>
							)} />
					</Col>
					<Col xs={{ span: 24 }} md={{ span: 6 }}>
						<EHA
							localKey='lp'
							style={{ display: 'block' }}
							client="ca-pub-1110030198957831"
							slot="6238186276"
							width='100%'
							height='490px'
						/>
						<EHA
							localKey='mjmj'
							style={{ display: 'block' }}
							format="link"
							client="ca-pub-1110030198957831"
							slot="7850473230"
							width='100%'
							height='350px'
						/>
					</Col>
				</Row>
			</section>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchDirectories
	}, dispatch),
	Directories = connect(mapStateToProps, mapDispatchToProps)(DirectoriesComponent);


export default Directories;