import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
// ignore: depend_on_referenced_packages
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/color_utils.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/my_appbar.dart';

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

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

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

  // 顶部tab 切换
  Widget _buildTopSection(
      BuildContext context, WidgetRef ref, _vm, tabsRouter) {
    final topSectionsData = _vm.topSectionsData;
    final currentTabIdx = tabsRouter.activeIndex;
    return Container(
      color: Colors.white,
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: List.generate(topSectionsData.length, (index) {
            final item = topSectionsData[index];
            return Container(
              width:
                  MediaQuery.of(context).size.width / topSectionsData.length -
                      30,
              height: 43,
              padding: const EdgeInsets.only(
                  top: 10, bottom: 10, left: 10, right: 10),
              decoration: index == currentTabIdx
                  ? BoxDecoration(
                      color: index == currentTabIdx
                          ? context.appColors.btnBgDefault
                          : ColorUtils.string2Color("#F2F3F6"),
                      borderRadius: BorderRadius.circular(20),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.5),
                          spreadRadius: 1,
                          blurRadius: 5,
                          offset:
                              const Offset(0, 2), // changes position of shadow
                        ),
                      ],
                    )
                  : null,
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      alignment: Alignment.center,
                      child: MyTextView(
                        item['title'],
                        fontSize: 16,
                        textAlign: TextAlign.center,
                        isFontMedium: true,
                        textColor: index == currentTabIdx
                            ? Colors.white
                            : ColorUtils.string2Color("#000000"),
                      ),
                    ).onTap(
                      () {
                        tabsRouter.setActiveIndex(index);
                      },
                      type: ClickType.throttle,
                    ),
                  ),
                ],
              ),
            ).marginOnly(left: 20, right: 0, top: 10, bottom: 10);
          }),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final _vm = ref.read(rewardsMyVmProvider.notifier);
    return Scaffold(
        appBar: MyAppBar.appBar(
          context,
          "My Rewards",
          backgroundColor: context.appColors.whiteBG,
        ),
        body: AutoTabsRouter.pageView(
          routes: const [
            RewardsMyActivePageRoute(),
            RewardsMyExpiredPageRoute(),
            RewardsMyUsedPageRoute(),
          ],
          builder: (context, child, pageController) {
            final tabsRouter = AutoTabsRouter.of(context);
            return Column(
              children: [
                _buildTopSection(context, ref, _vm, tabsRouter),
                Expanded(
                  child: child,
                ),
              ],
            );
          },
        ));
  }
}