import 'dart:typed_data';
import 'dart:ui';

import 'package:cs_resources/generated/assets.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:get/get.dart';
import 'package:plugin_platform/engine/toast/toast_engine.dart';
import 'package:shared/utils/date_time_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:cs_resources/constants/color_constants.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/picker/date_picker_util.dart';
import 'package:widgets/shatter/form_require_text.dart';
import 'package:widgets/widget_export.dart';

/*
 * 批量操作修改时间的弹窗
 */
class AppliedButchModify extends StatefulWidget {
  DateTime? selectedStartDate;
  DateTime? selectedEndDate;
  void Function(DateTime startTime, DateTime endTime)? confirmAction;

  AppliedButchModify({this.selectedStartDate, this.selectedEndDate, this.confirmAction});

  @override
  State<AppliedButchModify> createState() => _AppliedButchModifyState();
}

class _AppliedButchModifyState extends State<AppliedButchModify> {
  DateTime? selectedStartDate;
  DateTime? selectedEndDate;

  @override
  void initState() {
    super.initState();
    selectedStartDate = widget.selectedStartDate;
    selectedEndDate = widget.selectedEndDate;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        //Title （如果使用 Container 为最外层容器则默认为 match_parent 的效果，除非我们限制宽度和最大高度最小高度）
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 16.5),
          width: double.infinity,
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(15)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Center(
                child: MyTextView(
                  "Batch Modify".tr,
                  fontSize: 19,
                  isFontMedium: true,
                  textColor: ColorConstants.black,
                  marginTop: 22,
                  marginBottom: 20,
                ),
              ),

              FormRequireText(
                fontSize: 14,
                textColor: ColorConstants.black33,
                fontWeight: FontWeight.w400,
                text: "Job Start Time".tr,
              ),

              //选择时间
              Container(
                padding: const EdgeInsets.only(left: 16, right: 10),
                margin: const EdgeInsets.only(top: 10),
                height: 45,
                decoration: const BoxDecoration(
                  color: ColorConstants.grayECECEC,
                  borderRadius: BorderRadius.all(Radius.circular(5)),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    MyTextView(
                      selectedStartDate == null ? "" : DateTimeUtils.formatDate(selectedStartDate),
                      fontSize: 14,
                      hint: "Choose Start Date".tr,
                      textHintColor: ColorConstants.textBlackHint,
                      isFontMedium: true,
                      textColor: ColorConstants.black33,
                    ).expanded(),
                    MyAssetImage(Assets.baseServiceTriangleDropDownIcon, width: 11.5, height: 6.28),
                  ],
                ),
              ).onTap(() {
                pickerStartDate();
              }),

              //结束日期
              FormRequireText(
                fontSize: 14,
                textColor: ColorConstants.black33,
                fontWeight: FontWeight.w400,
                text: "Job End Time".tr,
              ).marginOnly(top: 11),

              //选择结束日期
              Container(
                padding: const EdgeInsets.only(left: 16, right: 10),
                margin: const EdgeInsets.only(top: 10),
                height: 45,
                decoration: const BoxDecoration(
                  color: ColorConstants.grayECECEC,
                  borderRadius: BorderRadius.all(Radius.circular(5)),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    MyTextView(
                      selectedEndDate == null ? "" : DateTimeUtils.formatDate(selectedEndDate),
                      fontSize: 14,
                      hint: "Choose End Date".tr,
                      textHintColor: ColorConstants.textBlackHint,
                      isFontMedium: true,
                      textColor: ColorConstants.black33,
                    ).expanded(),
                    MyAssetImage(Assets.baseServiceTriangleDropDownIcon, width: 11.5, height: 6.28),
                  ],
                ),
              ).onTap(() {
                pickerEndDate();
              }),

              Container(
                margin: const EdgeInsets.only(top: 25),
                color: const Color(0XFFCECECE),
                height: 0.5,
              ),
              Row(
                children: [
                  Expanded(
                      flex: 1,
                      child: InkWell(
                        onTap: () {
                          onCancel();
                        },
                        child: MyTextView(
                          "Cancel".tr,
                          fontSize: 17.5,
                          isFontMedium: true,
                          textAlign: TextAlign.center,
                          textColor: Color(0XFF0085C4),
                          cornerRadius: 3,
                          borderWidth: 1,
                        ),
                      )),
                  Container(
                    color: Color(0xff09141F).withOpacity(0.13),
                    width: 0.5,
                  ),
                  Expanded(
                      flex: 1,
                      child: InkWell(
                        onTap: () async {
                          if (selectedStartDate == null) {
                            ToastEngine.show("Choose Start Date".tr);
                            return;
                          }

                          if (selectedEndDate == null) {
                            ToastEngine.show("Choose End Date".tr);
                            return;
                          }

                          widget.confirmAction?.call(selectedStartDate!, selectedEndDate!);
                          onCancel();
                        },
                        child: MyTextView(
                          "Submit".tr,
                          marginLeft: 10,
                          fontSize: 17.5,
                          isFontMedium: true,
                          textAlign: TextAlign.center,
                          textColor: const Color(0XFF0085C4),
                          cornerRadius: 3,
                        ),
                      )),
                ],
              ).constrained(height: 46),
            ],
          ),
        ),
      ],
    ).constrained(width: 285);
  }

  /// 筛选开始日期
  void pickerStartDate() {
    DatePickerUtil.showCupertinoDatePicker(
      selectedDateTime: selectedStartDate,
      mode: CupertinoDatePickerMode.dateAndTime,
      onDateTimeChanged: (date) {
        setState(() {
          selectedStartDate = date;
        });
      },
      title: "Start Date".tr,
    );
  }

  /// 筛选结束日期
  void pickerEndDate() {
    DatePickerUtil.showCupertinoDatePicker(
      selectedDateTime: selectedEndDate ?? selectedStartDate,
      mode: CupertinoDatePickerMode.dateAndTime,
      onDateTimeChanged: (date) {
        setState(() {
          selectedEndDate = date;
        });
      },
      title: "End Date".tr,
    );
  }

  //取消弹框
  void onCancel() async {
    SmartDialog.dismiss();
  }
}