import React, { useEffect, useState } from 'react';
import { StyleSheet, Alert } from 'react-native';
import { ThemedText } from '@/components/theme/Theme';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import Button from '@/components/theme/buttons/DefaultButton';
import { getUser } from '@/components/services/SecureStore';
import { sendPushNotification } from '@/components/services/notifications/PushNotificationManager';
import type { NotificationMessage } from '@/constants/Types';

const TestPush = () => {
  const scheme = useColorScheme() ?? 'dark';
  const [pushToken, setPushToken] = useState<string | null>(null);

  useEffect(() => {
    const fetchUserData = async () => {
      const user = await getUser();
      if (user) {
        setPushToken(user.pushToken);
      }
    };
    fetchUserData();
  }, []);

  const message: NotificationMessage = {
    sound: 'default',
    title: 'Test push notification',
    body: 'This is a test push notification',
    data: {
      test: 'test',
    },
  };

  const handleSendPushNotification = async () => {
    try {
      await sendPushNotification(pushToken, message);
      Alert.alert('Success', 'Push notification sent successfully.');
    } catch (error) {
      Alert.alert('Error', 'Failed to send push notification.');
    }
  };

  return (
    <Button
      width={220} height={60}
      onPress={handleSendPushNotification}
    >
      <FontAwesome
        name='bell' size={18} 
        color={Colors[scheme].background}
        style={styles.buttonIcon}
      />
      <ThemedText
        style={[
          styles.buttonLabel,
          {color: Colors[scheme].background}
        ]}
      >
        Send Push Notification
      </ThemedText>
    </Button>
  );
};
export default TestPush;

const styles = StyleSheet.create({
  buttonLabel: {
    fontSize: 16,
  },
  buttonIcon: {
    paddingRight: 8,
  },
});