ju-react

import React, { useState } from 'react';
import { View, Text, TextInput, Button, Alert, FlatList, Image, TouchableOpacity, StyleSheet } from 'react-native';

export default function App() {
  const [screen, setScreen] = useState('login'); // Define qual tela será exibida
  const [username, setUsername] = useState('jose.silva');
  const [password, setPassword] = useState('123456');
  const [userName, setUserName] = useState('');
  const [userEmail, setUserEmail] = useState([]);
  const [userAddress, setUserAddress] = useState('');
  const [userPhone, setUserPhone] = useState('');
  const [movies, setMovies] = useState([]);


  const handleLogin = () => {
    if (username === 'jose.silva' && password === '123456') {
      setScreen('main');
    } else {
      Alert.alert('Erro', 'Usuário ou senha incorretos!');
    }
  };

  const handleFetchMovies = () => {
    fetch('https://reactnative.dev/movies.json')
      .then(response => response.json())
      .then(data => setMovies(data.movies))
      .catch(() => Alert.alert('Erro', 'Não foi possível carregar os filmes.'));
  };

  // Tela de Login
  if (screen === 'login') {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Login</Text>
        <TextInput
          placeholder="Usuário"
          style={styles.input}
          value={username}
          onChangeText={setUsername}
        />
        <TextInput
          placeholder="Senha"
          style={styles.input}
          secureTextEntry
          value={password}
          onChangeText={setPassword}
        />
        <Button title="Logar" onPress={handleLogin} />
      </View>
    );
  }

  // Tela Principal
  if (screen === 'main') {
    return (
      <View style={styles.container}>
        <Button title="Cadastro de Usuários" onPress={() => setScreen('cadastro')} />
        <Button title="Visualizar Filmes" onPress={() => {
          handleFetchMovies();
          setScreen('filmes');
        }} />
      </View>
    );
  }

  // Tela de Cadastro
  if (screen === 'cadastro') {
    // Função para aplicar a máscara de telefone com DDD
    const handlePhoneChange = (text) => {
      // Remove todos os caracteres não numéricos
      let phone = text.replace(/\D/g, '');

      // Limita o número de caracteres a 11 (considerando o formato "(XX) XXXXX-XXXX")
      if (phone.length > 11) {
        phone = phone.substring(0, 11);
      }

      // Adiciona a máscara
      if (phone.length <= 2) {
        phone = phone.replace(/^(\d{0,2})/, '($1');
      }
      if (phone.length > 2 && phone.length <= 6) {
        phone = phone.replace(/^(\d{2})(\d{0,5})/, '($1) $2');
      }
      if (phone.length > 6) {
        phone = phone.replace(/^(\d{2})(\d{5})(\d{0,4})/, '($1) $2-$3');
      }

      // Atualiza o estado com o telefone formatado
      setUserPhone(phone);
    };

    return (
      <View style={styles.container}>
        <Text style={styles.title}>Cadastro de Usuários</Text>
        <TextInput
          placeholder="Nome"
          style={styles.input}
          value={userName}
          onChangeText={setUserName}
        />
        <TextInput
          placeholder="Endereço"
          style={styles.input}
          value={userAddress}
          onChangeText={setUserAddress}
        />
        <TextInput
          placeholder="Email"
          style={styles.input}
          value={userEmail}
          onChangeText={setUserEmail}
        />
        <TextInput
          placeholder="Telefone"
          style={styles.input}
          value={userPhone}
          maxLength={15}
          onChangeText={handlePhoneChange}
          keyboardType="phone-pad"
        />

        <Button
          title="Salvar"
          onPress={() => {
            Alert.alert('Sucesso', `Usuário ${userName} cadastrado!`);
            setScreen('main');
          }}
        />
      </View>
    );
  }

  // Tela de Filmes
  if (screen === 'filmes') {
    return (
      <FlatList
        data={movies}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => Alert.alert('Filme selecionado', item.title)}
            style={styles.item}
          >
            <Image
              source={{ uri: `https://via.placeholder.com/100x150.png?text=${item.title}`}}
              style={styles.image}
            />
            <View>
              <Text style={styles.title}>{item.title}</Text>
              <Text>{item.releaseYear}</Text>
            </View>
          </TouchableOpacity>
        )}
        ListHeaderComponent={
          <View style={{ padding: 16 }}>
            <Button title="Voltar" onPress={() => setScreen('main')} />
          </View>
        }
      />
    );
  }

  return null;
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 16 },
  input: { width: '80%', height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 12, paddingHorizontal: 8 },
  item: { flexDirection: 'row', marginBottom: 16, padding: 8, backgroundColor: '#f9f9f9' },
  image: { width: 100, height: 150, marginRight: 16 },
});