import 'package:cpt_payment/modules/payment/condo/active/condo_active_screen.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: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/my_appbar.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';
import '../../router/page/payment_page_router.dart';
import 'payment_info_view_model.dart';

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

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

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

    return Scaffold(
      appBar: MyAppBar.appBar(context, "付款的标题"),
      backgroundColor: context.appColors.whiteBG,
      body: Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  physics: const BouncingScrollPhysics(),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      //金额
                      Row(
                        children: [
                          const MyAssetImage(Assets.paymentInfoDetails, width: 27, height: 27),
                          MyTextView(
                            S.current.payment_details,
                            textColor: context.appColors.textBlack,
                            fontSize: 17,
                            marginLeft: 14,
                            isFontMedium: true,
                          ).expanded(),
                        ],
                      ).marginOnly(top: 15),

                      Row(
                        children: [
                          MyTextView(
                            "SGD",
                            textColor: context.appColors.textBlack,
                            fontSize: 18,
                            isFontRegular: true,
                          ),
                          MyTextView(
                            "\$21.80",
                            textColor: context.appColors.textPrimary,
                            fontSize: 22,
                            marginLeft: 12,
                            isFontMedium: true,
                          ).expanded(),
                        ],
                      ).marginOnly(top: 20),

                      Container(
                        height: 0.5,
                        margin: const EdgeInsets.only(top: 22,bottom: 13.5),
                        color: context.appColors.dividerDefault,
                      ),

                      // DESC
                      Row(
                        children: [
                          const MyAssetImage(Assets.paymentInfoNotes, width: 27, height: 27),
                          MyTextView(
                            S.current.notes_to_recipient,
                            textColor: context.appColors.textBlack,
                            fontSize: 17,
                            marginLeft: 14,
                            isFontMedium: true,
                          ).expanded(),
                        ],
                      ),

                      //大文本框
                      IgnoreKeyboardDismiss(
                        child: Container(
                          height: 177,
                          margin: const EdgeInsets.only(top: 24),
                          padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                          decoration: BoxDecoration(
                            color: context.appColors.authFiledBG,
                            borderRadius: const BorderRadius.all(Radius.circular(5)),
                          ),
                          child: Stack(
                            children: [
                              TextField(
                                cursorColor: context.appColors.authFiledText,
                                cursorWidth: 1.5,
                                autofocus: false,
                                enabled: true,
                                focusNode: state.formData["note"]!['focusNode'],
                                controller: state.formData["note"]!['controller'],
                                decoration: InputDecoration(
                                  isDense: true,
                                  isCollapsed: true,
                                  border: InputBorder.none,
                                  hintText: state.formData["note"]!['hintText'],
                                  hintStyle: TextStyle(
                                    color: context.appColors.authFiledHint,
                                    fontSize: 16.0,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                                style: TextStyle(
                                  color: context.appColors.authFiledText,
                                  fontSize: 16.0,
                                  fontWeight: FontWeight.w500,
                                ),
                                textInputAction: TextInputAction.done,
                                onSubmitted: (value) {
                                  FocusScope.of(context).unfocus();
                                },
                                maxLines: null,
                                expands: true,
                                onChanged: (text) {
                                  // 当文本改变时，更新字符数量
                                  noteCount.value = text.length;
                                },
                              ),
                              Positioned(
                                bottom: 0.0,
                                right: 0.0,
                                child: Text(
                                  S.current.characters(noteCount.value),
                                  style: TextStyle(
                                    color: context.appColors.textBlack,
                                    fontSize: 15.0,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ).paddingSymmetric(horizontal: 15))
              .expanded(),

          // 底部按钮
          MyButton(
            onPressed: viewModel.gotoConfirmPage,
            text: S.current.next,
            textColor: Colors.white,
            backgroundColor: context.appColors.btnBgDefault,
            fontWeight: FontWeight.w500,
            type: ClickType.throttle,
            fontSize: 16,
            minHeight: 50,
            radius: 0,
          ).marginOnly(top: 15),
        ],
      ),
    );
  }
}