import 'package:cpt_rewards/modules/rewards_successful/rewards_successful_page.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:hooks_riverpod/hooks_riverpod.dart';
import 'package:shared/utils/color_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';
import '../rewards_list_vm.dart';

class RewardsListfilterDialo extends HookConsumerWidget {
  VoidCallback confirmAction;

  RewardsListfilterDialo({
    required this.confirmAction,
  });

  Widget CheckboxList(BuildContext context, ref) {
    final _vm = ref.read(rewardsListVmProvider.notifier);
    final state = ref.watch(rewardsListVmProvider);
    int point_min = state.point_min;
    int point_max = state.point_max;
    var isSelected = true;
    return Column(
      children: [
        Container(
          height: 40,
          color: ColorUtils.string2Color('#F1F1F1'),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                textAlign: TextAlign.center,
                'Sort by',
                style: TextStyle(
                    fontSize: 16.0,
                    color: ColorUtils.string2Color('#767676'),
                    fontWeight: FontWeight.w500),
              ),
            ],
          ).paddingOnly(left: 15, right: 15),
        ),
        Column(
          children: [
            Container(
                height: 45,
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(
                  width: 1.0, // 底边边框的宽度
                  color: ColorUtils.string2Color('#F2F3F6'), // 底边边框的颜色
                ))),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        const MyAssetImage(
                          Assets.rewardsRewardListNew,
                          width: 16,
                          height: 13,
                        ).marginOnly(right: 15),
                        Text(
                          'Latest',
                          style: TextStyle(
                              fontSize: 16.0,
                              color: state.sort_by == "created_at"
                                  ? ColorUtils.string2Color('#FF5E75')
                                  : ColorUtils.string2Color('#000000'),
                              fontWeight: FontWeight.w400),
                        ),
                      ],
                    ),
                    state.sort_by == "created_at"
                        ? const MyAssetImage(
                            Assets.rewardsRewardListChoose,
                            width: 17,
                            height: 17,
                          )
                        : Container()
                  ],
                )).onTap(() {
              _vm.sortByClick('created_at');
            }),
            Container(
                height: 45,
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(
                  width: 1.0, // 底边边框的宽度
                  color: ColorUtils.string2Color('#F2F3F6'), // 底边边框的颜色
                ))),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        const MyAssetImage(
                          Assets.rewardsRewardListHot,
                          width: 13,
                          height: 17,
                        ).marginOnly(right: 15),
                        Text(
                          'Popularity',
                          style: TextStyle(
                              fontSize: 16.0,
                              color: state.sort_by == "clicks_count"
                                  ? ColorUtils.string2Color('#FF5E75')
                                  : ColorUtils.string2Color('#000000'),
                              fontWeight: FontWeight.w400),
                        ),
                      ],
                    ),
                    state.sort_by == "clicks_count"
                        ? const MyAssetImage(
                            Assets.rewardsRewardListChoose,
                            width: 17,
                            height: 17,
                          )
                        : Container()
                  ],
                )).onTap(() {
              _vm.sortByClick('clicks_count');
            }),
            Container(
                height: 45,
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(
                  width: 1.0, // 底边边框的宽度
                  color: ColorUtils.string2Color('#F2F3F6'), // 底边边框的颜色
                ))),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        const MyAssetImage(
                          Assets.rewardsRewardListLow,
                          width: 14,
                          height: 17,
                        ).marginOnly(right: 15),
                        Text(
                          'Low to High Points',
                          style: TextStyle(
                              fontSize: 16.0,
                              color: state.sort == "asc"
                                  ? ColorUtils.string2Color('#FF5E75')
                                  : ColorUtils.string2Color('#000000'),
                              fontWeight: FontWeight.w400),
                        ),
                      ],
                    ),
                   state.sort == "asc"
                        ? const MyAssetImage(
                            Assets.rewardsRewardListChoose,
                            width: 17,
                            height: 17,
                          )
                        : Container()
                  ],
                )).onTap(() {
              _vm.sortClick('asc');
            }),
            Container(
                height: 45,
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(
                  width: 1.0, // 底边边框的宽度
                  color: ColorUtils.string2Color('#F2F3F6'), // 底边边框的颜色
                ))),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        const MyAssetImage(
                          Assets.rewardsRewardListHigh,
                          width: 13,
                          height: 16,
                        ).marginOnly(right: 15),
                        Text(
                          'High to Low Points',
                          style: TextStyle(
                              fontSize: 16.0,
                              color: state.sort == "desc"
                                  ? ColorUtils.string2Color('#FF5E75')
                                  : ColorUtils.string2Color('#000000'),
                              fontWeight: FontWeight.w400),
                        ),
                      ],
                    ),
                    state.sort == "desc"
                        ? const MyAssetImage(
                            Assets.rewardsRewardListChoose,
                            width: 17,
                            height: 17,
                          )
                        : Container()
                  ],
                )).onTap(() {
              _vm.sortClick('desc');
            }),
          ],
        ).paddingOnly(left: 15, right: 15),
        Container(
          height: 40,
          color: ColorUtils.string2Color('#F1F1F1'),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                textAlign: TextAlign.center,
                'Filter By',
                style: TextStyle(
                    fontSize: 16.0,
                    color: ColorUtils.string2Color('#767676'),
                    fontWeight: FontWeight.w500),
              ),
            ],
          ).paddingOnly(left: 15, right: 15),
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Text(
              '$point_min',
              style: TextStyle(
                  fontSize: 16.0,
                  color: ColorUtils.string2Color('#000000'),
                  fontWeight: FontWeight.w400),
            ).marginOnly(right: 3),
            Text(
              'points',
              style: TextStyle(
                  fontSize: 16.0,
                  color: ColorUtils.string2Color('#000000'),
                  fontWeight: FontWeight.w400),
            ).marginOnly(right: 3),
            Text(
              '-',
              style: TextStyle(
                  fontSize: 16.0,
                  color: ColorUtils.string2Color('#000000'),
                  fontWeight: FontWeight.w400),
            ).marginOnly(right: 3),
            Text(
              '$point_max',
              style: TextStyle(
                  fontSize: 16.0,
                  color: ColorUtils.string2Color('#000000'),
                  fontWeight: FontWeight.w400),
            ).marginOnly(right: 3),
            Text(
              'points',
              style: TextStyle(
                  fontSize: 16.0,
                  color: ColorUtils.string2Color('#000000'),
                  fontWeight: FontWeight.w400),
            ).marginOnly(right: 3),
          ],
        ).paddingOnly(left: 15, right: 15, top: 20),
        RangeSlider(
          values: RangeValues(
              state.point_min.toDouble(), state.point_max.toDouble()), // 初始化范围
          min: 0, // 最小值
          max: 100, // 最大值
          onChanged: (RangeValues values) {
            _vm.rangeSliderChanged(values);
            // 处理范围改变事件
            print('Selected range: ${values.start} to ${values.end}');
          },
        ).marginOnly(top: 5),
        CheckboxListTile(
          title: Container(
            transform: Matrix4.translationValues(-20.0, 0.0, 0.0),
            child: Text(
              'Only show rewards I can redeem',
              style: TextStyle(
                  fontSize: 14.0,
                  color: ColorUtils.string2Color('#767676'),
                  fontWeight: FontWeight.w400),
            ),
          ),
          controlAffinity: ListTileControlAffinity.leading,
          value: isSelected,
          onChanged: (value) {
            isSelected = value!;
          },
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final _vm = ref.read(rewardsListVmProvider.notifier);
    final state = ref.watch(rewardsListVmProvider);
    // List itemsList = _vm.state.list.toList();
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          transform: Matrix4.translationValues(0.0, 160.0, 0.0),
          width: double.infinity,
          padding: const EdgeInsets.only(top: 22),
          decoration: BoxDecoration(
            color: context.appColors.whiteSecondBG,
            boxShadow: const [
              BoxShadow(
                  color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
            ],
          ),
          child: Column(
            children: [
              Container(child: CheckboxList(context, ref)),
              Row(
                children: [
                  const SizedBox(width: 18),
                  Expanded(
                      flex: 1,
                      child: InkWell(
                        onTap: () async {
                          onCancel();
                          _vm.applyClick();
                        },
                        child: MyTextView(
                          'Apply',
                          fontSize: 16,
                          paddingTop: 13,
                          paddingBottom: 13,
                          isFontMedium: true,
                          textAlign: TextAlign.center,
                          textColor: Colors.white,
                          backgroundColor: context.appColors.btnBgDefault,
                          cornerRadius: 7,
                        ),
                      )),
                  const SizedBox(width: 18),
                ],
              ).marginOnly(bottom: 30, top: 28),
            ],
          ),
        ),
      ],
    );
  }

//取消弹框
  void onCancel() async {
    SmartDialog.dismiss();
  }
}
