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: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 '../../router/page/facility_page_router.dart';
import 'book_confirm_view_model.dart';

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

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

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

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        "Function Room",
        showBackButton: true,
        backgroundColor: context.appColors.whiteBG,
      ),
      backgroundColor: context.appColors.backgroundDark,
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              physics: const BouncingScrollPhysics(),
              child: Column(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const SizedBox(height: 7.5),

                  // 预定
                  _buildConfirmItem(
                    context,
                    ref,
                    S.current.book,
                    Assets.facilityConfirmDateIcon,
                    28.5,
                    29,
                    "Tue,24 Oct 2023",
                    null,
                    "05:00 PM-10:00 PM",
                    null,
                  ),

                  // 设施
                  _buildConfirmItem(
                    context,
                    ref,
                    S.current.facility,
                    Assets.facilityConfirmFacilityIcon,
                    25.0,
                    30.5,
                    "Kids party room",
                    null,
                    "Blue room",
                    null,
                  ),

                  // 付款
                  _buildConfirmItem(
                    context,
                    ref,
                    S.current.payment,
                    Assets.facilityConfirmPaymentIcon,
                    27.0,
                    22.0,
                    S.current.booking_fee,
                    "10.80",
                    S.current.total,
                    "\$10.80",
                  ),

                  // 押金
                  _buildConfirmItem(
                    context,
                    ref,
                    S.current.deposit,
                    Assets.facilityConfirmDepositIcon,
                    28.0,
                    26.5,
                    S.current.deposit_hold,
                    "\$100.00",
                    null,
                    null,
                  ),

                  // 添加间隔
                  const SizedBox(height: 7.5),

                ],
              ),
            ),
          ),

          // 显示支付信息
          _paymentInfo(context),

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


  //展示的Item
  Widget _buildConfirmItem(
    BuildContext context,
    WidgetRef ref,
    String title,
    String iconPath,
    double iconWidth,
    double iconHeight,
    String line1Txt,
    String? line1Content,
    String? line2Txt,
    String? line2Content,
  ) {
    return Container(
      width: double.infinity,
      height: 92.5,
      padding: const EdgeInsets.only(left: 20, right: 20),
      margin: const EdgeInsets.only(left: 15, right: 15, top: 7.5, bottom: 7.5),
      decoration: BoxDecoration(
        color: context.appColors.whiteBG,
        borderRadius: BorderRadius.circular(6.0), // 圆角
        boxShadow: [
          BoxShadow(
            color: const Color(0xFFB8BFD9).withOpacity(0.3), // 阴影颜色
            offset: const Offset(0, 3), // 阴影的偏移量
            blurRadius: 8.0, // 模糊半径
            spreadRadius: 3.0, // 扩散半径
          ),
        ],
      ),
      child: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            MyTextView(
              title,
              textColor: context.appColors.textBlack,
              fontSize: 16,
              marginBottom: 7,
              isFontMedium: true,
            ),
            Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                MyAssetImage(
                  iconPath,
                  width: iconWidth,
                  height: iconHeight,
                ).marginOnly(right: 15),
                Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Row(
                      children: [
                        MyTextView(
                          line1Txt,
                          textColor: context.appColors.textBlack,
                          fontSize: 14,
                          isFontRegular: true,
                        ).expanded(),
                        MyTextView(
                          line1Content ?? "",
                          textColor: context.appColors.textBlack,
                          fontSize: 14,
                          isFontRegular: true,
                        ),
                      ],
                    ),
                    Visibility(
                      visible: line2Txt != null,
                      child: Row(
                        children: [
                          MyTextView(
                            line2Txt ?? "",
                            textColor: context.appColors.textBlack,
                            fontSize: 14,
                            isFontRegular: true,
                          ).expanded(),
                          MyTextView(
                            line2Content ?? "",
                            textColor: context.appColors.textBlack,
                            fontSize: 14,
                            isFontRegular: true,
                          ),
                        ],
                      ).marginOnly(top: 6),
                    ),
                  ],
                ).expanded(),
              ],
            ),
          ],
        ),
      ),
    );
  }

  //底部的支付信息
  Widget _paymentInfo(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 17.5, horizontal: 23),
      color: context.appColors.whiteBG,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MyTextView(
            S.current.card_caps,
            marginBottom: 17,
            textColor: context.appColors.textPrimary,
            fontSize: 17,
            isFontMedium: true,
          ),
          Row(
            children: [
              const MyAssetImage(
                Assets.facilityConfirmEcardIcon,
                height: 38,
              ),
              MyTextView(
                "Ending 9423",
                marginLeft: 15,
                marginRight: 15,
                textColor: context.appColors.textBlack,
                fontSize: 15,
                isFontMedium: true,
              ).expanded(),
              MyTextView(
                S.current.change,
                textColor: Colors.white,
                backgroundColor: context.appColors.btnBgDefault,
                paddingRight: 16,
                paddingLeft: 16,
                paddingTop: 8,
                paddingBottom: 8,
                cornerRadius: 7,
                fontSize: 15,
                isFontMedium: true,
              )
            ],
          )
        ],
      ),
    );
  }
}