import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Button, Input, Form, Select, Modal } from 'antd';
import { flagContent } from '@lib/redux/actions/flags-actions';
import { FlagOutlined } from '@ant-design/icons';

interface FlagsInterface {
	children: React.ReactNode,
	flagContent?: any,
	model_type: string,
	model_id: number,
	link: string
}

const
	FlagsComponent = ({ children, flagContent, model_type, model_id, link = window.location.href }: FlagsInterface) => {
		const
			[visible, setVisible] = React.useState(false),
			submitFlag = payload => {
				payload.model_type = model_type;
				payload.model_id = model_id;
				payload.link = link;
				flagContent(payload);
			},
			showForm = () => {
				setVisible(true);
			},
			[commentRequired, setCommentRequired] = React.useState(false),
			reasonChangeHandler = val => {
				val == 'other' ? setCommentRequired(true) : setCommentRequired(false);
			};


		return (
			<>
				<Modal
					title="Flag As Inappropriate"
					visible={visible}
					onCancel={() => setVisible(false)}
					footer={
						<Button onClick={() => setVisible(false)}>Cancel</Button>
					}
				>
					<Form layout='vertical' onFinish={submitFlag}>
						<Form.Item name="reason" label="Reason" rules={[{ required: true }]}>
							<Select
								placeholder="Select a reason for reporting this as inappropriate"
								allowClear
								onChange={reasonChangeHandler}
							>
								<Select.Option value="violates terms and conditions">Violates terms and conditions</Select.Option>
								<Select.Option value="uses offensive language">Uses offensive language</Select.Option>
								<Select.Option value="provides false information">Provides false information</Select.Option>
								<Select.Option value="other">Other (please specify)</Select.Option>
							</Select>
						</Form.Item>
						<Form.Item name="comment_text" label="Additional Comments" rules={[{ required: commentRequired, message: 'If you select \'Other\', you\'ll have to specify the reason' }]}>
							<Input.TextArea />
						</Form.Item>
						<Form.Item className='text-right'>
							<Button htmlType='submit' type='primary'>Submit</Button>
						</Form.Item>
					</Form>
				</Modal>
				{children
					? (
						<span onClick={() => showForm}>{children}</span>
					)
					: (
						<Button icon={<FlagOutlined />} type='text' onClick={showForm}>Flag as inappropriate</Button>
					)}
			</>
		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		flagContent
	}, dispatch),
	Flags = connect(mapStateToProps, mapDispatchToProps)(FlagsComponent);

export default Flags;