import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { TreeSelect } from 'antd';
import { fetchClassifieds } from '@lib/redux/actions/classifieds-actions';
import AdMeta from '@components/ad-meta';


interface CSI {
	name?,
	classifieds?,
	fetchClassifieds?,
	status?,
	defaultValue?,
	onChangeProp?: (v) => any
}

const
	ClassifiedSelectorComponent = ({ name, classifieds, fetchClassifieds, status, defaultValue, onChangeProp }: CSI) => {
		const
			[value, setValue] = React.useState(defaultValue),
			[currentClassified, setCurrentClassified] = React.useState({}),
			onChange = value => {
				setValue(value);
				if (value.toString().split('-')[1]) {
					setCurrentClassified(classifieds?.find(cl => cl?.id == value.toString().split('-')[0])?.subclassifieds?.find(cl => cl?.id == value.toString().split('-')[1]));
				} else {
					setCurrentClassified(classifieds?.find(cl => cl?.id == value.toString().split('-')[0]));
				}
				if(onChangeProp)
					onChangeProp(value);
			};

		React.useEffect(() => {
			fetchClassifieds(null, {
				queryParams: {
					include: 'subclassifieds.'.repeat(8).slice(0, -1),
				}
			});
		}, []);


		const
			MakeTrees = ({selectedClassified}: {selectedClassified}) => {

				return selectedClassified?.subclassifieds?.length
					? (
						<TreeSelect.TreeNode key={selectedClassified.id} value={selectedClassified.id} title={selectedClassified.name}>
							{selectedClassified?.subclassifieds?.map(sb =>
								sb?.subclassifieds?.length
									? (
										<MakeTrees selectedClassified={sb} />
									)
									: (
										<TreeSelect.TreeNode key={sb.id} value={sb.id} title={sb.name} />
									)
						)}
						</TreeSelect.TreeNode>
					)
					: (
						<TreeSelect.TreeNode key={selectedClassified.id} value={selectedClassified.id} title={selectedClassified.name} />
					);
			},
			makeTreeData = (classifieds) => {

				return classifieds?.map(classified =>
					classified.subclassifieds
						? ({
							title: classified.name,
							value: classified.id,
							children: makeTreeData(classified.subclassifieds)
						})
						: ({
							title: classified.name,
							value: classified.id
						}));
			};

		return (
			<>
				<TreeSelect
					defaultValue={defaultValue}
					disabled={status?.classifieds?.fetching}
					treeData={makeTreeData(classifieds?.filter(c => !c.classified_id))}
					showSearch
					style={{ width: '100%' }}
					value={value}
					dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
					placeholder="Select a classified"
					allowClear
					treeDefaultExpandAll
					onChange={onChange} />
				<input type='hidden' name={name ?? 'classified'} value={value} />

				{ /* <AdMeta classified={currentClassified} /> */ }
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		fetchClassifieds
	}, dispatch),
	ClassifiedSelector = connect(mapStateToProps, mapDispatchToProps)(ClassifiedSelectorComponent);




export default ClassifiedSelector;