import React from 'react';
import { AsyncStorage, StyleSheet, View } from 'react-native';
import Toolbar from './toolbar/Toolbar';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addMessage, clearMessages, getLastMessage, getMessages } from '../../../actions';
import { pop } from '../../../NavigationService';
import firebase from 'react-native-firebase';
import FastImage from 'react-native-fast-image';
import bStyles from '../../general/BaseStyles';
import imgs from '../../../assets/image/imgs';
import { Bubble, Composer, Day, GiftedChat, InputToolbar, LoadEarlier, Send, Time } from 'react-native-gifted-chat';
import i18n from 'i18n-js';
import { fontCompat } from '../../../Utils/utils';
import { SafeAreaView } from 'react-navigation';

class ChatScreen extends React.Component {
    notificationListener;

    constructor(props) {
        super(props);
        this.state = {
            userId: -1,
            sentMessages: [],
        };
    }

    componentWillMount() {
        AsyncStorage.getItem('user_id')
            .then(result => this.setState({ userId: Number.parseInt(result) }))
            .catch();
    }

    componentDidMount() {
        const orderId = this.props.navigation.getParam('orderId', -1);
        this.props.getMessages(orderId);
        this.notificationListener = firebase.notifications().onNotification(notification => {
            const {
                _data: {
                    order_id,
                },
            } = notification;
            this.props.getLastMessage(order_id);
        });
    }

    componentWillReceiveProps(nextProps) {
        const orderId = this.props.navigation.getParam('orderId', -1);
        const { sentMessageId } = this.props;
        const {
            sentMessageId: nextSentMessageId,
        } = nextProps;

        nextSentMessageId && sentMessageId !== nextSentMessageId && this.props.getLastMessage(orderId);
    }

    componentWillUnmount() {
        this.props.clearMessages();
        this.notificationListener && this.notificationListener();
    }

    render() {
        const name = this.props.navigation.getParam('name', '');
        const avatarUrl = this.props.navigation.getParam('avatarUrl', '');
        const {
            loading,
            loadedAllData,
            messages,
        } = this.props;
        const {
            userId,
        } = this.state;

        return (
            <SafeAreaView style={styles.container}>
                <FastImage style={bStyles.imageBackground}
                           source={imgs.background}/>
                <Toolbar onBackPress={this.handleBackPress}
                         title={name}
                         avatarUrl={avatarUrl}/>
                <GiftedChat
                    messages={messages}
                    listViewProps={{
                        initialNumToRender: 20,
                    }}
                    renderAvatar={null}
                    onSend={this.handleSend}
                    user={{ _id: userId }}
                    isAnimated={false}
                    keyboardShouldPersistTaps={'never'}
                    placeholder={i18n.t('Type your message here')}
                    loadEarlier={!loadedAllData}
                    onLoadEarlier={this.handleLoadEarlier}
                    renderDay={this.renderDay}
                    isLoadingEarlier={loading}
                    renderBubble={this.renderBubble}
                    textInputProps={{
                        autoCapitalize: 'none',
                        keyboardAppearance: 'dark',
                        autoCorrect: false,
                    }}
                    renderInputToolbar={this.renderInputToolbar}
                    renderSend={this.renderSend}
                    renderComposer={this.renderComposer}
                    renderTime={this.renderTime}
                    renderLoadEarlier={this.renderLoadEarlier}/>
            </SafeAreaView>
        );
    }

    handleBackPress = () => {
        pop();
    };

    handleSend = (messages) => {
        this.setState({
            sentMessages: messages,
        });
        messages.forEach(message => {
            const orderId = this.props.navigation.getParam('orderId', -1);
            const { text } = message;
            this.props.addMessage(orderId, text);
        });
    };

    handleLoadEarlier = () => {
        const orderId = this.props.navigation.getParam('orderId', -1);
        this.props.getMessages(orderId);
    };

    renderLoadEarlier = props => {
        return (
            <LoadEarlier {...props}
                         textStyle={styles.loadEarlierText}/>
        );
    };

    renderBubble = props => {
        return (
            <Bubble
                {...props}
                wrapperStyle={{
                    left: styles.left,
                    right: styles.right,
                }}
                textStyle={{
                    right: styles.bubbleRightText,
                    left: styles.bubbleLeftText,
                }}
            />
        );
    };

    renderDay = props => {
        return (
            <Day
                {...props}
                textStyle={styles.dayText}/>
        );
    };

    renderTime = props => {
        return (
            <Time {...props}
                  textStyle={{
                      left: styles.timeTextLeft,
                      right: styles.timeTextRight,
                  }}/>
        );
    };

    renderInputToolbar = props => {
        return (
            <InputToolbar
                {...props}
                containerStyle={styles.inputContainer}
                primaryStyle={styles.inputPrimary}/>
        );
    };

    renderSend = props => {
        return (
            <Send
                {...props}
                containerStyle={styles.sendContainer}
                children={<FastImage source={imgs.send}
                                     style={styles.send}/>}/>
        );
    };

    renderComposer = props => {
        return (
            <Composer {...props}
                      textInputStyle={styles.composerText}
                      placeholderTextColor={'grey'}/>
        );
    };
}

ChatScreen.propTypes = {
    orderId: PropTypes.number,
    name: PropTypes.string,
    avatarUrl: PropTypes.string,
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.9)',
    },
    left: {
        backgroundColor: '#e5e6ea',
    },
    right: {
        backgroundColor: '#d1b624',
    },
    inputContainer: {
        backgroundColor: 'rgba(0, 0, 0, 0.9)',
        minHeight: 44,
    },
    inputPrimary: {
        backgroundColor: '#f9f9f9',
        marginVertical: 4,
        marginHorizontal: 16,
        borderRadius: 24,
        alignItems: 'center',
    },
    sendContainer: {
        width: 36,
        height: 36,
        borderRadius: 18,
        backgroundColor: '#f9f9f9',
        alignItems: 'center',
        justifyContent: 'center',
    },
    send: {
        width: 20,
        height: 20,
    },
    composerText: {
        color: 'black',
        fontSize: 14,
        ...fontCompat('OpenSans-Regular'),
    },
    timeTextLeft: {
        color: 'grey',
        fontSize: 10,
        ...fontCompat('OpenSans-Regular'),
    },
    timeTextRight: {
        color: 'white',
        fontSize: 10,
        ...fontCompat('OpenSans-Regular'),
    },
    dayText: {
        color: 'grey',
        fontSize: 13,
        ...fontCompat('OpenSans-Bold'),
    },
    bubbleLeftText: {
        color: 'black',
        fontSize: 14,
        ...fontCompat('OpenSans-Regular'),
    },
    bubbleRightText: {
        color: 'white',
        fontSize: 14,
        ...fontCompat('OpenSans-Regular'),
    },
    loadEarlierText: {
        color: 'white',
        fontSize: 12,
        ...fontCompat('OpenSans-Bold'),
    },
});

const mapStateToProps = state => {
    return {
        messages: state.messages.data,
        sentMessageId: state.addMessage.data.message_id,
        loading: state.messages.isLoading,
        loadedAllData: state.messages.loadedAllData,
    };
};

const mapDispatchToProps = {
    getMessages,
    addMessage,
    clearMessages,
    getLastMessage,
};

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