import * as React from 'react';
import { View, StyleSheet, Platform, SafeAreaView, AsyncStorage, Text, Image } from 'react-native';
import PropTypes from 'prop-types'
import { GiftedChat, Actions } from 'react-native-gifted-chat'
import FirebaseStorage from '../data/FirebaseStorage';
export const renderActions = (props) => (
  <Actions
    {...props}
    containerStyle={{
      width: 44,
      height: 44,
      alignItems: 'center',
      justifyContent: 'center',
      marginLeft: 4,
      marginRight: 4,
      marginBottom: 0,
    }}
    icon={() => (
      <Image
        style={{ width: 32, height: 32 }}
        source={{
          uri: 'https://placeimg.com/32/32/any',
        }}
      />
    )}
    options={{
      'Choose From Library': () => {
        this.redirect();
      },
    }}
    optionTintColor="#222B45"
  />
);

class ChatScreen extends React.Component {

  state = {
    messages: [],
  };

  get user() {
    const { name, id, avatar } = this.props.route.params;
    return {
      name: name,
      _id: id,
      avatar: avatar,
    };
  }

    componentDidMount() {
      FirebaseStorage.shared.on(message =>
        this.setState(previousState => ({
          messages: GiftedChat.append(previousState.messages, message),
        }))
      );
  }

  componentWillUnmount() {
      FirebaseStorage.shared.off();
  }

  render() {
    return <SafeAreaView style={{flex: 1}}>
        <GiftedChat
              messages={this.state.messages}
              onSend={FirebaseStorage.shared.send}
              user={this.user}
              alwaysShowSend
              showUserAvatar
              isAnimated
              showAvatarForEveryMessage
              renderBubble={this.renderBubble}
              renderMessageImage={() => this.showImage}
              renderUsernameOnMessage
              isTyping
              renderActions={renderActions}
        />
    </SafeAreaView>
  }
  redirect = () => {
    this.props.navigation.navigate('CallScreen')
    console.log('test')
  }
}

const styles = StyleSheet.create({
});

export default ChatScreen;