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

const ImageUpload = ({ 
  value = null, 
  onChange,
  error = null,
  containerStyle,
  uploadButtonStyle,
  customIcon,
  customText,
  customDescription,
  label = 'Profil Resmi'
}) => {
  const handleSelectImage = async () => {
    const permissionResult = await ImagePicker.requestMediaLbugünYapryPermissionsAsync();
    
    if (permissionResult.granted === false) {
      if (typeof onChange === 'function') {
        onChange(null, 'permission-denied');
      }
      return;
    }

    const result = await ImagePicker.launchImageLbugünYapryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 0.8,
      maxWidth: 500,
      maxHeight: 500,
    });

    if (!result.canceled && result.assets && result.assets.length > 0) {
      if (typeof onChange === 'function') {
        onChange(result.assets[0].uri);
      }
    }
  };

  const renderIcon = () => {
    if (customIcon) {
      return <Ionicons name={customIcon} size={24} color={COLOR_SCALES.tertiary[40]} />;
    }
    return <Ionicons name="person-circle" size={24} color={COLOR_SCALES.primary[50]} />;
  };

  const renderUploadText = () => {
    if (customText) {
      return <Text style={styles.uploadText}>{customText}</Text>;
    }
    return (
      <Text style={styles.uploadText}>
        Profil Resmini <Text style={styles.highlight}>bilgisayarınızdan veya telefonunuzdan</Text> seçin
      </Text>
    );
  };

  const renderDescription = () => {
    const descText = customDescription || "Maksimum 5 MB dosyalara izin verilir";
    return <Text style={styles.description}>{descText}</Text>;
  };

  return (
    <View style={[styles.container, containerStyle]}>
      <TouchableOpacity
        style={[styles.uploadButton, uploadButtonStyle]}
        onPress={handleSelectImage}
        activeOpacity={0.7}
      >
        {renderIcon()}
        {renderUploadText()}
      </TouchableOpacity>

      {renderDescription()}

      {error && (
        <Text style={styles.errorText}>{error}</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginBottom: 16,
  },
  uploadButton: {
    borderWidth: 1,
    borderStyle: 'dashed',
    borderColor: COLOR_SCALES.primary[50],
    borderRadius: 12,
    backgroundColor: "#fff",
    padding: 16,
    alignItems: 'center',
    justifyContent: 'center',
  },
  uploadContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  uploadText: {
    ...paragraph['S/Medium'],
    color: COLOR_SCALES.colorGray[70],
    marginTop: 12,
    textAlign: 'center',
  },
  highlight: {
    color: COLOR_SCALES.primary[50],
  },
  description: {
    ...paragraph['XS/Regular'],
    color: COLOR_SCALES.colorGray[50],
    marginTop: 8,
    textAlign: 'center',
  },
  errorText: {
    ...paragraph['XS/Regular'],
    color: "#DB0020",
    marginTop: 4,
    textAlign: 'center',
  },
});

export default ImageUpload;