import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stackwallet/notifications/notification_card.dart';
import 'package:stackwallet/providers/providers.dart';
import 'package:stackwallet/providers/ui/unread_notifications_provider.dart';
import 'package:stackwallet/themes/stack_colors.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/widgets/background.dart';
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart';

class NotificationsView extends ConsumerStatefulWidget {
  const NotificationsView({
    Key? key,
    this.walletId,
  }) : super(key: key);

  final String? walletId;

  static const routeName = "/notifications";

  @override
  ConsumerState<NotificationsView> createState() => _NotificationsViewState();
}

class _NotificationsViewState extends ConsumerState<NotificationsView> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final notifications = widget.walletId == null
        ? ref
            .watch(notificationsProvider.select((value) => value.notifications))
        : ref
            .watch(notificationsProvider.select((value) => value.notifications))
            .where((element) => element.walletId == widget.walletId)
            .toList(growable: false);

    return Background(
      child: Scaffold(
        backgroundColor: Theme.of(context).extension<StackColors>()!.background,
        appBar: AppBar(
          title: Text(
            "Notifications",
            style: STextStyles.navBarTitle(context),
          ),
          leading: AppBarBackButton(
            onPressed: () async {
              Navigator.of(context).pop();
            },
          ),
        ),
        body: Padding(
          padding: const EdgeInsets.all(12),
          child: notifications.isNotEmpty
              ? Column(
                  children: [
                    Expanded(
                      child: ListView.builder(
                        shrinkWrap: true,
                        itemCount: notifications.length,
                        itemBuilder: (builderContext, index) {
                          final notification = notifications[index];
                          if (notification.read == false) {
                            ref
                                .read(unreadNotificationsStateProvider.state)
                                .state
                                .add(notification.id);
                          }
                          return Padding(
                            padding: const EdgeInsets.all(4),
                            child: NotificationCard(
                              notification: notifications[index],
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                )
              : Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(4),
                      child: RoundedWhiteContainer(
                        child: Center(
                          child: FittedBox(
                            fit: BoxFit.scaleDown,
                            child: Text(
                              "Notifications will appear here",
                              style: STextStyles.itemSubtitle(context),
                            ),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
        ),
      ),
    );
  }
}