import React, { Component } from 'react'
import { View, StyleSheet, Text, FlatList, TouchableOpacity, Modal, TextInput } from 'react-native'
import { AddMessage } from '../presentation'
import Turbo from 'turbo360'
import config from '../../config'

class Messages extends Component{

    constructor(){
        super()
        this.state = {
            messages: [
            ],
            modalVisible:true,
            login: {
                username:'',
                password:''
            }
        }
    }

    componentDidMount(){
        ...
    }

    addMessage(){
        ...
    }

    loginUpdated(text, key){
        let newLogin = Object.assign({}, this.state.login)
        newLogin[key] = text
        this.setState({
            login: newLogin
        })
    }

    _renderMessage(item){
        ...
    }

    render(){
        return(
            <View style={styles.main}>
                <Modal
                    transparent={true}
                    visible={this.state.modalVisible}>
                    <View style={styles.modal}>
                        <View style={styles.login}>
                            <Text>Login / Signup</Text>
                            <Text>Username</Text>
                            <TextInput onChangeText={(text)=>this.loginUpdated(text, 'username')}/>
                            <Text>Password</Text>
                            <TextInput onChangeText={(text)=>this.loginUpdated(text, 'password')}/>
                            <TouchableOpacity onPress={()=>this.loginSubmitted()}>
                                <Text>SUBMIT</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </Modal>
            <FlatList
                keyExtractor={(item)=>item.id}
                style={styles.main}
                data={this.state.messages}
                renderItem={({item})=>this._renderMessage(item)}
                />
                <AddMessage addMessage={()=>this.addMessage()}/>
            </View>
        )
    }
}

const styles=StyleSheet.create({
    main:{
        ...
    },
    message:{
        ...
    },
    messageText:{
        ...
    },
    modal: {
        ...
    },
    login: {
        width:80 + '%',
        height:30 + '%',
        backgroundColor:'rgb(255,255,255)'
    }
})

export default Messages