App.jsx

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Image,
  FlatList,
  StyleSheet,
  Alert,
  StatusBar,
} from 'react-native';
import * as FileSystem from 'expo-file-system';
import * as MediaLibrary from 'expo-media-library';
import { LinearGradient } from 'expo-linear-gradient'; // Import LinearGradient component

const App = () => {
  const [qrText, setQrText] = useState('');
  const [qrImage, setQrImage] = useState('');
  const [showQR, setShowQR] = useState(false);
  const [alertMessage, setAlertMessage] = useState('');
  const [filteredSuggestions, setFilteredSuggestions] = useState([]);

  const suggestions = [
    'https://www.google.com',
    'https://www.facebook.com',
    'https://www.instagram.com',
    'https://www.amazon.com',
    'https://www.openAI.com',
    'https://www.x.com',
    'https://www.youtube.com',
    'Hello, World!',
    'React Native QR Generator',
  ];

  // Filter suggestions based on input
  const handleInputChange = (text) => {
    setQrText(text);
    if (text.trim().length > 0) {
      const filtered = suggestions.filter((suggestion) =>
        suggestion.toLowerCase().includes(text.toLowerCase())
      );
      setFilteredSuggestions(filtered);
    } else {
      setFilteredSuggestions([]);
    }
  };

  // Select a suggestion
  const selectSuggestion = (suggestion) => {
    setQrText(suggestion);
    setFilteredSuggestions([]);
  };

  // Generate QR Code URL
  const generateQR = () => {
    if (qrText.trim().length > 0) {
      const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
        qrText.trim()
      )}`;
      setQrImage(qrUrl);
      setShowQR(false);
      setAlertMessage('QR Code generated successfully!');
      setTimeout(() => setAlertMessage(''), 3000); // Clear alert after 3 seconds
    } else {
      Alert.alert('Input Error', 'Please enter some text or URL!');
    }
  };

  // Toggle QR Code Visibility
  const toggleQR = () => {
    if (!qrImage) {
      Alert.alert('No QR Code', 'Please generate the QR code first!');
    } else {
      setShowQR((prev) => !prev);
    }
  };

  // Download QR Code
  const downloadQR = async () => {
    if (!qrImage) {
      Alert.alert(
        'No QR Code',
        'Please generate the QR code before downloading!'
      );
      return;
    }
    try {
      const { status } = await MediaLibrary.requestPermissionsAsync();
      if (status !== 'granted') {
        Alert.alert(
          'Permission Denied',
          'Permission to access media library is required!'
        );
        return;
      }

      // Download image
      const localUri = `${FileSystem.documentDirectory}qrcode.png`;
      const downloadedFile = await FileSystem.downloadAsync(qrImage, localUri);

      // Save to media library
      await MediaLibrary.saveToLibraryAsync(downloadedFile.uri);
      Alert.alert(
        'Success',
        'QR Code downloaded successfully to your gallery!'
      );
    } catch (error) {
      Alert.alert('Error', 'Failed to download the QR Code.');
    }
  };

  return (
    <LinearGradient
      colors={['#C4D9FF', '#4DA1A9']} // Starting and ending colors of the gradient
      style={styles.container}>
      {/* Customize the Status Bar */}
      <StatusBar barStyle="dark-content" backgroundColor="#2E5077" />

      {/* App Bar */}
      <View style={styles.appBar}>
        <Text style={styles.appBarText}>QRgeN</Text>
      </View>

      <Text style={styles.title}>Enter your Text or URL</Text>
      <TextInput
        style={styles.input}
        placeholder="Text or URL"
        value={qrText}
        onChangeText={handleInputChange}
      />

      {/* Suggestions */}
      {filteredSuggestions.length > 0 && (
        <FlatList
          style={styles.suggestionsList}
          data={filteredSuggestions}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => (
            <TouchableOpacity
              onPress={() => selectSuggestion(item)}
              style={styles.suggestionItem}>
              <Text>{item}</Text>
            </TouchableOpacity>
          )}
        />
      )}

      <TouchableOpacity style={styles.button} onPress={generateQR}>
        <Text style={styles.buttonText}>Generate QR Code</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.card} onPress={toggleQR}>
        <Text style={styles.cardText}>
          {showQR ? 'QR Code:' : 'Tap to Show QR Code'}
        </Text>
        {showQR && qrImage && (
          <View style={styles.qrContainer}>
            <Image source={{ uri: qrImage }} style={styles.qrImage} />
          </View>
        )}
      </TouchableOpacity>

      {qrImage && (
        <TouchableOpacity style={styles.downloadButton} onPress={downloadQR}>
          <Text style={styles.buttonText}>Download QR Code</Text>
        </TouchableOpacity>
      )}

      {alertMessage ? (
        <Text style={styles.alertMessage}>{alertMessage}</Text>
      ) : null}
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    padding: 20,
  },
  appBar: {
    width: '150%',
    height: 60,
    backgroundColor: '#2E5077',
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 3, // For shadow effect
    marginBottom: 50,
    marginTop: 30,
  },
  appBarText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
    fontFamily: 'serif',
    marginBottom: 10,
  },
  input: {
    width: '90%',
    height: 50,
    borderColor: '#3c3b3b',
    borderWidth: 3,
    borderRadius: 5,
    padding: 10,
    marginBottom: 20,
    backgroundColor: '#fff',
  },
  suggestionsList: {
    width: '90%',
    backgroundColor: '#fff',
    borderRadius: 5,
    borderColor: '#ccc',
    borderWidth: 1,
    marginBottom: 10,
    maxHeight: 100,
  },
  suggestionItem: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  button: {
    backgroundColor: '#08478a',
    paddingVertical: 15,
    paddingHorizontal: 50,
    borderRadius: 10,
    marginVertical: 10,
    alignItems: 'center',
  },
  buttonText: {
    color: '#fff',
    fontSize: 15,
    fontWeight: '500',
  },
  card: {
    width: '80%',
    padding: 20,
    backgroundColor: '#fff',
    borderRadius: 15,
    elevation: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    alignItems: 'center',
    marginTop: 20,
    marginBottom: 10,
  },
  cardText: {
    fontSize: 18,
    color: '#555',
    marginBottom: 10,
    textAlign: 'center',
  },
  qrContainer: {
    marginTop: 15,
    width: 200,
    height: 200,
  },
  qrImage: {
    width: '100%',
    height: '100%',
    borderRadius: 15,
  },
  downloadButton: {
    backgroundColor: '#333',
    paddingVertical: 15,
    paddingHorizontal: 50,
    borderRadius: 10,
    marginVertical: 10,
    alignItems: 'center',
  },
  alertMessage: {
    marginTop: 15,
    fontSize: 16,
    color: 'green',
    fontWeight: '500',
    textAlign: 'center',
  },
});
export default App;