import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:solaragent/auth.dart';

class NotificationScreen extends StatefulWidget {
  const NotificationScreen({super.key});

  @override
  State<NotificationScreen> createState() => _NotificationScreenState();
}

class _NotificationScreenState extends State<NotificationScreen> {
  final notificationEndpoint =
      Uri.parse('https://id.solsynth.dev/api/notifications?skip=0&take=25');

  List<dynamic> notifications = List.empty();

  @override
  void initState() {
    super.initState();
    pullNotifications();
  }

  Future<void> pullNotifications() async {
    if (await authClient.isAuthorized()) {
      var res = await authClient.client!.get(notificationEndpoint);
      if (res.statusCode == 200) {
        setState(() {
          notifications = jsonDecode(utf8.decode(res.bodyBytes))["data"];
        });
      }
    }
  }

  Future<void> markAsRead(element) async {
    if (authClient.client != null) {
      var id = element['id'];
      var uri = Uri.parse('https://id.solsynth.dev/api/notifications/$id/read');
      await authClient.client!.put(uri);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RefreshIndicator(
        onRefresh: pullNotifications,
        child: CustomScrollView(
          slivers: [
            // Title
            SliverToBoxAdapter(
              child: Padding(
                padding: const EdgeInsets.only(left: 10, right: 10, top: 20),
                child: ListTile(
                  title: Text(
                    'Notifications',
                    style: Theme.of(context).textTheme.headlineSmall,
                  ),
                ),
              ),
            ),
            // Content
            notifications.isEmpty
                ? SliverToBoxAdapter(
                    child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      color: Colors.grey[300],
                      child: const ListTile(
                        leading: Icon(Icons.check),
                        title: Text('You\'re done!'),
                        subtitle: Text(
                          'There are no notifications unread for you.',
                        ),
                      ),
                    ),
                  )
                : SliverList.builder(
                    itemCount: notifications.length,
                    itemBuilder: (BuildContext context, int index) {
                      var element = notifications[index];
                      return Dismissible(
                        key: Key('notification-$index'),
                        onDismissed: (direction) {
                          var subject = element["subject"];
                          markAsRead(element).then((value) {
                            ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(
                                content: RichText(
                                  text: TextSpan(children: [
                                    TextSpan(
                                      text: subject,
                                      style: const TextStyle(
                                          fontWeight: FontWeight.bold),
                                    ),
                                    const TextSpan(
                                      text: " is marked as read",
                                    )
                                  ]),
                                ),
                              ),
                            );
                          });
                          setState(() {
                            notifications.removeAt(index);
                          });
                        },
                        background: Container(
                          color: Colors.green,
                        ),
                        child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                          child: ListTile(
                            title: Text(element["subject"]),
                            subtitle: Text(element["content"]),
                          ),
                        ),
                      );
                    },
                  ),
            // Tips
            SliverToBoxAdapter(
              child: Container(
                padding: const EdgeInsets.only(top: 12),
                child: Text(
                  "Pull to refresh, swipe to dismiss",
                  textAlign: TextAlign.center,
                  style: Theme.of(context).textTheme.bodySmall,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}