import 'package:auto_route/auto_route.dart';
import 'package:cs_resources/generated/assets.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:shared/utils/log_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/load_state_layout.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';

@RoutePage()
class InfoScreen extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      physics: const BouncingScrollPhysics(),
      child: Container(
        width: double.infinity,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            MyTextView(
              S.current.pay_fees_with,
              fontSize: 19,
              marginTop: 23,
              marginBottom: 11,
              isFontMedium: true,
              textColor: context.appColors.textBlack,
            ),
            Stack(
              children: [
                const MyAssetImage(Assets.paymentInfoTopImage, width: double.infinity),
                SizedBox(
                  width: double.infinity,
                  child: Column(
                    children: [
                      RichText(
                        text: TextSpan(
                          style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: context.appColors.textPrimary),
                          children: <TextSpan>[
                            const TextSpan(
                              text: "YY Home",
                            ),
                            TextSpan(
                              text: " Pay",
                              style: TextStyle(color: context.appColors.textBlack),
                            ),
                          ],
                        ),
                      ),
                      MyTextView(
                        S.current.convert_large_recurring_payments_to,
                        fontSize: 15,
                        marginTop: 12,
                        marginBottom: 17,
                        isFontMedium: true,
                        textColor: context.appColors.textBlack,
                      ),
                      MyTextView(
                        S.current.rewards,
                        fontSize: 15,
                        isFontMedium: true,
                        cornerRadius: 3,
                        paddingLeft: 10,
                        paddingRight: 10,
                        paddingTop: 6,
                        marginBottom: 35,
                        paddingBottom: 6,
                        backgroundColor: context.appColors.btnBgDefault,
                        textColor: Colors.white,
                      ),

                      //银行卡组
                      const MyAssetImage(
                        Assets.paymentInfoCardGroup,
                        width: 246,
                        height: 62,
                      ),
                    ],
                  ),
                )
              ],
            ),
            RichText(
              text: TextSpan(
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: context.appColors.textPrimary),
                children: <TextSpan>[
                  const TextSpan(
                    text: "YY Home",
                  ),
                  TextSpan(
                    text: " Pay",
                    style: TextStyle(color: context.appColors.textBlack),
                  ),
                ],
              ),
            ).marginOnly(top: 23, bottom: 13),

            //文本1
            MyTextView(
              S.current.info_desc1,
              fontSize: 15,
              marginBottom: 17,
              marginLeft: 25,
              marginRight: 25,
              textAlign: TextAlign.center,
              isFontMedium: true,
              textColor: context.appColors.textBlack,
            ),

            //文本2
            MyTextView(
              S.current.info_desc2,
              fontSize: 15,
              marginBottom: 30,
              marginLeft: 25,
              marginRight: 25,
              textAlign: TextAlign.center,
              isFontMedium: true,
              textColor: context.appColors.textPrimary,
            ),

            //图标1
            const MyAssetImage(
              Assets.paymentInfoCashBack,
              width: 53.5,
              height: 55,
            ),

            //文本3
            MyTextView(
              S.current.info_desc3,
              fontSize: 15,
              marginTop: 31,
              marginBottom: 31,
              marginLeft: 25,
              marginRight: 25,
              textAlign: TextAlign.center,
              isFontMedium: true,
              textColor: context.appColors.textBlack,
            ),

            //图标2
            const MyAssetImage(
              Assets.paymentInfoRewards,
              width: 49,
              height: 53.5,
            ),

            //文本4
            MyTextView(
              S.current.info_desc4,
              fontSize: 15,
              marginTop: 31,
              marginBottom: 31,
              marginLeft: 25,
              marginRight: 25,
              textAlign: TextAlign.center,
              isFontMedium: true,
              textColor: context.appColors.textBlack,
            ),

            //图标3
            const MyAssetImage(
              Assets.paymentInfoBusiness,
              width: 55.5,
              height: 55.5,
            ),

            //文本5
            MyTextView(
              S.current.info_desc5,
              fontSize: 15,
              marginTop: 31,
              marginLeft: 25,
              marginRight: 25,
              textAlign: TextAlign.center,
              isFontMedium: true,
              textColor: context.appColors.textBlack,
            ),

            //文本5
            MyTextView(
              S.current.info_desc6,
              fontSize: 15,
              marginTop: 25,
              marginBottom: 30,
              marginLeft: 25,
              marginRight: 25,
              textAlign: TextAlign.center,
              isFontMedium: true,
              textColor: context.appColors.textBlack,
            ),
          ],
        ),
      ),
    );
  }
}