import React, { Component } from 'react';

import propTypes from 'prop-types';

import { connect } from 'react-redux';
import moment from 'moment';
import { StyleSheet, Text, View, KeyboardAvoidingView, TextInput, ScrollView } from
'react-native';
import { Icon } from 'react-native-elements';
import CustomHeader from '../../shared/customheader';
import { conversationActions } from '../../store/conversation';

const mapsDispatchToProps = {
getConversation: conversationActions.getConversation,
sendMessage: conversationActions.sendMessage,
}

const mapStateToProps = (state: any) => ({

activeChat: state.conversation.activeConversation,
authenticatedUser: state.user.authenticatedUser,
chats: state.conversation.data,
});

interface CustomChat {
activeChat: number;
getConversation: Function;
sendMessage: Function;
chats: Array<any>;
authenticatedUser: any;
}

export class Chat extends Component<CustomChat> {

// public messagesEnd: Element | null = null;
// private observer: MutationObserver | null = null;
private scrollView: any;

state = {
currentMessageLength: 0,
message: '',
maxMessageLength: 160
}

static propTypes = {
activeChat: propTypes.number.isRequired
}
static navigationOptions: ({ title, subtitle }: { title: any; subtitle: any; })
=> { headerTitle: JSX.Element; headerStyle: { backgroundColor: string; };
headerBackTitleVisible: boolean; };

componentDidMount() {
if (this.props.activeChat) {
// conversationActions.openConversation(173);
// Grab particular chat here
}
}

componentDidUpdate(prevProps: any) {
if (this.props.activeChat > -1 && prevProps.activeChat !==
this.props.activeChat) {
this.props.getConversation(this.props.activeChat);
}
 }

animateScroll(el: Element, duration: number) {

console.log('animateScroll mock');
}

handleMessageInput = (e: React.BaseSyntheticEvent) => {

e.stopPropagation();
this.setState({ currentMessageLength: e.target.value.length, message:
e.target.value });
}

handleMessageSendWithEnter = (e: React.KeyboardEvent) => {

e.stopPropagation();
if (e.key === 'Enter') {
this.handleMessageSend();
}
}

handleMessageSend = () => {
if (this.props.activeChat !== null) {
this.props.sendMessage(this.props.activeChat, this.state.message);
this.setState({ currentMessageLength: 0, message: '' });
}
}

render() {
const activeChat = this.props.activeChat ? this.props.chats.find(chat =>
chat.id === this.props.activeChat) : false;
// console.log(activeChat);
return (
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
<ScrollView
style={styles.messages}
ref={ref => this.scrollView = ref}
onContentSizeChange={(contentWidth, contentHeight)=>{
this.scrollView.scrollToEnd({animated: true});
}}
>
{activeChat && activeChat.messages && activeChat.messages.map((msg:
any, key: number) => (
<View style={styles.message} key={key}>
<Text style={{...styles.sent_at, ...(msg.sender.internal &&
msg.sender.id === this.props.authenticatedUser.id ? styles.sent_at_me :
{})}}>{moment(msg.sent_at).format('D.MM.YYYY, HH:mm')}</Text>
<Text style={{...styles.quote, ...(msg.sender.internal &&
msg.sender.id === this.props.authenticatedUser.id ? styles.message_me :
styles.message_other)}}>{msg.sender.first_name} {msg.sender.last_name}:
{msg.text_content}</Text>
</View>
))}
</ScrollView>
<View style={styles.footer}>
<View style={styles.footer_attach}>
<Icon name="add-circle-outline" onPress={() => { }} />
</View>
<View style={styles.footer_text}>
<TextInput
style={styles.compose_text}
 onChangeText={(message) => this.setState({ message })}
value={this.state.message}
/>
</View>
<View style={styles.footer_send}>
<Icon
name="send"
color="#fff"
containerStyle={{
backgroundColor: '#0077c8',
// borderRadius: '10',
padding: 8
}}
onPress={this.handleMessageSend}
/>
</View>
</View>
</KeyboardAvoidingView>)
}
}

{/* <Text>{this.state.currentMessageLength}/{this.state.maxMessageLength}</Text> */
}

const styles = StyleSheet.create({

container: {
flex: 1,
// backgroundColor: '#aaa',
alignItems: 'center',
justifyContent: 'center',
width: '100%'
// flexDirection: 'row'
},
messages: {
flex: 20,
width: '100%',
paddingTop: 0,
paddingBottom: 0,
paddingRight: 10,
paddingLeft: 10,
},
message: {
paddingBottom: 16
},
sent_at: {
fontSize: 10,
color: '#adadad',
paddingBottom: 6
},
quote: {
borderWidth: 2,
borderRadius: 8,
borderColor: '#0077c8',
padding: 10,
},
message_me: {
borderTopRightRadius: 0,
marginLeft: 50
 },
message_other: {
borderTopLeftRadius: 0,
backgroundColor: '#0077c8',
color: '#fff',
marginRight: 50
},
sent_at_me: {
textAlign: 'right'
},
sectionHeader: {

},
footer: {
height: 50,
flexDirection: 'row',
width: '100%',
borderTopWidth: 1,
borderTopColor: '#f3f3f3'
},
footer_attach: {
width: 50,
flex: 1,
},
footer_text: {
flex: 9,
borderBottomWidth: 1,
// borderBottom:
},
footer_send: {
width: 50,
flex: 2
},
compose_text: {

}
});

Chat.navigationOptions = ({ title, subtitle }) => {

return {
headerTitle: <CustomHeader title="Atlanta Support" subtitle="404 123-4567"
left={false} />,
headerStyle: {
backgroundColor: '#f9f9f9',
},
headerBackTitleVisible: false,
};
};

export default connect(mapStateToProps, mapsDispatchToProps)(Chat);