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/generated/assets.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_load_image.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 String cleanServiceType;
  final double contentTopSectionHeight;
  final double contentMaxHeight;
  final double bottomBtnSectionHeight;

  const ChooseVisitTimeContent({
    Key? key,
    required this.id,
    required this.cleanServiceType,
    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((){
      vm.setInitPageData(context, id, cleanServiceType);
      // 组件挂载时执行 - 执行接口请求
      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: state.visitTimeList!=null && state.visitTimeList.isNotEmpty?[
              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,
                ),
              )
            ]: [
              SliverList( delegate: SliverChildBuilderDelegate(
                      (context, index){
                    return  const Center(
                        child: SizedBox(
                          height: 250,
                          child: MyAssetImage(Assets.baseServicePageNoData, width: 123.5, height: 115.5, fit: BoxFit.contain),
                        ),
                      );
                  },
                  childCount: 1
              ),)
            ],
          ),
        );
      }
    );
  }


  Widget _buildTimeItem(BuildContext context,int index, VisitTimeContentItem item, WidgetRef ref, vm){
    final state = ref.watch(chooseVisitTimeContentVmProvider);

    final itemIsChecked = ref.watch(chooseVisitTimeContentVmProvider.select((state) =>
       state.visitTimeList[index].isChecked ?? false
    ));
    final timeText = item.timeText;
    return HookBuilder(
      builder: (context) {
        final isMultiSelect = useState<bool>(state.isMultiSelect??false);
        // final isChecked = useState<bool>(itemIsChecked??false);
        final enable = useState<bool>(item.enable??false);
        final urgent = useState<bool>(item.urgent??false); // 是否加急
        final holiday = useState<bool>(item.holiday??false); // 是否节假日
        final night = useState<bool>(item.night??false); // 是否晚上
        return SizedBox(
          width: 80,
          child: Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                  color: itemIsChecked? 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: (){
                    if(enable.value){
                      // 可选  - 点击时间
                      vm.handlerTimeItemClick(context, index,!itemIsChecked);
                    }
                  },
                  text: '$timeText',
                  textColor: itemIsChecked ?context.appColors.textPrimary: context.appColors.textDarkGray999,
                  enable: enable.value,
                  disabledBackgroundColor: context.appColors.disEnableGray,
                  disabledTextColor: context.appColors.textWhite,
                  fontSize: 12,
                  fontWeight: FontWeight.w400,
                )
              ),
              // 加急
              Positioned(
                left: 0,
                top: 0,
                child: urgent.value? 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
                ): const SizedBox.shrink(),
              ),
              // 节假日
              Positioned(
                right: 0,
                top: 0,
                child: holiday.value? MyTextView(
                  'Holiday',
                  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
                ): const SizedBox.shrink(),
              ),
              Positioned(
                child: night.value? MyTextView(
                  'Night',
                  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
                ): const SizedBox.shrink(),
              ),
            ],
          ),
        );
      }
    );
  }

}