import {

  View,

  Text,

  StyleSheet,

  ScrollView,

  KeyboardAvoidingView,

  Platform,

  Alert,

} from "react-native";

import { useState, useEffect } from "react";

import * as Notifications from "expo-notifications";

import { useAuth } from "@/context/AuthContext";

import { useLocalSearchParams } from "expo-router";

import { StatusBar } from "expo-status-bar";

import { SafeAreaView } from "react-native-safe-area-context";

import { useThemeColor } from "@/hooks/use-theme-color";

import { Button } from "@/components/ui/Button";

import { Colors, Spacing } from "@/constants/theme";

import { Card } from "@/components/ui/Cards";

import { Section, SectionHeader } from "@/components/ui/Sections";

type NotificationParams = {

  title?: string;

  body?: string;

  notificationId?: string;

};

Notifications.setNotificationHandler({

  handleNotification: async () => ({

    shouldPlaySound: true,

    shouldSetBadge: false,

    shouldShowBanner: true,

    shouldShowList: true,

  }),

});

export default function NotificationsPage() {

  const { user } = useAuth();

  const params = useLocalSearchParams<NotificationParams>();

  const [expoPushToken, setExpoPushToken] = useState(user?.pushToken);

  useEffect(() => {

    if (user) {

      setExpoPushToken(user.pushToken);

    }

  }, [user]);

  async function sendPushNotification() {

    if (expoPushToken) {

      const message = {

        to: expoPushToken,

        sound: "default",

        title: "Oi meu querido",

        body: "Vamo escutar um The Doors",

        data: { screen: "notifications" },

      };

      await fetch("https://exp.host/--/api/v2/push/send", {

        method: "POST",

        headers: {

          Accept: "application/json",

          "Accept-encoding": "gzip, deflate",

          "Content-Type": "application/json",

        },

        body: JSON.stringify(message),

      });

    }

  }

  return (

    <SafeAreaView style={styles.container}>

      <StatusBar style={"dark"} />

      <KeyboardAvoidingView behavior="height" style={styles.keyboardView}>

        <ScrollView

          contentContainerStyle={styles.scrollContainer}

          showsVerticalScrollIndicator={false}

        >

          <Section>

            <SectionHeader title="Recebidas" />

            <Card style={{ padding: Spacing.cardGap }}>

              <Text>Title: {params.title}</Text>

              <Text>Body: {params.body}</Text>

              <Text>

                Data:{" "}

                {params.notificationId && JSON.stringify(params.notificationId)}

              </Text>

            </Card>

          </Section>

          <Button title="Quer ver uma coisa?" onPress={sendPushNotification} />

        </ScrollView>

      </KeyboardAvoidingView>

    </SafeAreaView>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: Colors.light.background,

  },

  keyboardView: {

    flex: 1,

  },

  scrollContainer: {

    flexGrow: 1,

    paddingHorizontal: 24,

    justifyContent: "start",

    minHeight: "100%",

  },

  header: {

    alignItems: "left",

    marginBottom: 40,

  },

});