import React from 'react';
import { View, Text, TouchableOpacity, Modal, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { COLOR_SCALES } from '@/theme/colors';
import { title } from '@/theme/typography';
import Input from '@/components/common/Input';
import Button from '@/components/common/Button';

const ReportFormModal = ({ 
  visible, 
  onClose, 
  reportReason, 
  onReportReasonChange, 
  onSubmit,
  submitAttempted 
}) => {
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="slide"
      onRequestClose={onClose}
    >
      <View style={styles.modalOverlay}>
        <View style={styles.reportModalContent}>
          <View style={styles.reportModalHeader}>
            <Text style={styles.reportModalTitle}>Şikayet Et</Text>
            <TouchableOpacity onPress={onClose}>
              <Ionicons name="close" size={24} color={COLOR_SCALES.colorGray[70]} />
            </TouchableOpacity>
          </View>
          
          <Text style={styles.reportModalSubtitle}>
            Bu kullanıcıyı neden şikayet etmek istiyorsunuz?
          </Text>
          
          <Input
            multiline
            placeholder="Şikayet nedeninizi yazınız..."
            value={reportReason}
            onChangeText={onReportReasonChange}
            error={reportReason.trim() === '' && submitAttempted ? 'Lütfen şikayet nedeninizi belirtiniz' : ''}
            style={styles.reportInputContainer}
          />
          
          <View style={styles.reportButtonsContainer}>
            <Button
              label="İptal"
              variant="secondary"
              onPress={onClose}
              style={styles.reportButton}
            />
            
            <Button
              label="Gönder"
              variant="danger"
              onPress={onSubmit}
              style={styles.reportButton}
            />
          </View>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'flex-end',
  },
  reportModalContent: {
    backgroundColor: "#fff",
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    paddingHorizontal: 20,
    paddingBottom: 32,
    width: '100%',
  },
  reportModalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 16,
    borderBottomWidth: 1,
    borderBottomColor: COLOR_SCALES.colorGray[20],
  },
  reportModalTitle: {
    ...title['L/SemiBold'],
    color: COLOR_SCALES.colorGray[90],
  },
  reportModalSubtitle: {
    ...title['S/Regular'],
    color: COLOR_SCALES.colorGray[70],
    marginTop: 16,
    marginBottom: 12,
  },
  reportInputContainer: {
    marginBottom: 20,
  },
  reportButtonsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  reportButton: {
    flex: 1,
    marginHorizontal: 8,
  },
});

export default ReportFormModal;