import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Modal, Input, Button } from 'antd';
import { sendMessage } from 'lib/redux/actions/messages-actions';
import { MessageOutlined, CheckOutlined } from '@ant-design/icons';
import { showGlobalLogin } from 'lib/redux/actions/global-helpers-actions';


interface QCI {
	chats?,
	secondPerson?,
	sendMessage?,
	contactText?,
	showGlobalLogin?,
	userState?,
	status?
}

const
	QuickChatComponent = ({ chats, status, secondPerson, sendMessage, contactText, showGlobalLogin, userState }: QCI) => {

		const [messageText, setMessageText] = React.useState('');

		const handleTyping = e => {
			setMessageText(e.target.value);
		};

		const sendMessageHandler = e => {
			e.preventDefault();
			const payload = {
				recipient_key: secondPerson?.awebkey,
				message_text: messageText
			};
			// payload.append('recipient_key', secondPerson?.awebkey);
			sendMessage(payload);
			setMessageText('');
		};

		const [chatIcon, setChatIcon] = React.useState<React.ReactNode>(<MessageOutlined />);

		React.useEffect(() => {
			if (status?.chats?.completing) {
				setChatIcon(<CheckOutlined />);
				setTimeout(() => setChatIcon(<MessageOutlined />), 4e3);
			}
		}, [status]);

		const [quickChat, showQuickChat] = React.useState(false);

		return (
			<>
				<Modal onCancel={() => showQuickChat(false)} title={'Send message to ' + secondPerson?.username} visible={quickChat} footer={
					<>
						<Button type='default' onClick={() => showQuickChat(false)}>Cancel</Button>
						<Button loading={status?.chats?.posting} icon={chatIcon} type='primary' onClick={sendMessageHandler} style={{ background: '#3db83a', borderColor: '#3db83a' }}>Send</Button>
					</>}>
					<form onSubmit={e => sendMessageHandler(e)}>
						<Input.TextArea name='message_text' placeholder="Type mesage here" value={messageText} onChange={e => setMessageText(e.target.value)} />
						<p className='text-danger'>{status?.chats?.error?.message_text?.join('<br />')}</p>

					</form>
				</Modal>
				<Button icon={<MessageOutlined />} type='primary' onClick={() => userState?.isAuthenticated ? showQuickChat(true) : showGlobalLogin()} className='mb-20' style={{ background: '#3db83a', borderColor: '#3db83a' }} block>{contactText ?? 'Contact Seller'}</Button>

			</>

		);
	},
	mapStateToProps = state => state,
	mapDispatchToProps = dispatch => bindActionCreators({
		sendMessage, showGlobalLogin
	}, dispatch),
	QuickChat = connect(mapStateToProps, mapDispatchToProps)(QuickChatComponent);

export default QuickChat;