import React, { useState } from 'react';
import { View, TouchableOpacity, Image, StyleSheet, Modal } from 'react-native';

import IMAGES from '../constants/Images';
import CustomCamera from './CustomCamera';

const CameraScreen = () => {
  const [showCamera, setShowCamera] = useState(false);
  const [imageUri, setImageUri] = useState(null);

  const handleImageCaptured = (photo) => {
    setImageUri(photo.uri);
    setShowCamera(false);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => setShowCamera(true)}>
        <Image
          source={imageUri ? { uri: imageUri } : IMAGES.cameraIcon}
          style={styles.imagePreview}
        />
      </TouchableOpacity>

      {/* Fullscreen Modal Camera */}
      <Modal visible={showCamera} animationType="slide" presentationStyle="fullScreen">
        <CustomCamera
          onImageCaptured={handleImageCaptured}
          onClose={() => setShowCamera(false)}
        />
      </Modal>
    </View>
  );
};

export default CameraScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  imagePreview: {
    width: 150,
    height: 150,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#ccc',
  },
});
