import React from 'react';
import { createThemedStyles, themedColor } from '../../theme';
import {ActivityIndicator, Modal, Pressable, Text, View} from 'react-native';

export function AttachmentPickerStatusModal({
  isError,
  message,
  onClose,
  title,
}: {
  isError?: boolean;
  message: string;
  onClose?: () => void;
  title: string;
}) {
  return (
    <Modal animationType="fade" transparent visible onRequestClose={onClose}>
      <View style={styles.backdrop}>
        <View style={styles.sheet}>
          {isError ? null : <ActivityIndicator color={themedColor('#F4F4F5')} style={styles.loader} />}
          <Text style={styles.title}>{title}</Text>
          <Text style={[styles.message, isError ? styles.error : undefined]}>{message}</Text>
          {onClose ? (
            <Pressable accessibilityRole="button" onPress={onClose} style={styles.closeButton}>
              <Text style={styles.closeText}>{isError ? 'Close' : 'Cancel'}</Text>
            </Pressable>
          ) : null}
        </View>
      </View>
    </Modal>
  );
}

const styles = createThemedStyles({
  backdrop: {
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.62)',
    flex: 1,
    justifyContent: 'flex-end',
    padding: 16,
  },
  closeButton: {
    alignItems: 'center',
    borderRadius: 16,
    height: 48,
    justifyContent: 'center',
    marginTop: 10,
  },
  closeText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '700',
  },
  error: {
    color: '#FF6B6B',
  },
  loader: {
    marginBottom: 10,
  },
  message: {
    color: '#A1A1AA',
    fontSize: 13,
    lineHeight: 18,
    marginTop: 8,
    textAlign: 'center',
  },
  sheet: {
    backgroundColor: '#050505',
    borderColor: '#2A2A2D',
    borderRadius: 28,
    borderWidth: 1,
    padding: 16,
    width: '100%',
  },
  title: {
    color: '#FFFFFF',
    fontSize: 20,
    fontWeight: '800',
    textAlign: 'center',
  },
});