import 'package:cpt_services/components/chooseHouseCleanContent_vm.dart';
import 'package:cpt_services/components/chooseVisitTimeBottomFooter.dart';
import 'package:cpt_services/components/chooseVisitTimeBottomFooter_vm.dart';
import 'package:cpt_services/components/chooseVisitTimeContent_vm.dart';
import 'package:cpt_services/components/status_card_item.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shared/utils/color_utils.dart';
import 'package:shared/utils/ext_dart.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/load_state_layout.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';
import 'package:widgets/my_cart_num.dart';

import 'chooseVisitTimeContent_state.dart';

// import 'chooseVisitTimeContent_vm.dart';

class ChooseVisitTimeContent extends HookConsumerWidget {
  final int id;
  final int serviceTypeCode;
  final double contentTopSectionHeight;
  final double contentMaxHeight;
  final double bottomBtnSectionHeight;

  const ChooseVisitTimeContent({
    Key? key,
    required this.id,
    required this.serviceTypeCode,
    this.contentTopSectionHeight = 150,
    this.contentMaxHeight = 480,
    this.bottomBtnSectionHeight = 50,
  }):super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(chooseVisitTimeContentVmProvider.notifier);
    final state = ref.watch(chooseVisitTimeContentVmProvider);

    useEffect((){
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => vm.initPageData(context));
      return () {
        // 组件卸载时执行
      };
    },[]);

    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        // final maxHeight = constraints.maxHeight;
        // final minHeight = constraints.minHeight;
        // final maxWidth = constraints.maxWidth;
        // Log.d("---maxHeight-----$maxHeight-- $minHeight  $maxWidth--");
        double scrollMaxHeight = contentMaxHeight - contentTopSectionHeight - bottomBtnSectionHeight ;
        // Log.d("scrollMaxHeight  $scrollMaxHeight");
        return Container(
          width: double.infinity,
          // width: 80,
          color: ColorUtils.string2Color("#F5F5F7"),
          padding: const EdgeInsets.only(left:20, right: 20, top: 12, bottom: 12),
          constraints: const BoxConstraints(
            minHeight: 0,
            maxHeight: 280,
          ),
          child: LoadStateLayout(
            state: state.loadingState,
            successSliverWidget: [
              SliverGrid(
                gridDelegate:  const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                mainAxisSpacing: 5,
                crossAxisSpacing: 5,
                childAspectRatio: 80 / 38,
                  // childAspectRatio:  166.5/214 * ScreenUtil.getAdapterSizeCtx(context, 166.5/214), // 宽高比
                  // childAspectRatio: 166.5/214 * ((166.5/214).ap), //
                ),
                delegate: SliverChildBuilderDelegate(
                      (context, index) {
                    return  _buildTimeItem(context, index, state.visitTimeList[index], ref, vm);
                  },
                  childCount: state.visitTimeList.length,
                ),

                // GridView.builder(
                //   gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                //     crossAxisCount: 4,
                //     mainAxisSpacing: 5,
                //     crossAxisSpacing: 5,
                //     childAspectRatio: 80 / 38,
                //   ),
                //   itemCount: state.visitTimeList.length,
                //   itemBuilder: (context, index) {
                //     final item = state.visitTimeList[index];
                //     return _buildTimeItem(context, index, item, ref, vm);
                //   },
                // )
              )
            ],
          ),
        );
      }
    );
  }


  Widget _buildTimeItem(BuildContext context,int index, VisitTimeContentItem item, WidgetRef ref, vm){
    final name = item.name;
    return HookBuilder(
      builder: (context) {
        final isChecked = useState<bool>(item.isChecked??false);
        return SizedBox(
          width: 80,
          child: Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                  color: isChecked.value? ColorUtils.string2Color("#D9DFF6"):context.appColors.whiteBG,
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: [
                    BoxShadow(
                      color: ColorUtils.string2Color('#E5E5E5'),
                      offset: const Offset(0, 2),
                      blurRadius: 8,
                    ),
                  ],
                ),
                child:  MyButton(
                  onPressed: (){
                    isChecked.value = !isChecked.value;
                    vm.handlerTimeItemClick(context, index, isChecked.value);
                  },
                  text: '$name',
                  minHeight: 38,
                  textColor: isChecked.value?context.appColors.textPrimary: context.appColors.textDarkGray999,
                  fontSize: 12,
                  fontWeight: FontWeight.w400,
                )
              ),
              Positioned(
                child: MyTextView(
                  'Extreme speed',
                  textColor: ColorUtils.string2Color("#DD6800"),
                  fontSize: 8,
                  isFontRegular: true,
                  backgroundColor:ColorUtils.string2Color("#FFEBD9"),
                  paddingTop: 2,
                  paddingBottom: 2,
                  paddingLeft: 5,
                  paddingRight: 5,
                ).clipRRect(
                  topLeft: 10,
                  bottomRight: 10
                ).onTap((){

                }),
              ),
            ],
          ),
        );
      }
    );
  }

}