import 'package:auto_route/auto_route.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/load_state_layout.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';

import '../../detail/facility_detail_page.dart';
import 'facility_deposit_view_model.dart';
import 'item_facility_deposit.dart';

@RoutePage()
class FacilityDepositScreen extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.read(facilityDepositViewModelProvider.notifier);
    final state = ref.watch(facilityDepositViewModelProvider);

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

    return SizedBox(
      width: double.infinity,
      height: double.infinity,
      child: EasyRefresh(
        controller: viewModel.refreshController,
        onRefresh: viewModel.onRefresh,
        child: LoadStateLayout(
          state: state.loadingState,
          errorMessage: state.errorMessage,
          errorRetry: () {
            viewModel.retryRequest();
          },
          successSliverWidget: [
            // 头布局
            _buildHeaderWidget(context, ref),

            // 列表
            SliverList(
                delegate: SliverChildBuilderDelegate(
              (context, index) {
                return FacilityDepositItem(index: index, item: state.datas[index]).onTap((){
                  FacilityDetailPage.startInstance(context: context);
                });
              },
              childCount: state.datas.length,
            )),

            //脚布局
            _buildFootWidget(context, ref),
          ],
        ),
      ).marginOnly(top: 5, bottom: 5),
    );
  }

  //头布局
  _buildHeaderWidget(BuildContext context, WidgetRef ref) {
    return SliverToBoxAdapter(
      child: Container(
        width: double.infinity,
        margin: const EdgeInsets.only(top: 10, left: 10, right: 10, bottom: 5),
        child: Column(
          children: [
            // 上半部分
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: context.appColors.btnBgDefault,
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(5),
                  topRight: Radius.circular(5),
                ),
              ),
              child: MyTextView(
                S.current.deposit_amount,
                fontSize: 18,
                textAlign: TextAlign.center,
                isFontMedium: true,
                textColor: Colors.white,
              ),
            ),
            // 下半部分
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(26),
              decoration:  BoxDecoration(
                color: context.appColors.whiteSecondBG,
                borderRadius: const BorderRadius.only(
                  bottomLeft: Radius.circular(5),
                  bottomRight: Radius.circular(5),
                ),
              ),
              child: MyTextView(
                "\$ 200.00",
                fontSize: 29,
                fontWeight: FontWeight.w600,
                textAlign: TextAlign.center,
                textColor: context.appColors.textBlack,
              ),
            ),
          ],
        ),
      ),
    );
  }

  //底部的说明文本脚布局
  _buildFootWidget(BuildContext context, WidgetRef ref) {
    return SliverToBoxAdapter(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MyTextView(
            S.current.deposit_desc,
            fontSize: 20,
            marginTop: 14,
            marginRight: 15,
            marginLeft: 20,
            isFontMedium: true,
            textColor: context.appColors.textBlack,
          ),
          MyTextView(
            S.current.deposit_desc_txt,
            marginTop: 14,
            marginBottom: 14,
            marginRight: 15,
            marginLeft: 20,
            fontSize: 15,
            isFontRegular: true,
            textColor: context.appColors.textBlack,
          ),
        ],
      ),
    );
  }
}