text: import { AppLoading, Asset, Linking } from 'expo'
  import React, { Component } from 'react'
  import { StyleSheet, View, Text, Platform } from 'react-native'
  import { Bubble, GiftedChat, SystemMessage } from './src/'
  
  import AccessoryBar from './example-expo/AccessoryBar'
  import CustomActions from './example-expo/CustomActions'
  import CustomView from './example-expo/CustomView'
  import NavBar from './example-expo/NavBar'
  import messagesData from './example-expo/data/messages'
  import earlierMessages from './example-expo/data/earlierMessages'
  
  const styles = StyleSheet.create({
    container: { flex: 1 },
  })
  
  const filterBotMessages = message =>
    !message.system && message.user && message.user._id && message.user._id === 2
  const findStep = step => message => message._id === step
  
  const user = {
    _id: 1,
    name: 'Developer',
  }
  
  const otherUser = {
    _id: 2,
    name: 'React Native',
    avatar: 'https://facebook.github.io/react/img/logo_og.png',
  }
  
  export default class App extends Component {
    state = {
      inverted: false,
      step: 0,
      messages: [],
      loadEarlier: true,
      typingText: null,
      isLoadingEarlier: false,
    }
  
    _isMounted = false
  
    componentDidMount() {
      this._isMounted = true
      // init with only system messages
      this.setState({
        messages: messagesData, // messagesData.filter(message => message.system),
        appIsReady: true,
      })
    }
  
    componentWillUnmount() {
      this._isMounted = false
    }
  
    onLoadEarlier = () => {
      this.setState(previousState => {
        return {
          isLoadingEarlier: true,
        }
      })
  
      setTimeout(() => {
        if (this._isMounted === true) {
          this.setState(previousState => {
            return {
              messages: GiftedChat.prepend(
                previousState.messages,
                earlierMessages,
                Platform.OS !== 'web',
              ),
              loadEarlier: false,
              isLoadingEarlier: false,
            }
          })
        }
      }, 1000) // simulating network
    }
  
    onSend = (messages = []) => {
      const step = this.state.step + 1
      this.setState(previousState => {
        const sentMessages = [{ ...messages[0], sent: true, received: true }]
        return {
          messages: GiftedChat.append(
            previousState.messages,
            sentMessages,
            Platform.OS !== 'web',
          ),
          step,
        }
      })
      // for demo purpose
      // setTimeout(() => this.botSend(step), Math.round(Math.random() * 1000))
    }
  
    botSend = (step = 0) => {
      const newMessage = messagesData
        .reverse()
        // .filter(filterBotMessages)
        .find(findStep(step))
      if (newMessage) {
        this.setState(previousState => ({
          messages: GiftedChat.append(
            previousState.messages,
            newMessage,
            Platform.OS !== 'web',
          ),
        }))
      }
    }
  
    parsePatterns = linkStyle => {
      return [
        {
          pattern: /#(\w+)/,
          style: { textDecorationLine: 'underline', color: 'darkorange' },
          onPress: () => Linking.openURL('http://gifted.chat'),
        },
      ]
    }
  
    renderCustomView(props) {
      return <CustomView {...props} />
    }
  
    onReceive = text => {
      this.setState(previousState => {
        return {
          messages: GiftedChat.append(
            previousState.messages,
            {
              _id: Math.round(Math.random() * 1000000),
              text,
              createdAt: new Date(),
              user: otherUser,
            },
            Platform.OS !== 'web',
          ),
        }
      })
    }
  
    onSendFromUser = (messages = []) => {
      const createdAt = new Date()
      const messagesToUpload = messages.map(message => ({
        ...message,
        user,
        createdAt,
        _id: Math.round(Math.random() * 1000000),
      }))
      this.onSend(messagesToUpload)
    }
  
    renderAccessory = () => <AccessoryBar onSend={this.onSendFromUser} />
  
    renderCustomActions = props =>
      Platform.OS === 'web' ? null : (
        <CustomActions {...props} onSend={this.onSendFromUser} />
      )
  
    renderBubble = props => {
      return (
        <Bubble
          {...props}
          wrapperStyle={{
            left: {
              backgroundColor: '#f0f0f0',
            },
          }}
        />
      )
    }
  
    renderSystemMessage = props => {
      return (
        <SystemMessage
          {...props}
          containerStyle={{
            marginBottom: 15,
          }}
          textStyle={{
            fontSize: 14,
          }}
        />
      )
    }
  
    // renderFooter = props => {
    //   if (this.state.typingText) {
    //     return (
    //       <View style={styles.footerContainer}>
    //         <Text style={styles.footerText}>{this.state.typingText}</Text>
    //       </View>
    //     )
    //   }
    //   return null
    // }
  
    onQuickReply = replies => {
      const createdAt = new Date()
      if (replies.length === 1) {
        this.onSend([
          {
            createdAt,
            _id: Math.round(Math.random() * 1000000),
            text: replies[0].title,
            user,
          },
        ])
      } else if (replies.length > 1) {
        this.onSend([
          {
            createdAt,
            _id: Math.round(Math.random() * 1000000),
            text: replies.map(reply => reply.title).join(', '),
            user,
          },
        ])
      } else {
        console.warn('replies param is not set correctly')
      }
    }
  
    renderQuickReplySend = () => <Text>{' custom send =>'}</Text>
  
    render() {
      if (!this.state.appIsReady) {
        return <AppLoading />
      }
      return (
        <View
          style={styles.container}
          accessible
          accessibilityLabel='main'
          testID='main'
        >
          <NavBar />
          <GiftedChat
            messages={this.state.messages}
            onSend={this.onSend}
            loadEarlier={this.state.loadEarlier}
            onLoadEarlier={this.onLoadEarlier}
            isLoadingEarlier={this.state.isLoadingEarlier}
            parsePatterns={this.parsePatterns}
            user={user}
            scrollToBottom
            onLongPressAvatar={user => alert(JSON.stringify(user))}
            onPressAvatar={() => alert('short press')}
            onQuickReply={this.onQuickReply}
            keyboardShouldPersistTaps='never'
            renderAccessory={Platform.OS === 'web' ? null : this.renderAccessory}
            renderActions={this.renderCustomActions}
            renderBubble={this.renderBubble}
            renderSystemMessage={this.renderSystemMessage}
            renderCustomView={this.renderCustomView}
            quickReplyStyle={{ borderRadius: 2 }}
            renderQuickReplySend={this.renderQuickReplySend}
            inverted={Platform.OS !== 'web'}
            timeTextStyle={{ left: { color: 'red' }, right: { color: 'yellow' } }}
          />
        </View>
      )
    }
  }
  