import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { DeleteOutlined, FlagOutlined } from '@ant-design/icons';
import { Tooltip, List, Comment, Popconfirm, Typography, Drawer } from 'antd';
import { Form, Input, Button } from 'antd';
import { isAuthenticated } from '@services/auth';
import { postComment, deleteComment, editComment } from '@lib/redux/actions/comments-actions';
import first from 'lodash/first';
import Flags from './flags';


const
	Comments = ({ entity, userState, postComment, editComment, deleteComment, status }: Record<string, any>) => {
		const data = [];
		const allowedActions = (comment) => {
			if (userState?.username == comment.user?.username) return [
				<Popconfirm key='delete' title="Are you sure to delete this comment?" onConfirm={() => deleteComment(comment, 'news_item')}>
					<span><DeleteOutlined /> Delete</span>
				</Popconfirm>,
				<span key='flag'>
					<FlagOutlined />
					<Flags model_type='App\\Comments' model_id={comment?.id} />
				</span>
			];

			return [
				<span key='flag'>
					<Flags model_type='App\\Comments' model_id={comment?.id} />
				</span>
			];
		};


		entity?.comments?.map(comment => data.push({
			actions: allowedActions(comment),
			author: <a href={'/user/' + comment.user?.username}>{comment.user?.name}</a>,
			avatar: comment.user?.picture,
			content: (
				userState?.username == comment.user?.username
					? (
						<Typography.Paragraph editable={{
							onChange: str => {
								const payload = comment;
								payload['comment_text'] = str;
								editComment(payload, 'news_item');
							}
						}}>
							{comment.comment_text}
						</Typography.Paragraph>
					)
					: (
						<Typography.Paragraph>
							{comment.comment_text}
						</Typography.Paragraph>
					)
			),
			datetime: (
				<Tooltip title={comment.created_at}>
					<span>
						{comment.date}
					</span>
				</Tooltip>
			),
		}));

		const [drawerVisibile, setDrawerVisibility] = React.useState(false);

		const onFinish = values => {
			values['user_id'] = userState.id;
			values['model_type'] = 'news';
			values['model_id'] = entity.id;
			postComment(values, 'news_item');
		};

		return (
			<>
				{data
					? (
						<>

							<Drawer className='news-drawer' width='' title={data.length + ' Comment' + (data.length == 1 ? '' : 's')} placement="right" closable={true} onClose={() => setDrawerVisibility(false)} visible={drawerVisibile}>
								<List loading={status?.comments?.fetching} className="comment-list" itemLayout="horizontal" dataSource={data} renderItem={item => (
									<li>
										<Comment
											actions={item['actions']}
											author={item['author']}
											avatar={item['avatar']}
											content={item['content']}
											datetime={item['datetime']}
										/>
									</li>
								)} />
							</Drawer>

							<List loading={status?.comments?.fetching} className="comment-list mt-50" header={data.length + ' Comment' + (data.length == 1 ? '' : 's')} itemLayout="horizontal" dataSource={first(data) ? [first(data)] : []} renderItem={item => (
								<li>
									<Comment
										actions={item['actions']}
										author={item['author']}
										avatar={item['avatar']}
										content={item['content']}
										datetime={item['datetime']}
									/>
								</li>
							)} />


							{first(data) ? <div className='text-center'><Button type='primary' onClick={() => setDrawerVisibility(true)}>Show All Comments</Button></div> : null}



						</>
					)
					: (<></>)}


				{
					isAuthenticated()
						? (
							<>
								<div className="blog-form">
									<div className="comment-title">
										<h4 className="title">Leave A Reply</h4>
									</div>
									<Form onFinish={onFinish}>
										<Form.Item>
											<Input disabled placeholder={'Commenting as @' + userState.username} />
										</Form.Item>
										<Form.Item name='comment_text' rules={[{ required: true, message: 'You need to type a comment first' }]}>
											<Input.TextArea rows={6} />
										</Form.Item>
										<Form.Item>
											<Button type='primary' htmlType='submit'>Post Comment</Button>
										</Form.Item>
									</Form>
								</div>
							</>
						)
						: (<>
							<div className='pt-70 pb-70' style={{ textAlign: 'center' }}>
								<p><Button href='/login' type='ghost'>Login</Button> or <Button href='/register' type='ghost'>Create an account</Button> to post a comment.</p>
							</div>
						</>)
				}

			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		postComment, deleteComment, editComment
	}, dispatch);

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