import React, { useState } from 'react';
import { View, Button, Image } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { GoogleVisionApiKey } from './config';

const App = () => {
  const [image, setImage] = useState(null);
  const [books, setBooks] = useState([]);

  const pickImage = async () => {
    let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.cancelled) {
      setImage(result.uri);
      analyzeImage(result.uri);
    }
  };

  const analyzeImage = async (uri) => {
    const response = await fetch(uri);
    const blob = await response.blob();

    const formData = new FormData();
    formData.append('file', blob);
    formData.append('key', GoogleVisionApiKey);

    const visionResponse = await fetch(`https://vision.googleapis.com/v1/images:annotate`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        requests: [
          {
            image: {
              content: blob,
            },
            features: [
              { type: 'TEXT_DETECTION', maxResults: 5 },
            ],
          },
        ],
      }),
    });

    const resultJson = await visionResponse.json();
    const detectedTexts = resultJson.responses[0].textAnnotations.map((item) => item.description);
    setBooks(detectedTexts);
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Capture Image" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
      {books.length > 0 && (
        <View>
          {books.map((book, index) => (
            <Text key={index}>{book}</Text>
          ))}
        </View>
      )}
    </View>
  );
};

export default App;