import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:domain/entity/rewards_detail_entity.dart';
import 'package:domain/entity/rewards_my_detail_entity.dart';
import 'package:flutter/cupertino.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: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/widget_export.dart';
import 'package:cs_resources/generated/assets.dart';

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

@RoutePage()
class RewardsTransactionPage extends HookConsumerWidget {
  final int? id;
  final String? type;
  const RewardsTransactionPage(
      {Key? key,
      @PathParam('id') required this.id,
      @PathParam('type') required this.type})
      : super(key: key);

  //启动当前页面
  static void startInstance(
      {BuildContext? context, int? id, String? type = ''}) {
    if (context != null) {
      context.router.push(RewardsTransactionPageRoute(id: id, type: type));
    } else {
      appRouter.push(RewardsTransactionPageRoute(id: id, type: type));
    }
  }

  // listitem
  Widget _buildSaleItem(BuildContext context, WidgetRef ref, _vm, detailInfo) {
    String title = detailInfo!.reward.title ?? "";
    List? resources = detailInfo!.reward.resources ?? [];
    int point = detailInfo.reward.point ?? 0;
    int originalPoint = detailInfo.reward.originalPoint ?? 0;

    return Column(
      children: [
        Container(
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(6.0)),
              boxShadow: [
                BoxShadow(
                    color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
              ],
            ),
            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: [
                resources!.length > 0
                    ? MyLoadImage(
                        resources[0] ?? '',
                        width: MediaQuery.of(context).size.width,
                        height: 150,
                      )
                    : Container(),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Text(
                      maxLines: 1, // 设置最大行数为2
                      overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
                      title,
                      style: const TextStyle(
                          fontSize: 17.0,
                          color: Colors.black,
                          fontWeight: FontWeight.w500),
                    ).marginOnly(bottom: 5),
                    Row(
                      children: [
                        Text(
                          '$point',
                          style: const TextStyle(
                              fontSize: 19.0,
                              color: Colors.black,
                              fontWeight: FontWeight.w500),
                        ),
                        Text(
                          '$originalPoint',
                          style: TextStyle(
                              decoration: TextDecoration.lineThrough,
                              decorationColor:
                                  ColorUtils.string2Color('#808DAF'),
                              decorationStyle: TextDecorationStyle.solid,
                              fontSize: 12.0,
                              color: ColorUtils.string2Color('#808DAF'),
                              fontWeight: FontWeight.w400),
                        ).marginOnly(left: 5, right: 5),
                        const Text(
                          'Points',
                          style: TextStyle(
                              fontSize: 13.0,
                              color: Colors.black,
                              fontWeight: FontWeight.w400),
                        ),
                      ],
                    ),
                  ],
                ).paddingOnly(left: 15, right: 15, top: 10, bottom: 20),
              ],
            )),
      ],
    ).marginOnly(left: 15, bottom: 15, right: 15);
  }

  Widget _buildDeal(BuildContext context, WidgetRef ref, _vm, detailInfo) {
    String redeemedStart = detailInfo.reward.redeemedStart ?? "";
    String redeemedEnd = detailInfo.reward.redeemedEnd ?? "";
    String redeemedDate = '$redeemedStart until $redeemedEnd';
    int code = detailInfo.redemptionCode ?? 0;
    return Column(
      children: [
        Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(6.0)),
            boxShadow: [
              BoxShadow(
                  color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
            ],
          ),
          width: MediaQuery.of(context).size.width - 30,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const MyAssetImage(
                    Assets.rewardsRewardsIconDatd,
                    width: 25,
                    height: 25,
                  ).marginOnly(right: 15),
                  Text(
                    redeemedEnd,
                    style: TextStyle(
                        fontSize: 15.0,
                        color: ColorUtils.string2Color('#000000'),
                        fontWeight: FontWeight.w400),
                  )
                ],
              ).marginOnly(bottom: 20),
              Row(
                // mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Row(
                    children: [
                      const MyAssetImage(
                        Assets.rewardsRewardsIcon123,
                        width: 25,
                        height: 25,
                      ).marginOnly(right: 15),
                      Text(
                        'Verification Code',
                        style: TextStyle(
                            fontSize: 15.0,
                            color: ColorUtils.string2Color('#000000'),
                            fontWeight: FontWeight.w400),
                      ),
                    ],
                  ),
                  Text(
                    '$code',
                    style: TextStyle(
                        fontSize: 15.0,
                        color: ColorUtils.string2Color('#4161D0'),
                        fontWeight: FontWeight.w500),
                  ),
                ],
              ),
            ],
          ).paddingOnly(left: 15, right: 15, top: 12, bottom: 20),
        ),
      ],
    ).marginOnly(left: 15, bottom: 15, right: 15);
  }

  Widget _buildPackage(BuildContext context, WidgetRef ref, _vm) {
    return Column(
      children: [
        Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(6.0)),
            boxShadow: [
              BoxShadow(
                  color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
            ],
          ),
          width: MediaQuery.of(context).size.width - 30,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    child: Text(
                      'If you have any issue when redeem the voucher,please contact 6604 6896',
                      style: TextStyle(
                          fontSize: 15.0,
                          color: ColorUtils.string2Color('#000000'),
                          fontWeight: FontWeight.w500),
                    ),
                  )
                ],
              ).marginOnly(bottom: 10, top: 10),
            ],
          ).paddingOnly(left: 15, right: 35, top: 12, bottom: 20),
        ),
      ],
    ).marginOnly(left: 15, bottom: 25, right: 15);
  }

  Widget _buildNotice(
      BuildContext context, WidgetRef ref, _vm, types, detailInfo) {
    int phone = detailInfo.account.phone ?? 0;
    String createdAt = detailInfo.createdAt ?? "";
    String usedAt = detailInfo.usedAt ?? "";
    int point = detailInfo.reward.point ?? 0;
    int originalPoint = detailInfo.reward.originalPoint ?? 0;
    int quantity = detailInfo.quantity ?? 0;
    return Column(
      children: [
        Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(6.0)),
            boxShadow: [
              BoxShadow(
                  color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
            ],
          ),
          width: MediaQuery.of(context).size.width - 30,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const MyAssetImage(
                    Assets.rewardsRewardsIconFile,
                    width: 25,
                    height: 25,
                  ).marginOnly(right: 10),
                  Text(
                    'Transaction Details',
                    style: TextStyle(
                        fontSize: 15.0,
                        color: ColorUtils.string2Color('#000000'),
                        fontWeight: FontWeight.w500),
                  )
                ],
              ).marginOnly(bottom: 12),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    'Purchase Mobile No :',
                    style: TextStyle(
                        fontSize: 15.0,
                        color: ColorUtils.string2Color('#000000'),
                        fontWeight: FontWeight.w400),
                  ),
                  Row(
                    children: [
                      Text(
                        '$phone',
                        style: TextStyle(
                            fontSize: 15.0,
                            color: ColorUtils.string2Color('#000000'),
                            fontWeight: FontWeight.w500),
                      ),
                    ],
                  ),
                ],
              ).marginOnly(bottom: 25),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    'Purchase Date :',
                    style: TextStyle(
                        fontSize: 15.0,
                        color: ColorUtils.string2Color('#000000'),
                        fontWeight: FontWeight.w400),
                  ),
                  Row(
                    children: [
                      Text(
                        createdAt,
                        style: TextStyle(
                            fontSize: 15.0,
                            color: ColorUtils.string2Color('#000000'),
                            fontWeight: FontWeight.w500),
                      ),
                    ],
                  ),
                ],
              ).marginOnly(bottom: 25),
              types != "expired"
                  ? Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(
                          'Redeemed Date :',
                          style: TextStyle(
                              fontSize: 15.0,
                              color: ColorUtils.string2Color('#000000'),
                              fontWeight: FontWeight.w400),
                        ),
                        Row(
                          children: [
                            Text(
                              usedAt,
                              style: TextStyle(
                                  fontSize: 15.0,
                                  color: ColorUtils.string2Color('#000000'),
                                  fontWeight: FontWeight.w500),
                            ),
                          ],
                        ),
                      ],
                    ).marginOnly(bottom: 25)
                  : Container(),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    'Quantity :',
                    style: TextStyle(
                        fontSize: 15.0,
                        color: ColorUtils.string2Color('#000000'),
                        fontWeight: FontWeight.w400),
                  ),
                  Row(
                    children: [
                      Text(
                        '$quantity',
                        style: TextStyle(
                            fontSize: 15.0,
                            color: ColorUtils.string2Color('#000000'),
                            fontWeight: FontWeight.w500),
                      ),
                    ],
                  ),
                ],
              ).marginOnly(bottom: 25),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    'Points:',
                    style: TextStyle(
                        fontSize: 15.0,
                        color: ColorUtils.string2Color('#333333'),
                        fontWeight: FontWeight.w400),
                  ),
                  Row(
                    children: [
                      Text(
                        '$originalPoint',
                        style: TextStyle(
                            decoration: TextDecoration.lineThrough,
                            decorationColor: ColorUtils.string2Color('#54638C'),
                            decorationStyle: TextDecorationStyle.solid,
                            fontSize: 14.0,
                            color: ColorUtils.string2Color('#54638C'),
                            fontWeight: FontWeight.w400),
                      ),
                      Text(
                        '$point',
                        style: TextStyle(
                            fontSize: 19.0,
                            color: ColorUtils.string2Color('#333333'),
                            fontWeight: FontWeight.w500),
                      ).marginOnly(left: 10),
                    ],
                  ),
                ],
              ).marginOnly(bottom: 25),
            ],
          ).paddingOnly(left: 15, right: 15, top: 15, bottom: 5),
        ),
      ],
    ).marginOnly(left: 15, bottom: 15, right: 15);
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final _vm = ref.read(rewardsTransactionVmProvider.notifier);
    final state = ref.watch(rewardsTransactionVmProvider);
    RewardsMyDetailEntity? detailInfo = state.detailInfo;
    String? types = type;
    useEffect(() {
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => _vm.initPageData(id: id));
      return () {
        // 组件卸载时执行
        Log.d("property_news_page 组件卸载时执行");
      };
    }, []);
    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        "My Rewards Details",
        backgroundColor: context.appColors.whiteBG,
      ),
      body: detailInfo?.createdAt != ''
          ? Column(
              children: [
                Expanded(
                    child: SingleChildScrollView(
                        scrollDirection: Axis.vertical,
                        physics: const BouncingScrollPhysics(),
                        clipBehavior: Clip.none,
                        child: Column(
                          children: [
                            Container(
                                color: ColorUtils.string2Color('#F2F3F6'),
                                padding: const EdgeInsets.only(top: 15),
                                child: Column(
                                  children: [
                                    _buildSaleItem(
                                        context, ref, _vm, detailInfo),
                                    _buildDeal(context, ref, _vm, detailInfo),
                                    _buildNotice(
                                        context, ref, _vm, types, detailInfo),
                                    _buildPackage(context, ref, _vm),
                                  ],
                                )),
                          ],
                        ))),
              ],
            )
          : const SizedBox.shrink(),
    );
  }
}