import React from 'react';
import { submitRating } from 'lib/redux/actions/ratings-actions';
import { Subject } from 'rxjs';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Empty, Button, Input, Alert } from 'antd';
import { showGlobalLogin } from 'lib/redux/actions/global-helpers-actions';

interface RatingsInterface {
	ratingsList: Record<string, any>[],
	allowReview?: boolean,
	modelID?: number | string,
	modelType?: string,
	status?: Record<string, any>,
	submitRating?: Function,
	rating?: Record<string, any>,
	showGlobalLogin?,
	userState?
}

const Ratings = ({ ratingsList, allowReview, modelID, modelType, status, submitRating, rating, showGlobalLogin, userState }: RatingsInterface) => {
		const
			setWeight = e => {
				e.preventDefault();
				const newRatingsFormData = ratingsFormData;
				newRatingsFormData['weight'] = e.target.getAttribute('data-weight');
				setRatingsFormData({ ...newRatingsFormData });
			},
			ratingsFormHandler = e => {
				e.preventDefault();

				const payload = new FormData();
				payload.append('model_id', modelID.toString());
				payload.append('model_type', modelType);
				payload.append('comment', ratingsFormData.comment);
				payload.append('weight', ratingsFormData.weight);

				submitRating(payload);
			},
			[ratingsFormData, setRatingsFormData] = React.useState({
				comment: '',
				weight: ''
			}),
			formInput = new Subject();

		formInput.subscribe(e => {
			const
				{ target: { name, value } }: Record<string, any> = e,
				newRatingsFormData = ratingsFormData;
			newRatingsFormData[name] = value;
			setRatingsFormData({ ...newRatingsFormData });
		});



		return (<>
			<div className="review">
				<ul>
					{
					ratingsList?.length == 0 ?
						(<>
							<Empty description={
								<span>
									No ratings available yet
								</span>
							}></Empty>
						</>) : null
					}
					{
					ratingsList?.map(rt =>
						<li key={rt.id}>
							<div className="singel-review">
								<div className="review-thum">
									<div className="review-img">
										<img src={rt.user.picture} alt={rt.user.username} />
									</div>
									<div className="review-head pl-20">
										<h6 className="author_name">{rt.user.name}</h6>
										<span>@{rt.user.username}</span>
									</div>
								</div>
								<div className="date">
									<span>{rt.date}</span>
								</div>
								<div className="review-cont">
									<p>{rt.comment}</p>
									<div className="rating">
										<ul>
											{
												Array.from(Array(Number(rt.weight)), (e, i) =>
													<li key={i}><i className="fas fa-star"></i></li>
												)
											}
										</ul>
										<span>/ {rt.weight} Star</span>
									</div>
								</div>
							</div>
						</li>
					)
					}
				</ul>
			</div>

			{
				allowReview
					? (<>
						{
						userState?.isAuthenticated
							? rating
								? (<>
									<Alert message="Submitted" description={'You rated this as ' + rating.weight + ' star'} type="success" showIcon />
								</>)
								: (<>
									<div className="reviwe-form mt-25">
										<h3 className="form_title">Write a review</h3>
										<form onSubmit={e => ratingsFormHandler(e)}>
											<div className="form-box">
												<Input disabled placeholder={'Posting as ' + userState.username} />
											</div>
											<div className="form-box">
												<textarea name='comment' value={ratingsFormData.comment} onChange={e => formInput.next(e)} placeholder="Your Review"></textarea>
												<p className='text-danger'>{status?.ratings?.error?.comment?.join('<br />')}</p>
											</div>
											<div className="rating">
												<span>Rating</span>
												<ul>
													<li style={{ marginRight: '10px' }}>Bad</li>
													<li><a href="#"><i data-weight='1' onClick={e => setWeight(e)} className={ratingsFormData['weight'] >= '1' ? 'fa fa-star text-warning' : 'fa fa-star'}></i></a></li>
													<li><a href="#"><i data-weight='2' onClick={e => setWeight(e)} className={ratingsFormData['weight'] >= '2' ? 'fa fa-star text-warning' : 'fa fa-star'}></i></a></li>
													<li><a href="#"><i data-weight='3' onClick={e => setWeight(e)} className={ratingsFormData['weight'] >= '3' ? 'fa fa-star text-warning' : 'fa fa-star'}></i></a></li>
													<li><a href="#"><i data-weight='4' onClick={e => setWeight(e)} className={ratingsFormData['weight'] >= '4' ? 'fa fa-star text-warning' : 'fa fa-star'}></i></a></li>
													<li><a href="#"><i data-weight='5' onClick={e => setWeight(e)} className={ratingsFormData['weight'] >= '5' ? 'fa fa-star text-warning' : 'fa fa-star'}></i></a></li>
													<li style={{ marginLeft: '10px' }}>Good</li>
												</ul>
											</div>
											<p className='text-danger'>{status?.ratings?.error?.weight?.join('<br />')}</p>
											{
												status?.ratings?.reviewing
													? (<>
														<button type="submit" className='btn btn-secondary'>Submitting <i className='fas fa-spinner fa-cog'></i></button>
													</>)
													: (<>
														<button type="submit">Submit</button>
													</>)
											}
										</form>
									</div>
								</>)
							: (<>
								<p className='mt-5 text-center'>
									<Button type='primary' onClick={() => showGlobalLogin()}>Login</Button> to leave a review
								</p>
							</>)
						}
					</>)
					: null

			}

		</>);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		submitRating, showGlobalLogin
	}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Ratings);