import 'package:cheminova/provider/notification_provider.dart';
import 'package:cheminova/utils/string_extension.dart';
import 'package:cheminova/widgets/common_app_bar.dart';
import 'package:cheminova/widgets/common_background.dart';
import 'package:cheminova/widgets/common_drawer.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';

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

  @override
  State<AnnouncementScreen> createState() => _AnnouncementScreenState();
}

class _AnnouncementScreenState extends State<AnnouncementScreen> {
  int currentPage = 1;
  final int announcementsPerPage = 10;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      context
          .read<NotificationProvider>()
          .getAnnouncement(currentPage, announcementsPerPage);
    });
  }

  void _changePage(int newPage) {
    setState(() {
      currentPage = newPage;
      WidgetsBinding.instance.addPostFrameCallback((_) {
        context
            .read<NotificationProvider>()
            .getAnnouncement(currentPage, announcementsPerPage);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    final notificationProvider = context.watch<NotificationProvider>();
    final totalAnnouncements = notificationProvider.totalAnnouncements;
    final totalPages = (totalAnnouncements / announcementsPerPage).ceil();
    // final startIndex = (currentPage - 1) * announcementsPerPage;
    // final endIndex = startIndex + announcementsPerPage;
    // final announcementsToShow = notificationProvider.announcementList.sublist(
    //     startIndex,
    //     endIndex < totalAnnouncements ? endIndex : totalAnnouncements);

    return CommonBackground(
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: CommonAppBar(
          actions: [
            IconButton(
              onPressed: () {
                Navigator.pop(context);
              },
              icon: Image.asset('assets/Back_attendance.png'),
              padding: const EdgeInsets.only(right: 20),
            ),
          ],
          title: const Text('Announcement',
              style: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                  fontWeight: FontWeight.w400,
                  fontFamily: 'Anek')),
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
        drawer: const CommonDrawer(),
        body: Stack(
          children: [
            ListView.builder(
              itemCount: notificationProvider.announcementList.length,
              itemBuilder: (context, index) {
                return Container(
                  margin: const EdgeInsets.only(
                    bottom: 10,
                    left: 10,
                    right: 10,
                  ),
                  decoration: const BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(10))),
                  child: ListTile(
                    title: const Text('Message:'),
                    subtitle: Text(
                      '${notificationProvider.announcementList[index].message.capitalize()}\nDate: ${DateFormat("dd/MM/yyyy").format(
                        DateTime.parse(
                            notificationProvider.announcementList[index].date),
                      )}',
                    ),
                  ),
                );
              },
            ),
            if (notificationProvider.isLoading)
              Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  color: Colors.black.withOpacity(0.2),
                ),
                child: const Center(
                  child: CircularProgressIndicator(),
                ),
              ),
            Positioned(
              bottom: 16,
              left: 0,
              right: 0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(totalPages, (index) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 4.0),
                    child: ElevatedButton(
                      onPressed: () => _changePage(index + 1),
                      style: ElevatedButton.styleFrom(
                        backgroundColor: currentPage == index + 1
                            ? Colors.blue
                            : Colors.grey,
                      ),
                      child: Text('${index + 1}'),
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}