import 'package:cpt_rewards/modules/rewards_address/rewards_address_page.dart';
import 'package:cpt_rewards/modules/rewards_my/rewards_my_page.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:domain/entity/rewards_buy_entity.dart';
import 'package:domain/entity/rewards_detail_entity.dart';
import 'package:flutter/cupertino.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:shared/utils/log_utils.dart';
import 'package:shared/utils/color_utils.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 'package:widgets/shatter/picker_container.dart';
import 'package:widgets/utils/dark_theme_util.dart';
import 'package:widgets/widget_export.dart';
import 'package:cs_resources/generated/assets.dart';

import '../../../router/page/rewards_page_router.dart';
import './rewards_successful_vm.dart';

@RoutePage()
class RewardsSuccessfulPage extends HookConsumerWidget {
  final int? amount;
  final String? title;
  final String? resources;
  final String? redeemedDate;
  final String? createdAt;

  const RewardsSuccessfulPage(
      {Key? key,
      @PathParam('amount') required this.amount,
      @PathParam('title') required this.title,
      @PathParam('resources') required this.resources,
      @PathParam('redeemedDate') required this.redeemedDate,
      @PathParam('createdAt') required this.createdAt})
      : super(key: key);

  //启动当前页面
  static void startInstance({
    BuildContext? context,
    int? amount,
    String? title = '',
    String? resources = '',
    String? redeemedDate = '',
    String? createdAt = '',
  }) {
    if (context != null) {
      context.router.push(RewardsSuccessfulPageRoute(amount: amount, title: title, resources: resources, redeemedDate: redeemedDate, createdAt: createdAt));
    } else {
      appRouter.push(RewardsSuccessfulPageRoute(amount: amount, title: title, resources: resources, redeemedDate: redeemedDate, createdAt: createdAt));
    }
  }

