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/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:plugin_basic/basic_export.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/main_page_router.dart';
import 'visitor_view_model.dart';

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

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

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        S.current.visitor,
        showBackButton: false,
        backgroundColor: context.appColors.whiteBG,
      ),
      backgroundColor: context.appColors.backgroundDark,
      body: AutoTabsRouter.pageView(
        routes: const [
          VisitorNowPageRoute(),
          VisitorActivePageRoute(),
          VisitorHistoryPageRoute(),
        ],
        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: [
                    _buildVisitorCategory(
                      context,
                      Assets.mainVisitorNow,
                      54.5,
                      48,
                      S.current.visitor_now,
                      tabsRouter.activeIndex == 0,
                    ).onTap(
                      () {
                        tabsRouter.setActiveIndex(0);
                      },
                    ),
                    _buildVisitorCategory(
                      context,
                      Assets.mainVisitorActive,
                      36.5,
                      48,
                      S.current.visitor_active,
                      tabsRouter.activeIndex == 1,
                    ).onTap(
                      () {
                        tabsRouter.setActiveIndex(1);
                      },
                    ),
                    _buildVisitorCategory(
                      context,
                      Assets.mainVisitorHistory,
                      38,
                      45.5,
                      S.current.history,
                      tabsRouter.activeIndex == 2,
                    ).onTap(
                      () {
                        tabsRouter.setActiveIndex(2);
                      },
                    ),
                  ],
                ),
              ),
              Expanded(
                child: child,
              ),
            ],
          );
        },
      ),
    );
  }

  //顶部的Tab布局
  Widget _buildVisitorCategory(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,
        ),
      ],
    );
  }
}