import React from 'react';
import { Drawer, Row, Col, Tag } from 'antd';
import { TagOutlined } from '@ant-design/icons';
import { ImpulseSpinner } from 'react-spinners-kit';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';


interface SDI {
	status?,
	fetchDistricts?,
	districts?,
	children?,
	currentPath?,
	style?
}


const
	SelectDistrictComponent = ({ status, style, fetchDistricts, districts, children, currentPath = '' }: SDI) => {
		const [showDistricts, setShowDistricts] = React.useState(false);

		const showDrawer = () => {
			if (!districts?.length) fetchDistricts();
			setShowDistricts(true);
		};

		return (
			<>
				<span style={style} onClick={showDrawer}>
					{children}
				</span>
				<Drawer
					title="Select A District"
					placement="right"
					onClose={() => setShowDistricts(false)}
					visible={showDistricts}
					drawerStyle={{ width: 'min(400px, 90%)' }}>
					{status?.districts?.fetching
						? (<ImpulseSpinner />)
						: (
							<Row gutter={[10, 10]}>
								{districts?.map(ds =>
									<Col key={ds?.id}>
										<a href={'//' + ds?.slug + '.' + process.env.APP_HOST + '/' + currentPath}>
											<Tag color='default' icon={<TagOutlined />}>{ds?.name}</Tag>
										</a>
									</Col>
								)}
							</Row>
						)}
				</Drawer>
			</>
		);

	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({}, dispatch),
	SelectDistrict = connect(mapStateToProps, mapDispatchToProps)(SelectDistrictComponent);


export default SelectDistrict;