import 'package:cpt_community/components/custom_tabs_state.dart';
import 'package:cpt_community/components/custom_tabs_state.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: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 'custom_tabs_state.dart';
import 'custom_tabs_vm.dart';


class CustomTabs extends HookConsumerWidget {
  List tabsList;
  int activeIndex = 0;
  Widget? Function(BuildContext)? tabItemBuilder;
  VoidCallback? onClickAction;
  CustomTabs({Key? key, required this.tabsList, required this.activeIndex, this.onClickAction, this.tabItemBuilder}) :
        super(key: key);

  Widget _buildTabItem(BuildContext context, WidgetRef ref, vm, item, index) {

    // 监听 activeIndex 的变化
    final activeIndex = ref.watch(customTabsVmProvider.select((state) => state.activeIndex));

    return Container(
        width: MediaQuery.of(context).size.width / vm.state.tabsList.length - 30,
        height: 43,
        padding: const EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
        decoration: index==activeIndex? BoxDecoration(
          color: index==activeIndex? 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 == activeIndex ? Colors.white :ColorUtils.string2Color("#000000"),
                ),
              ),
            ),
          ],
        ),
    ).onTap((){
      vm.handlerClickTab(index, item);
    });
  }

  List<Widget> _buildTabs(BuildContext context, WidgetRef ref, vm){
    tabsList = vm.state.tabsList;

    int tabsLength = tabsList.length;
    return List.generate(tabsLength, (index) {
      return _buildTabItem(context, ref, vm, tabsList[index], index);
    });
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(customTabsVmProvider.notifier);
    // 初始化状态，只在第一次构建时执行
    if (vm.state.tabsList!.isEmpty) {
      vm.initPropData(tabsList, activeIndex, tabItemBuilder, onClickAction);
    }

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      physics: const BouncingScrollPhysics(),
      clipBehavior: Clip.none,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: _buildTabs(context, ref, vm),
      ).constrained(
        maxWidth:  MediaQuery.of(context).size.width
      ),
    );
  }
}