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_load_image.dart';
import 'package:widgets/my_text_view.dart';
import '../../router/page/facility_page_router.dart';
import 'facility_detail_view_model.dart';

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

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

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

    return Scaffold(
      appBar: MyAppBar.appBar(context, "Kids party room", backgroundColor: context.appColors.whiteBG),
      backgroundColor: context.appColors.backgroundDark,
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        physics: const BouncingScrollPhysics(),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            //顶部的信息展示
            _buildHeaderWidget(context, ref),

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

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

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

            // 押金
            _buildDetailItem(
              context,
              ref,
              S.current.deposit,
              Assets.facilityConfirmDepositIcon,
              28.0,
              26.5,
              "On Hold",
              "\$100.00",
              null,
              null,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildHeaderWidget(BuildContext context, WidgetRef ref) {
    return Container(
      width: double.infinity,
      color: context.appColors.whiteBG,
      margin: const EdgeInsets.only(bottom: 7.5),
      child: Column(
        children: [
          //成功图片
          const MyAssetImage(
            Assets.facilityPaymentSuccessIcon,
            width: 54,
            height: 54,
          ).marginOnly(top: 11, bottom: 13),

          //支付成功
          MyTextView(
            S.current.booking_successful,
            fontSize: 18,
            marginBottom: 3,
            isFontMedium: true,
            textColor: context.appColors.textPrimary,
          ),
          MyTextView(
            S.current.have_fun,
            fontSize: 18,
            marginBottom: 19,
            isFontMedium: true,
            textColor: context.appColors.textPrimary,
          ),

          //支付金额
          MyTextView(
            S.current.fee_paid,
            fontSize: 15,
            isFontRegular: true,
            textColor: context.appColors.textBlack,
          ),
          MyTextView(
            "\$10.80",
            fontSize: 15,
            isFontRegular: true,
            textColor: context.appColors.textPrimary,
          ),

          //付款类型与时间
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              MyTextView(
                "Master card ending",
                fontSize: 15,
                isFontRegular: true,
                textColor: context.appColors.textBlack,
              ),
              MyTextView(
                "9423",
                fontSize: 15,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),
            ],
          ).marginOnly(top: 12),

          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              MyTextView(
                S.current.paid_on,
                fontSize: 15,
                isFontRegular: true,
                textColor: context.appColors.textBlack,
              ),
              MyTextView(
                "24 Oct 2023 at 02:19 PM",
                fontSize: 15,
                isFontMedium: true,
                textColor: context.appColors.textBlack,
              ),
            ],
          ).marginOnly(top: 5),

          Divider(height: 0.5, color: context.appColors.dividerDefault).marginOnly(top: 14, bottom: 14),

          //押金
          MyTextView(
            S.current.deposit_released_caps,
            fontSize: 15,
            isFontRegular: true,
            textColor: context.appColors.textBlack,
          ),
          MyTextView(
            "\$100.00",
            fontSize: 15,
            marginTop: 5,
            isFontRegular: true,
            textColor: context.appColors.textPrimary,
          ),

          const SizedBox(height: 23),
        ],
      ),
    );
  }

  //Item的列表
  Widget _buildDetailItem(
    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(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}