import 'package:cpt_main/modules/notification/item_notification_header.dart';
import 'package:cpt_main/router/page/main_page_router.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/load_state_layout.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';

import 'item_notification.dart';
import 'notification_view_model.dart';

@RoutePage()
class NotificationPage extends HookConsumerWidget {
  const NotificationPage({Key? key}) : super(key: key);

  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(const NotificationPageRoute());
    } else {
      appRouter.push(const NotificationPageRoute());
    }
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.read(notificationViewModelProvider.notifier);
    final state = ref.watch(notificationViewModelProvider);

    useEffect(() {
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => viewModel.fetchList());
      return () {
        // 组件卸载时执行
      };
    }, []);

    return Scaffold(
      appBar: MyAppBar.appBar(context, S.current.notification,
          backgroundColor: context.appColors.whiteBG,
          actions: [
            Center(
                child: MyTextView(
              S.current.mark_all,
              fontSize: 16,
              textColor: context.appColors.textPrimary,
              onClick: viewModel.markAll,
              isFontRegular: true,
              marginRight: 15,
            )),
          ],
          showBottomDivider: false),
      backgroundColor: context.appColors.whiteBG,
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: EasyRefresh(
          controller: viewModel.refreshController,
          onRefresh: viewModel.onRefresh,
          onLoad: viewModel.loadMore,
          child: LoadStateLayout(
            state: state.loadingState,
            errorMessage: state.errorMessage,
            errorRetry: () {
              viewModel.retryRequest();
            },
            successSliverWidget: [
              SliverList(
                  delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return StickyHeader(
                    header: NotificationItemHeader(state.datas[index].groupId),
                    content: Column(
                      children: _buildGroup(state.datas[index].groupDatas!, index),
                    ),
                  );
                },
                childCount: state.datas.length,
              ))
            ],
          ),
        ),
      ),
    );
  }

  //当前组内的子数据
  _buildGroup(List<String> list, int index) {
    return list.map((item) {
      return NotificationItem(item: item, index: index);
    }).toList();
  }
}