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:auto_route/auto_route.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/form_page_router.dart';
import 'form_view_model.dart';

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

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

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

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        S.current.form,
        backgroundColor: context.appColors.backgroundWhite,
      ),
      backgroundColor: context.appColors.backgroundDark,
      body: AutoTabsRouter.pageView(
        routes: const [
          FormApplyPageRoute(),
          FormSubmitPageRoute(),
          FormApprovePageRoute(),
          FormNotApprovePageRoute(),
        ],
        builder: (context, child, pageController) {
          final tabsRouter = AutoTabsRouter.of(context);

          return Column(
            children: [
              Container(
                color: context.appColors.whiteBG,
                height: 120,
                child: Row(
                  children: [
                    _buildCategory(
                      context,
                      Assets.formApplyIcon,
                      38,
                      44,
                      S.current.apply,
                      tabsRouter.activeIndex == 0,
                      14.0,
                    ).onTap(
                      () {
                        tabsRouter.setActiveIndex(0);
                      },
                    ).expanded(),
                    _buildCategory(
                      context,
                      Assets.formSubmitIcon,
                      38.5,
                      39,
                      S.current.form_submit_title,
                      tabsRouter.activeIndex == 1,
                      14.0,
                    ).onTap(
                      () {
                        tabsRouter.setActiveIndex(1);
                      },
                    ).expanded(),
                    _buildCategory(
                      context,
                      Assets.formApprovedIcon,
                      39,
                      39,
                      S.current.approved,
                      tabsRouter.activeIndex == 2,
                      14.0,
                    ).onTap(
                      () {
                        tabsRouter.setActiveIndex(2);
                      },
                    ).expanded(),
                    _buildCategory(
                      context,
                      Assets.formNotApprovedIcon,
                      38.5,
                      39.5,
                      S.current.not_approved,
                      tabsRouter.activeIndex == 3,
                      13.0,
                    ).onTap(
                      () {
                        tabsRouter.setActiveIndex(3);
                      },
                    ).expanded(),
                  ],
                ).paddingOnly(left: 5, right: 5),
              ),
              Expanded(
                child: child,
              ),
            ],
          );
        },
      ),
    );
  }

  //顶部的Tab布局
  Widget _buildCategory(BuildContext context, String iconPath, double iconWidth, double iconHeight, String title, bool isSelected, double testSize) {
    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: testSize,
          isFontMedium: true,
          textColor: isSelected ? context.appColors.tabTextSelectedDefault : context.appColors.tabTextUnSelectedDefault,
        ),
      ],
    );
  }
}
