import React from 'react';
import {
  View,
  StyleSheet,
  Modal,
  TouchableOpacity,
  Pressable,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import Text from '@/components/common/Text';
import { COLOR_SCALES } from '@/theme/colors';
import { paragraph, title } from '@/theme/typography';

const QrImageSourceSheet = ({ visible, onClose, onSelectCamera, onSelectGallery }) => {
  
  const insets = useSafeAreaInsets();

  return (
    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
      <Pressable style={styles.overlay} onPress={onClose}>
        <Pressable
          style={[styles.sheet, { paddingBottom: Math.max(insets.bottom, 16) + 8 }]}
          onPress={(e) => e.stopPropagation()}
        >
          <View style={styles.handle} />
          <Text style={styles.sheetTitle}>Fotoğraf Ekle</Text>
          <Text style={styles.sheetDesc}>Görseli nasıl eklemek istersiniz?</Text>

          <TouchableOpacity style={styles.option} onPress={onSelectCamera} activeOpacity={0.8}>
            <View style={[styles.optionIcon, styles.cameraIcon]}>
              <Ionicons name="camera" size={22} color={COLOR_SCALES.white.white} />
            </View>
            <View style={styles.optionText}>
              <Text style={styles.optionTitle}>Kamera</Text>
              <Text style={styles.optionSubtitle}>Görev sırasında fotoğraf çek</Text>
            </View>
            <Ionicons name="chevron-forward" size={20} color={COLOR_SCALES.colorGray[40]} />
          </TouchableOpacity>

          <TouchableOpacity style={styles.option} onPress={onSelectGallery} activeOpacity={0.8}>
            <View style={[styles.optionIcon, styles.galleryIcon]}>
              <Ionicons name="images" size={22} color={COLOR_SCALES.white.white} />
            </View>
            <View style={styles.optionText}>
              <Text style={styles.optionTitle}>Galeri</Text>
              <Text style={styles.optionSubtitle}>Cihazından görsel seç</Text>
            </View>
            <Ionicons name="chevron-forward" size={20} color={COLOR_SCALES.colorGray[40]} />
          </TouchableOpacity>

          <TouchableOpacity style={styles.cancelBtn} onPress={onClose} activeOpacity={0.8}>
            <Text style={styles.cancelText}>Vazgeç</Text>
          </TouchableOpacity>
        </Pressable>
      </Pressable>
    </Modal>
  );
};

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.45)',
    justifyContent: 'flex-end',
  },
  sheet: {
    backgroundColor: COLOR_SCALES.white.white,
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    paddingHorizontal: 20,
    paddingTop: 12,
  },
  handle: {
    width: 40,
    height: 4,
    borderRadius: 2,
    backgroundColor: COLOR_SCALES.colorGray[20],
    alignSelf: 'center',
    marginBottom: 16,
  },
  sheetTitle: {
    ...title['M/Bold'],
    color: COLOR_SCALES.colorGray[90],
    marginBottom: 4,
  },
  sheetDesc: {
    ...paragraph['S/Regular'],
    color: COLOR_SCALES.colorGray[60],
    marginBottom: 20,
  },
  option: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: COLOR_SCALES.colorGray[10],
    borderRadius: 14,
    padding: 14,
    marginBottom: 10,
    borderWidth: 1,
    borderColor: COLOR_SCALES.colorGray[20],
  },
  optionIcon: {
    width: 44,
    height: 44,
    borderRadius: 22,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 14,
  },
  cameraIcon: {
    backgroundColor: COLOR_SCALES.primary[60],
  },
  galleryIcon: {
    backgroundColor: COLOR_SCALES.primary[50],
  },
  optionText: {
    flex: 1,
  },
  optionTitle: {
    ...paragraph['S/Bold'],
    color: COLOR_SCALES.colorGray[90],
  },
  optionSubtitle: {
    ...paragraph['XS/Regular'],
    color: COLOR_SCALES.colorGray[60],
    marginTop: 2,
  },
  cancelBtn: {
    alignItems: 'center',
    paddingVertical: 14,
    marginTop: 4,
  },
  cancelText: {
    ...paragraph['M/Medium'],
    color: COLOR_SCALES.colorGray[60],
  },
});

export default QrImageSourceSheet;