import React from 'react';
import { View, Text, TouchableOpacity, Modal, StyleSheet, Alert } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { COLOR_SCALES } from '@/theme/colors';
import { title } from '@/theme/typography';
import * as ImagePicker from 'expo-image-picker';
import * as DocumentPicker from 'expo-document-picker';

const AttachmentModal = ({ visible, onClose, onImageSelected }) => {
  const pickImageFromCamera = async () => {
    try {
      const result = await ImagePicker.launchCameraAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 0.8, // 0.8 means 80% quality
      });
      
      if (!result.canceled) {
        onImageSelected(result.assets[0].uri);
        onClose();
      }
    } catch (error) {
      Alert.alert('Hata', 'Kamera erişiminde bir sorun oluştu');
    }
  };
  
  const pickImageFromGallery = async () => {
    try {
      const result = await ImagePicker.launchImageLbugünYapryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 0.8,
      });
      
      if (!result.canceled) {
        onImageSelected(result.assets[0].uri);
        onClose();
      }
    } catch (error) {
      Alert.alert('Hata', 'Galeriye erişiminde bir sorun oluştu');
    }
  };
  
  const pickDocument = async () => {
    try {
      const result = await DocumentPicker.getDocumentAsync({
        type: '*/*',
        copyToCacheDirectory: true,
      });
      
      if (result.canceled === false) {
        // In a real app, you would handle the document differently
        Alert.alert('Başarılı', `${result.assets[0].name} seçildi. Dosya boyutu: ${(result.assets[0].size / 1024).toFixed(2)} KB`);
        onClose();
      }
    } catch (error) {
      Alert.alert('Hata', 'Dosya seçiminde bir sorun oluştu');
    }
  };
  
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="slide"
      onRequestClose={onClose}
    >
      <TouchableOpacity 
        style={styles.modalOverlay}
        activeOpacity={1}
        onPress={onClose}
      >
        <View style={styles.modalContent}>
          <View style={styles.modalHandle} />
          
          <Text style={styles.modalTitle}>Dosya Ekle</Text>
          
          <View style={styles.attachmentGrid}>
            <TouchableOpacity 
              style={styles.attachmentGridItem}
              onPress={pickImageFromCamera}
            >
              <View style={[styles.attachmentIconCircle, { backgroundColor: COLOR_SCALES.primary[10] }]}>
                <Ionicons name="camera" size={24} color={COLOR_SCALES.primary[60]} />
              </View>
              <Text style={styles.attachmentLabel}>Kamera</Text>
            </TouchableOpacity>
            
            <TouchableOpacity 
              style={styles.attachmentGridItem}
              onPress={pickImageFromGallery}
            >
              <View style={[styles.attachmentIconCircle, { backgroundColor: COLOR_SCALES.secondary[10] }]}>
                <Ionicons name="image" size={24} color={COLOR_SCALES.secondary[60]} />
              </View>
              <Text style={styles.attachmentLabel}>Galeri</Text>
            </TouchableOpacity>
            
            <TouchableOpacity 
              style={styles.attachmentGridItem}
              onPress={pickDocument}
            >
              <View style={[styles.attachmentIconCircle, { backgroundColor: COLOR_SCALES.tertiary[10] }]}>
                <Ionicons name="document-text" size={24} color={COLOR_SCALES.tertiary[60]} />
              </View>
              <Text style={styles.attachmentLabel}>Dosya</Text>
            </TouchableOpacity>
          </View>
          
          <TouchableOpacity 
            style={styles.cancelButton}
            onPress={onClose}
          >
            <Text style={styles.cancelButtonText}>İptal</Text>
          </TouchableOpacity>
        </View>
      </TouchableOpacity>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: "#fff",
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    paddingHorizontal: 20,
    paddingTop: 12,
    paddingBottom: 32,
    alignItems: 'center',
  },
  modalHandle: {
    width: 40,
    height: 4,
    backgroundColor: COLOR_SCALES.colorGray[30],
    borderRadius: 2,
    marginBottom: 16,
  },
  modalTitle: {
    ...title['M/SemiBold'],
    color: COLOR_SCALES.colorGray[90],
    marginBottom: 24,
  },
  attachmentGrid: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: '100%',
    marginBottom: 30,
  },
  attachmentGridItem: {
    alignItems: 'center',
    width: '30%',
  },
  attachmentIconCircle: {
    width: 60,
    height: 60,
    borderRadius: 30,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 8,
  },
  attachmentLabel: {
    ...title['S/Regular'],
    color: COLOR_SCALES.colorGray[80],
  },
  cancelButton: {
    backgroundColor: COLOR_SCALES.colorGray[10],
    paddingVertical: 14,
    paddingHorizontal: 24,
    borderRadius: 12,
    width: '100%',
    alignItems: 'center',
  },
  cancelButtonText: {
    ...title['M/SemiBold'],
    color: COLOR_SCALES.primary[60],
  },
});

export default AttachmentModal;