tm_app/lib/views/notification/pages/d_notification_page.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:tm_app/core/theme/colors.dart';
import 'package:tm_app/core/utils/size_config.dart';
import 'package:tm_app/view_models/notification_view_model.dart';
import 'package:tm_app/views/notification/strings/notification_strings.dart';
import 'package:tm_app/views/shared/desktop_navigation_widget.dart';
import 'package:tm_app/views/shared/page_selection_dialog.dart';

import '../../shared/main_tab_bar.dart';
import '../widgets/notification_all_tab.dart';
import '../widgets/notification_important_tab.dart';
import '../widgets/notification_unread_tab.dart';

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

  @override
  State<DesktopNotificationPage> createState() =>
      _DesktopNotificationPageState();
}

class _DesktopNotificationPageState extends State<DesktopNotificationPage>
    with SingleTickerProviderStateMixin {
  late TabController controller;

  @override
  void initState() {
    super.initState();
    controller = TabController(length: 3, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    final viewModel = context.watch<NotificationViewModel>();

    return Scaffold(
      backgroundColor: AppColors.backgroundColor,
      body: Column(
        children: [
          const DesktopNavigationWidget(currentIndex: 3),
          SizedBox(height: 60.0.h()),
          Expanded(
            child: Center(
              child: SizedBox(
                width: 740,
                child: Column(
                  children: [
                    MainTabBar(
                      controller: controller,
                      titles: [
                        NotificationStrings.all,
                        NotificationStrings.unread,
                        NotificationStrings.important,
                      ],
                    ),
                    SizedBox(height: 12.0.h()),
                    Padding(
                      padding: EdgeInsetsDirectional.only(end: 24.0.w()),
                      child: Align(
                        alignment: Alignment.centerRight,
                        child: InkWell(
                          onTap: () {
                            viewModel.markAllAsRead(context);
                          },
                          borderRadius: BorderRadius.circular(99),
                          child: Container(
                            width: 132.0.w(),
                            height: 32.0.h(),
                            decoration: BoxDecoration(
                              color: AppColors.primary20,
                              borderRadius: BorderRadius.circular(99),
                            ),
                            child: Center(
                              child: Text(
                                NotificationStrings.markAllAsReadButton,
                                style: TextStyle(
                                  fontSize: 14.0.sp(),
                                  fontWeight: FontWeight.w500,
                                  color: AppColors.mainBlue,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 12.0.h()),
                    viewModel.isLoading
                        ? Container()
                        : Expanded(
                          child: TabBarView(
                            controller: controller,
                            children: const [
                              NotificationAllTab(),
                              NotificationUnreadTab(),
                              NotificationImportantTab(),
                            ],
                          ),
                        ),
                    if (viewModel.isLoading) ...[
                     const Spacer(),
                      const Center(
                        child: CircularProgressIndicator(
                          color: AppColors.secondary50,
                        ),
                      ),
                     const Spacer(),
                    ],
                    SizedBox(height: 10.0.h()),
                    Row(
                      children: [
                        const Spacer(),
                        Text(
                          NotificationStrings.page,
                          style: TextStyle(
                            fontSize: 13.0.sp(),
                            fontWeight: FontWeight.w300,
                            color: AppColors.grey60,
                          ),
                        ),
                        SizedBox(width: 10.0.w()),
                        InkWell(
                          onTap: () async {
                            final selectedPage = await showDialog<int>(
                              context: context,
                              builder:
                                  (context) => PageSelectionDialog(
                                    totalPages: viewModel.totalPages,
                                  ),
                            );

                            if (selectedPage != null) {
                              viewModel.jumpToPage(selectedPage);
                            }
                          },
                          child: Container(
                            decoration: BoxDecoration(
                              border: Border.all(
                                color: AppColors.grey30,
                                width: 1,
                              ),
                              borderRadius: BorderRadius.circular(4),
                            ),
                            child: Row(
                              children: [
                                SizedBox(width: 5.0.w()),
                                Text(
                                  viewModel.currentPage.toString(),
                                  style: TextStyle(
                                    fontSize: 14.0.sp(),
                                    fontWeight: FontWeight.w500,
                                    color: AppColors.grey70,
                                  ),
                                ),
                                SizedBox(width: 5.0.w()),
                                Icon(
                                  Icons.arrow_drop_down,
                                  color: AppColors.grey80,
                                ),
                                SizedBox(width: 5.0.w()),
                              ],
                            ),
                          ),
                        ),
                        SizedBox(width: 5.0.w()),
                        Text(
                          NotificationStrings.of,
                          style: TextStyle(
                            fontSize: 14.0.sp(),
                            fontWeight: FontWeight.w400,
                            color: AppColors.grey60,
                          ),
                        ),
                        SizedBox(width: 5.0.w()),
                        Text(
                          viewModel.totalPages.toString(),
                          style: TextStyle(
                            fontSize: 13.0.sp(),
                            fontWeight: FontWeight.w400,
                            color: AppColors.grey60,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 30.0.h()),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}