import 'package:cpt_services/components/status_card_item_vm.dart';
import 'package:cpt_services/modules/services/homeService/home_service_page.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.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/my_button.dart';
import 'package:widgets/my_text_view.dart';

import '../constants_services.dart';

class StausCardItem extends HookConsumerWidget {
  int serviceId;
  int serviceTypeCode;
  int serviceStatusCode;
  Map<String, dynamic> itemObj;
  double? cardHeight ;
  final Function(dynamic)? onClickCard;

  StausCardItem({
    Key? key,
    required this.serviceId,
    required this.serviceTypeCode,
    required this.serviceStatusCode,
    required this.itemObj,
    this.onClickCard,
    cardHeight,
  }): super(key: key) {
    this.cardHeight = cardHeight ?? 180.0;
  }

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

    final title = itemObj.getValue("title", "House Cleaning Services");
    final companyName = itemObj.getValue("company_name", "HONG YE GROUP PTE LTD");
    final duration = itemObj.getValue("duration", "Daily cleaning for 2 hours");
    final totalPrice = itemObj.getValue("totalPrice", '40');
    final visit_time = itemObj.getValue("visit_time", '14 0ct 2024 15:00');
    final order_time = itemObj.getValue("order_time", '13 0ct 2024 12:00');

    Log.d("serviceStatusCode $serviceStatusCode");
    String status_text = servicesConstants.servicesStatus['$serviceStatusCode']['text'];

    // final status_text = itemObj.getValue("status_text", "");

    List<Map<String, dynamic>>? actionBtnList = servicesConstants.servicesStatusActionBtnList[serviceStatusCode];
    // Log.d("actionBtnList   $actionBtnList");

    useEffect((){
      vm.setInitData(context, serviceId, serviceTypeCode, serviceStatusCode);
      return () {
      };
    },[]);
    return Container(
      width: double.infinity,
      height: cardHeight!,
      child: Padding(
        padding: const EdgeInsets.only(left: 18.0, right: 18.0, top: 22.0, bottom: 22.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 标题 和状态
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      // 标题
                      Expanded(
                        child: MyTextView(
                          title,
                          fontSize: 16,
                          maxLines: 1,
                          isFontMedium: true,
                          textAlign: TextAlign.left,
                        ),
                      ),
                      // 状态
                      MyTextView(
                        status_text,
                        fontSize: 14,
                        maxLines: 1,
                        isFontRegular: true,
                        textAlign: TextAlign.left,
                        textColor: context.appColors.textPrimary,
                      ),
                    ],
                  ),
                  // 公司名称
                  MyTextView(
                    companyName,
                    fontSize: 14,
                    maxLines: 1,
                    isFontRegular: true,
                    textAlign: TextAlign.left,
                    marginTop: 6,
                  ),
                  // 价格
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      // 公司名称
                      MyTextView(
                        duration,
                        fontSize: 14,
                        maxLines: 1,
                        isFontRegular: true,
                        textAlign: TextAlign.left,
                      ),
                      // 公司名称
                      MyTextView(
                        '\$$totalPrice',
                        fontSize: 17,
                        maxLines: 1,
                        isFontBold: true,
                        textAlign: TextAlign.left,
                        textColor: context.appColors.textPrimary,
                      ),
                    ],
                  ),
                  SizedBox(height: 7.5,),
                  // visit time
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      MyTextView(
                        'Visit Time',
                        fontSize: 14,
                        maxLines: 1,
                        isFontRegular: true,
                        textAlign: TextAlign.left,
                      ),
                      MyTextView(
                        visit_time,
                        fontSize: 14,
                        maxLines: 1,
                        isFontRegular: true,
                        textAlign: TextAlign.left,
                        textColor: context.appColors.textBlack,
                      ),
                    ],
                  ),
                  SizedBox(height: 7.5,),
                  // order time
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      MyTextView(
                        'Order Time',
                        fontSize: 14,
                        maxLines: 1,
                        isFontRegular: true,
                        textAlign: TextAlign.left,
                      ),
                      MyTextView(
                        order_time,
                        fontSize: 14,
                        maxLines: 1,
                        isFontRegular: true,
                        textAlign: TextAlign.left,
                        textColor: context.appColors.textBlack,
                      ),
                    ],
                  ),
                ],
              )
            ),
            // Container(
              // margin: EdgeInsets.only(top: 15),
              // child: _buildActionSection(context,actionBtnList!, vm, ref),
            // ),
          ],
        ),
      ),
    );
  }

  Widget _buildActionSection(BuildContext context,List<Map<String, dynamic>> actionBtnList, StatusCardItemVm vm, WidgetRef ref ) {
    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--");
          return Container(
            height: 50,
            // color: Colors.red,
            width: maxWidth,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              mainAxisSize: MainAxisSize.max,
              children: List.generate(actionBtnList.length, (index){
                var item = actionBtnList[index];
                // return Expanded(
                //   child: _buildBtn(context, item),
                // );
                return _buildBtn(context, item, vm, ref);
              })
            ),
          ).scrollable(
            scrollDirection: Axis.horizontal,
            physics: BouncingScrollPhysics(),
          );
      }
    );
  }

  Widget _buildBtn(BuildContext context, Map<String, dynamic> btnItem, StatusCardItemVm vm, WidgetRef ref) {
    // final btnCode = btnItem['code'];
    return MyButton(
      onPressed: (){
        vm.handlerClickActionBtn(context, btnItem);
      },
      text: btnItem['text'],
      radius: 10.0,
      textColor: context.appColors.textWhite,
      backgroundColor: ColorUtils.string2Color(btnItem['btnColor']),
      fontSize: 12,
      padding: EdgeInsets.symmetric(horizontal: 5),
      minWidth: btnItem['btnWidth']?.toDouble(),
      minHeight: btnItem['btnHeight']?.toDouble() + 5,
    ).marginOnly(left: 5);
  }
}