// WARNING: This component has been deprecated in favor of @pages/ads/post-ad/post-ad


import React from 'react';
import { createAd } from '@lib/redux/actions/ads-actions';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchDistricts } from '@lib/redux/actions/districts-actions';
import { loader } from '@components/loader';
import { GuardSpinner } from 'react-spinners-kit';
import FileUpload from '@components/file-upload';
import { Select, InputNumber } from 'antd';
import ClassifiedSelector from '@components/classified-selector';
import Helmet from '@lib/helmet';


interface CAI {
	districts?,
	fetchDistricts?,
	status?,
	createAd?,
	ad?
}


const
	CreateAdComponent = ({ districts, fetchDistricts, status, createAd, ad }: CAI) => {

		React.useEffect(() => {
			fetchDistricts();
		}, []);

		const [districtValue, setDistrictValue] = React.useState(null);
		const districtSelected = val => setDistrictValue(val);

		const submitHandler = e => {
			e.preventDefault();
			const payload = new FormData(e.target);
			createAd(payload);
		};

		status?.posting_ad ? loader.init() : loader.destroy();

		return (
			<>
				<Helmet pageUrl='/ad/post' />
				{status?.ad?.posting
					? (
						<div style={loader.styles}>
							<GuardSpinner size={30} frontColor="#686769" loading={true} />
							<p className='title text-white'>Posting Your Free Ad</p>
						</div>
					)
					: null}

				{ /* ad && status?.ad?.posted
					? (<Redirect to={'/ad/' + ad.slug} />)
					: null */ }

				<section className="ad-posts-area pt-120 pb-120">
					<div className="container">
						<div className="row justify-content-center">
							<div className="col-lg-10">
								<div className="ad-posts-wrapper">
									<div className="ad-posts-title">
										<h4 className="title">Post an ad</h4>
									</div>

									<div className="ad-posts-form">
										<form onSubmit={e => submitHandler(e)}>
											<div className="single-form">
												<label>Ad Title</label>
												<input name='name' type="text" placeholder="Ad Title" />
												<p className='text-danger'>{status?.ad?.error?.name?.join('<br />')}</p>
											</div>
											<div className="single-form">
												<label>Description</label>
												<textarea name='description' placeholder="Description"></textarea>
												<p className='text-danger'>{status?.ad?.error?.description?.join('<br />')}</p>
											</div>
											<div className="single-form">
												<label>Price</label>
												<InputNumber style={{ width: '100%' }} name='price' formatter={value => `GH₵ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')} parser={value => value.replace(/GH₵\s?|(,*)/g, '')} />
												<p className='text-danger'>{status?.ad?.error?.price?.join('<br />')}</p>
											</div>
											<div className="single-form">
												<label>Select District</label>
												<Select size='large' onChange={districtSelected} disabled={status?.districts?.fetching} style={{ width: '100%' }}>
													{districts?.map(ds =>
														<Select.Option key={ds.id} value={ds.id}>{ds.name}</Select.Option>
													)}
												</Select>
												<input type="hidden" value={districtValue} name='district' />
												<p className='text-danger'>{status?.ad?.error?.district?.join('<br />')}</p>
											</div>
											<div className="single-form">
												<label>Select Classified</label>
												<ClassifiedSelector />
												<p className='text-danger'>{status?.ad?.error?.classified?.join('<br />')}</p>
											</div>
											<div className="single-form">
												<label>Upload Picture</label>
												<FileUpload limit={1} name='picture' />
												<p className='text-danger'>{status?.ad?.error?.picture?.join('<br />')}</p>
											</div>
											<div className="single-form">
												<label>Upload other pictures (optional)</label>
												<FileUpload limit={5} name='other_pictures' />
												<p className='text-danger'>{status?.ad?.error?.other_pictures?.join('<br />')}</p>
											</div>

											<div className="single-form">
												<button className="main-btn">Submit</button>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		createAd, fetchDistricts
	}, dispatch),
	CreateAd = connect(mapStateToProps, mapDispatchToProps)(CreateAdComponent);

export default CreateAd;