import 'package:cs_resources/generated/assets.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_load_image.dart';
import '../my_text_view.dart';
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
import 'package:widgets/widget_export.dart';

import '../no_shadow_scroll_behavior.dart';

/*
 * 自定义的弹窗
 * 可自定义设置弹窗的宽度 默认宽度 MediaQuery.of(context).size.width * 0.65
 * 弹框内容自定义传入 messageBuilder
 */
class AppCustomDialog extends HookConsumerWidget {
  String? title;
  String message;
  double? dialogWidth;
  double? contentBoxMaxHeight;
  double? contentBoxMinHeight;
  Widget Function(BuildContext context)? messageBuilder;
  VoidCallback confirmAction;
  VoidCallback? cancelAction;
  bool isShowCancelBtn;
  bool isShowConfirmBtn = true;
  String? confirmTxt;
  String? cancelTxt;

  AppCustomDialog({super.key,
    required this.message,
    required this.confirmAction,
    this.messageBuilder,
    this.title,
    this.dialogWidth,
    this.contentBoxMaxHeight = 500,
    this.contentBoxMinHeight = 300,
    this.cancelAction,
    this.isShowCancelBtn = true,
    this.isShowConfirmBtn = true,
    this.confirmTxt,
    this.cancelTxt,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isNewMessageBuilder = useState<bool>(false);
    Widget Function(BuildContext context)? _newMessageBuilder;
    useEffect((){
      Log.d("messageBuilder 发生变化");
      isNewMessageBuilder.value = true;
      _newMessageBuilder = messageBuilder;
      return () {
        // print('dispose');
      };
    }, [messageBuilder]);
    //使用一个 Column 为最外层容器，可以方便的视线 wrap_content 的效果
    return SizedBox(
      width: dialogWidth?? MediaQuery.of(context).size.width * 0.65,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: [
          //Title （如果使用 Container 为最外层容器则默认为 match_parent 的效果，除非我们限制宽度和最大高度最小高度）
          Container(
            width: double.infinity,
            height: 55,
            decoration: BoxDecoration(
              color: context.appColors.btnBgDefault,
              borderRadius: const BorderRadius.only(
                topRight: Radius.circular(15),
                topLeft: Radius.circular(15),
              ),
            ),
            child: Row(
              children: [
                const SizedBox(width: 45),
                MyTextView(
                  title ?? S.current.alert,
                  fontSize: 18,
                  textAlign: TextAlign.center,
                  isFontMedium: true,
                  textColor: Colors.white,
                ).expanded(),
                const MyAssetImage(Assets.baseServiceDialogDeleteIcon,width: 25,height: 25.5,).onTap((){
                  onCancel();
                },padding: 10)
              ],

            ),
          ),

          Container(
            width: double.infinity,
            padding: const EdgeInsets.only(top: 30),
            decoration: BoxDecoration(
              color: context.appColors.whiteSecondBG,
              borderRadius: const BorderRadius.only(
                bottomLeft: Radius.circular(15),
                bottomRight: Radius.circular(15),
              ),
            ),
            child:
            // 动态的 部分
            Column(
              children: [
                Scrollbar(
                  child: ScrollConfiguration(
                    behavior: NoShadowScrollBehavior(),
                    child: SingleChildScrollView(
                      child: message.isNotEmpty?MyTextView(
                        message,
                        fontSize: 18,
                        textColor: context.appColors.textBlack,
                        isFontRegular: true,
                        textAlign: TextAlign.center,
                        paddingLeft: 30,
                        paddingRight: 30,
                      ):  (messageBuilder != null  ? (isNewMessageBuilder.value? _newMessageBuilder!(context): messageBuilder!(context)) : Container()),
                    ),
                  ),
                ).constrained(maxHeight: contentBoxMaxHeight?? 300),
                Row(
                  children: [
                    const SizedBox(width: 18),
                    Visibility(
                      visible: isShowCancelBtn,
                      child: Expanded(
                          flex: 1,
                          child: InkWell(
                            onTap: () {
                              onCancel();
                              cancelAction?.call();
                            },
                            child: MyTextView(
                              cancelTxt ?? S.current.no,
                              fontSize: 16,
                              isFontMedium: true,
                              paddingTop: 13,
                              marginRight: 15,
                              paddingBottom: 13,
                              textAlign: TextAlign.center,
                              textColor: Colors.white,
                              backgroundColor: context.appColors.orangeBG,
                              cornerRadius: 7,
                            ),
                          )),
                    ),
                    Visibility(
                      visible: isShowConfirmBtn,
                      child: Expanded(
                          flex: 1,
                          child: InkWell(
                            onTap: () async {
                              onCancel();
                              confirmAction();
                            },
                            child: MyTextView(
                              confirmTxt ?? S.current.yes,
                              fontSize: 16,
                              paddingTop: 13,
                              paddingBottom: 13,
                              isFontMedium: true,
                              textAlign: TextAlign.center,
                              textColor: Colors.white,
                              backgroundColor: context.appColors.btnBgDefault,
                              cornerRadius: 7,
                            ),
                          )),
                    ),
                    const SizedBox(width: 18),
                  ],
                ).marginOnly(bottom: 30, top: 28),
              ],
            ),
          ),
        ],
      ).constrained(width: 300),
    );
  }

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