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_button.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';

import '../../router/page/payment_page_router.dart';
import '../payment/manage/item_manage.dart';
import 'choose_card_view_model.dart';

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

  //启动当前页面
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(const ChooseCardPageRoute());
    } else {
      appRouter.push(const ChooseCardPageRoute());
    }
  }

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

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

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        S.current.payment,
        backgroundColor: context.appColors.whiteBG,
      ),
      backgroundColor: context.appColors.backgroundDark,
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Column(
          children: [
            EasyRefresh(
              controller: viewModel.refreshController,
              onRefresh: viewModel.onRefresh,
              onLoad: viewModel.loadMore,
              child: LoadStateLayout(
                state: state.loadingState,
                errorMessage: state.errorMessage,
                errorRetry: () {
                  viewModel.retryRequest();
                },
                successSliverWidget: [
                  //添加新卡
                  SliverToBoxAdapter(
                    child: MyTextView(
                      S.current.add_new_card,
                      fontSize: 16,
                      textAlign: TextAlign.center,
                      marginLeft: 22.5,
                      marginTop: 14,
                      marginBottom: 15,
                      marginRight: 22.5,
                      cornerRadius: 5,
                      paddingTop: 12,
                      paddingBottom: 12,
                      onClick: viewModel.gotoAddCardPage,
                      borderWidth: 1,
                      borderColor: context.appColors.textPrimary,
                      isFontMedium: true,
                      textColor: context.appColors.textPrimary,
                    ),
                  ),

                  //列表
                  SliverList(
                      delegate: SliverChildBuilderDelegate(
                    (context, index) {
                      return ManageItem(
                        index: index,
                        item: state.datas[index],
                        deleteAction: () {
                          viewModel.showDeleteDialog(index);
                        },
                      ).onTap(() {
                        viewModel.setAsPrimary(index);
                      });
                    },
                    childCount: state.datas.length,
                  ))
                ],
              ),
            ).marginOnly(top: 5, bottom: 5).expanded(),

            //底部按钮(其实就是返回)
            MyButton(
              onPressed: () {
                context.appRouter.maybePop();
              },
              text: S.current.next,
              textColor: Colors.white,
              backgroundColor: context.appColors.btnBgDefault,
              fontWeight: FontWeight.w500,
              type: ClickType.throttle,
              fontSize: 16,
              minHeight: 50,
              radius: 0,
            ),
          ],
        ),
      ),
    );
  }
}