import { useState } from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';

//COmponente de Mensagem
export type Mensagem = {
  mensagem: string;
  autor: string;
  esquerda?: boolean;
}

export interface IMensagem {
  msg: Mensagem;
}

export function Mensagem({msg}: IMensagem) {
  return (
    <View style={[stylesMensagem.container, {alignItems: msg.esquerda ? 'flex-start' : 'flex-end'}]}>
      <Text style={{fontSize: 15, fontWeight: 'bold'}}>{msg.autor}</Text>
      <Text style={{color: 'white', fontSize: 13}}>{msg.mensagem}</Text>
    </View>
  )
}

const stylesMensagem = StyleSheet.create({
    container: {
      margin: 10,
      backgroundColor: 'tomato', 
      borderRadius: 10,
      padding: 5
    }
});

//APP PRINCIPAL
export default function App() {

  const [ texto, setTexto ] = useState('');
  const [ mensagens, setMensagens ] = useState<Mensagem[]>([
    {autor: 'Carlos', mensagem: 'Fazendo teste', esquerda: true}
  ])

  const enviarMensagem = () => {
    const novasMensagens = [...mensagens];
    novasMensagens.push({autor: 'Você', mensagem: texto})
    setMensagens(novasMensagens);
    setTexto('');
  }

  return (
    <View style={{flex: 1, padding: 10}}>
      <View style={{flex:1}}>
        <Mensagem msg={{autor: 'Carlos', mensagem: 'Blablabla', esquerda: true}} />

      </View>
      

      <View style={styles.containerMensagem}>
        <TextInput value={texto} style={styles.input} onChangeText={(texto) => setTexto(texto)} placeholder="Digite sua mensagem"/>
        <Button title="Enviar" onPress={enviarMensagem} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  containerMensagem: {flexDirection:'row'},
  input: { flex: 1, padding: 2, backgroundColor: 'lightgrey'}
  
});