import 'package:cpt_payment/modules/payment/payment_view_model.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:cs_resources/theme/theme_config.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/services.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/payment_page_router.dart';

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

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.read(paymentViewModelProvider.notifier);

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        S.current.facility,
        backgroundColor: context.appColors.whiteBG,
      ),
      backgroundColor: context.appColors.backgroundDark,
      body: AutoTabsRouter.pageView(
        routes: const [
          InfoPageRoute(),
          CondoPageRoute(),
          ManagePageRoute(),
        ],
        builder: (context, child, pageController) {
          final tabsRouter = AutoTabsRouter.of(context);

          return Column(
            children: [
              Container(
                color: context.appColors.whiteBG,
                height: 120,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    
                    _buildCategory(
                      context,
                      Assets.paymentInfoIcon,
                      34,
                      41,
                      "Info",
                      tabsRouter.activeIndex == 0,
                    ).onTap(
                          () {
                        tabsRouter.setActiveIndex(0);
                      },
                    ),
                    _buildCategory(
                      context,
                      Assets.paymentCondoIcon,
                      48,
                      43,
                     "Condo",
                      tabsRouter.activeIndex == 1,
                    ).onTap(
                          () {
                        tabsRouter.setActiveIndex(1);
                      },
                    ),
                    _buildCategory(
                      context,
                      Assets.paymentManageIcon,
                      52,
                      46.5,
                      "Manage",
                      tabsRouter.activeIndex == 2,
                    ).onTap(
                          () {
                        tabsRouter.setActiveIndex(2);
                      },
                    ),
                  ],
                ),
              ),
              Expanded(
                child: child,
              ),
            ],
          );
        },
      ),
    );
  }

  //顶部的Tab布局
  Widget _buildCategory(BuildContext context, String iconPath, double iconWidth, double iconHeight, String title, bool isSelected) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 70,
          height: 70,
          decoration: BoxDecoration(
            color: context.appColors.lightBlueBg, // 设置圆形背景颜色
            shape: BoxShape.circle, // 设置为圆形
            boxShadow: isSelected
                ? [
              BoxShadow(
                color: context.appColors.tabLightBlueShadow, // 设置阴影颜色
                blurRadius: 5, // 设置模糊半径
                spreadRadius: 0.05, // 控制阴影扩散
                offset: const Offset(0, 4), // 设置阴影偏移量
              ),
            ]
                : [], // 未选中时无阴影,
          ),
          child: Center(
            child: MyAssetImage(iconPath, width: iconWidth, height: iconHeight),
          ),
        ),
        const SizedBox(height: 7),
        MyTextView(
          title,
          fontSize: 15,
          isFontMedium: true,
          textColor: isSelected ? context.appColors.tabTextSelectedDefault : context.appColors.tabTextUnSelectedDefault,
        ),
      ],
    );
  }
}