import 'package:cpt_services/components/chooseVisitTimeBottomFooter.dart';
import 'package:cpt_services/components/chooseVisitTimeTitle_vm.dart';
import 'package:cpt_services/modules/services/service_clean_detail/service_clean_detail_vm.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/log_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';

import 'chooseVisitTimeTitle_state.dart';
import 'chooseVisitTimeTitle_vm.dart';

class ChooseVisitTimeTitle extends HookConsumerWidget {
  final int id;
  final int serviceTypeCode;

  const ChooseVisitTimeTitle(
      {Key? key,required this.id, required this.serviceTypeCode,}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(chooseVisitTimeTitleVmProvider.notifier);
    final state = ref.watch(chooseVisitTimeTitleVmProvider);
    List<DayInfoItem> dayInfoList = ref.watch(chooseVisitTimeTitleVmProvider.select((state) => state.dayInfoList))?? [];

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

    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 20, right: 20, top: 19, bottom: 16.5),
            child: Column(
              children: [
                MyTextView(
                  "Please choose a visit time",
                  textColor: context.appColors.textBlack,
                  textAlign: TextAlign.left,
                  isFontBold: true,
                  fontSize: 17,
                  boxWidth: double.infinity,
                  // maxLines: 5,
                ),
                MyTextView(
                  '30 minutes before the start of the service, free time modification is available',
                  textColor: context.appColors.textDarkGray999,
                  textAlign: TextAlign.left,
                  isFontRegular: true,
                  fontSize: 14,
                  // maxLines: 5,
                  boxWidth: double.infinity,
                ),
              ],
            ),
          ),
          Container(
            width: double.infinity,
            height: 65,
            // color: Colors.red,
            margin: const EdgeInsets.only(left: 20, right: 20, top: 0, bottom: 0),
            child: ListView.builder(
                itemCount: dayInfoList.length,
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index){
                  DayInfoItem item = dayInfoList[index];
                  return Container(
                      width: 100,
                      height: 65,
                      decoration: BoxDecoration(
                        color: item.isSelected ? ColorUtils.string2Color('#F5F5F7'): context.appColors.whiteBG,
                        borderRadius: const BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
                      ),
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            MyTextView(
                              "${item.day}",
                              textColor: context.appColors.textBlack,
                              fontSize: 12,
                              isFontBold: true,
                            ),
                            MyTextView(
                              "${item.date}",
                              textColor: context.appColors.textBlack,
                              fontSize: 12,
                              isFontBold: true,
                              marginTop: 5,
                            ),
                          ]
                      )
                  ).onTap((){
                    // 点击某一天
                    vm.handlerClicKSomeDay(context, item, index);
                  });
                }
            ),
          ),
          // 分割线
          Divider(
            color: context.appColors.grayBgE9,
            height: 1,
          ),
        ],
      ),
    );
  }
}