  // listitem
  Widget _buildSaleItem(BuildContext context, WidgetRef ref, _vm) {
    String? titles = title ?? '';
    String? resourcess = resources ?? '';
    return Column(
      children: [
        Container(
            decoration: BoxDecoration(
              color: context.appColors.whiteBG,
              borderRadius: const BorderRadius.all(Radius.circular(6.0)),
              boxShadow: [BoxShadow(color: context.appColors.itemBGShadow)],
            ),
            width: MediaQuery.of(context).size.width - 30,
            // height: 420,
            // margin: const EdgeInsets.only(left: 15, right: 15, top: 12.5),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                MyLoadImage(
                  resourcess,
                  width: MediaQuery.of(context).size.width,
                  height: 150,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Text(
                      maxLines: 1, // 设置最大行数为2
                      overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
                      titles,
                      style: TextStyle(fontSize: 17.0, color: context.appColors.textBlack, fontWeight: FontWeight.w500),
                    ),
                  ],
                ).paddingOnly(left: 15, right: 15, top: 10, bottom: 30),
              ],
            )),
      ],
    ).marginOnly(left: 15, bottom: 15, right: 15);
  }

  Widget _buildDeal(BuildContext context, WidgetRef ref, _vm) {
    return Column(
      children: [
        Container(
          decoration: BoxDecoration(
            color: context.appColors.whiteBG,
            borderRadius: const BorderRadius.all(Radius.circular(6.0)),
            boxShadow: [BoxShadow(color: context.appColors.itemBGShadow)],
          ),
          width: MediaQuery.of(context).size.width - 30,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  MyAssetImage(
                    Assets.rewardsRewardsDetailDeal,
                    width: 25,
                    height: 25,
                    color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white),
                  ).marginOnly(right: 5),
                  Text(
                    S.current.redeem_deal_at,
                    style: TextStyle(fontSize: 15.0, color: context.appColors.textBlack, fontWeight: FontWeight.w500),
                  )
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    '60 paya lebar rd, #09-13/17 paya lebar square, singapore 409051',
                    maxLines: 2, // 设置最大行数为2
                    overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
                    style: TextStyle(
                        fontSize: 15.0,
                        color: DarkThemeUtil.multiColors(context, ColorUtils.string2Color('#54638C'), darkColor: Colors.white),
                        fontWeight: FontWeight.w400),
                  ),
                ],
              ),
            ],
          ).paddingOnly(left: 15, right: 15, top: 12, bottom: 20),
        ),
      ],
    ).marginOnly(left: 15, bottom: 15, right: 15);
  }

  Widget _buildPackage(BuildContext context, WidgetRef ref, _vm) {
    String? redeemedDates = redeemedDate ?? '';
    return Column(
      children: [
        Container(
          decoration: BoxDecoration(
            color: context.appColors.whiteBG,
            borderRadius: const BorderRadius.all(Radius.circular(6.0)),
            boxShadow: [BoxShadow(color: context.appColors.itemBGShadow)],
          ),
          width: MediaQuery.of(context).size.width - 30,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  MyAssetImage(
                    Assets.rewardsRewardsIconDatd,
                    width: 15,
                    height: 15,
                    color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white),
                  ).marginOnly(right: 10),
                  Text(
                    S.current.redeem_from,
                    style: TextStyle(fontSize: 15.0, color: context.appColors.textBlack, fontWeight: FontWeight.w500),
                  )
                ],
              ).marginOnly(bottom: 10),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    redeemedDates,
                    style: TextStyle(
                        fontSize: 15.0,
                        color: DarkThemeUtil.multiColors(context, ColorUtils.string2Color('#54638C'), darkColor: Colors.white),
                        fontWeight: FontWeight.w400),
                  ),
                ],
              ),
            ],
          ).paddingOnly(left: 15, right: 15, top: 12, bottom: 20),
        ),
      ],
    ).marginOnly(left: 15, bottom: 15, right: 15);
  }

  Widget _buildNotice(BuildContext context, WidgetRef ref, _vm) {
    String? createdAts = createdAt ?? '';
    return Column(
      children: [
        Container(
          decoration: BoxDecoration(
            color: context.appColors.whiteBG,
            borderRadius: const BorderRadius.all(Radius.circular(6.0)),
            boxShadow: [BoxShadow(color: context.appColors.itemBGShadow)],
          ),
          width: MediaQuery.of(context).size.width - 30,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    '${S.current.date_time}:',
                    style: TextStyle(fontSize: 15.0, color: context.appColors.tabTextUnSelectedPrimary, fontWeight: FontWeight.w400),
                  ),
                  Row(
                    children: [
                      Text(
                        createdAts,
                        style: TextStyle(
                            fontSize: 15.0,
                            color: DarkThemeUtil.multiColors(context, ColorUtils.string2Color('#54638C'), darkColor: Colors.white),
                            fontWeight: FontWeight.w400),
                      ),
                    ],
                  ),
                ],
              ),
              // Row(
              //   mainAxisAlignment: MainAxisAlignment.spaceBetween,
              //   crossAxisAlignment: CrossAxisAlignment.center,
              //   children: [
              //     Text(
              //       'Transaction ID:',
              //       style: TextStyle(
              //           fontSize: 15.0,
              //           color: ColorUtils.string2Color('#333333'),
              //           fontWeight: FontWeight.w400),
              //     ),
              //     Row(
              //       children: [
              //         Text(
              //           'PR00021837HY',
              //           style: TextStyle(
              //               fontSize: 15.0,
              //               color: ColorUtils.string2Color('#54638C'),
              //               fontWeight: FontWeight.w400),
              //         ),
              //       ],
              //     ),
              //   ],
              // ).marginOnly(top: 30, bottom: 10),
            ],
          ).paddingOnly(left: 15, right: 15, top: 30, bottom: 30),
        ),
      ],
    ).marginOnly(left: 15, bottom: 15, right: 15);
  }

  Widget _buildTop(BuildContext context, WidgetRef ref, _vm) {
    return Container(
        width: MediaQuery.of(context).size.width,
        color: context.appColors.whiteBG,
        padding: const EdgeInsets.only(top: 15, bottom: 30),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            MyAssetImage(
              Assets.rewardsRewardsSuccess,
              width: 54,
              height: 54,
              color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white),
            ),
            Text(
              S.current.you_have_paid_points,
              style: TextStyle(
                  fontSize: 18.0, color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white), fontWeight: FontWeight.w500),
            ).marginOnly(top: 12, bottom: 15),
            Text(
              '$amount',
              style: TextStyle(fontSize: 30.0, color: context.appColors.textBlack, fontWeight: FontWeight.w500),
            ),
          ],
        ));
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final _vm = ref.read(rewardsSuccessfulVmProvider.notifier);
    final state = ref.watch(rewardsSuccessfulVmProvider);
    // RewardsBuyEntity? datad = data;
    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        S.current.payment_successful,
        backgroundColor: context.appColors.whiteBG,
      ),
      body: Column(
        children: [
          Expanded(
              child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  physics: const BouncingScrollPhysics(),
                  clipBehavior: Clip.none,
                  child: Column(
                    children: [
                      _buildTop(context, ref, _vm),
                      Container(
                          color: context.appColors.backgroundDark,
                          padding: const EdgeInsets.only(top: 15),
                          child: Column(
                            children: [
                              _buildSaleItem(context, ref, _vm),
                              _buildDeal(context, ref, _vm),
                              _buildPackage(context, ref, _vm),
                              _buildNotice(context, ref, _vm),
                            ],
                          )),
                    ],
                  ))),
          Container(
            height: 50,
            color: context.appColors.btnBgDefault,
            child: Flex(
              direction: Axis.horizontal,
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    color: context.appColors.btnBgDefault,
                    height: 100,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        MyTextView(
                          S.current.check_my_rewards,
                          fontSize: 16,
                          textColor: Colors.white,
                          isFontMedium: true,
                        ),
                      ],
                    ),
                  ).onTap(() {
                    // 去详情
                    RewardsMyPage.startInstance();
                  }),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
