import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_native_contact_picker/flutter_native_contact_picker.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/appRouters.dart';
import 'package:star_lock/main/lockDetail/electronicKey/sendEmailNotification/SendEmailNotification_logic.dart';
import 'package:star_lock/main/lockDetail/electronicKey/sendEmailNotification/sendEmailNotification_entity.dart';
import 'package:star_lock/main/lockDetail/electronicKey/sendEmailNotification/sendEmailNotification_state.dart';
import 'package:star_lock/tools/emailNotifyTypeSelectAlert.dart';
import 'package:star_lock/tools/pickers/pickers.dart';
import 'package:star_lock/tools/pickers/style/default_style.dart';

import '../../../../app_settings/app_colors.dart';
import '../../../../tools/commonItem.dart';
import '../../../../tools/submitBtn.dart';
import '../../../../tools/titleAppBar.dart';

class SendEmailNotificationPage extends StatefulWidget {
  const SendEmailNotificationPage({Key? key}) : super(key: key);

  @override
  State<SendEmailNotificationPage> createState() =>
      _SendEmailNotificationPageState();
}

class _SendEmailNotificationPageState extends State<SendEmailNotificationPage> {
  final SendEmailNotificationLogic logic =
      Get.put(SendEmailNotificationLogic());
  final SendEmailNotificationState state =
      Get.find<SendEmailNotificationLogic>().state;

  @override
  void initState()  {
    super.initState();


  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.mainBackgroundColor,
      appBar: TitleAppBar(
          barTitle: state.channelType.value == 1 ? '短信通知'.tr : '邮件通知'.tr,
          haveBack: true,
          backgroundColor: AppColors.mainColor),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Obx(() => state.getReceiver.value.isNotEmpty
                ? CommonItem(
                    leftTitel: '接收者'.tr,
                    rightTitle: state.getReceiver.value,
                    isHaveLine: true,
                  )
                : CommonItem(
                    leftTitel: '接收者'.tr,
                    isHaveLine: true,
                    isHaveRightWidget: true,
                    rightWidget: _buildReceiverItemWidget())),
            Obx(() => CommonItem(
                  leftTitel: '类型'.tr,
                  rightTitle: state.getNotifyTypeText.value,
                  isHaveDirection: true,
                  action: () {
                    EmailNotifyTypeSelectAlert.showEmailNotifyTypeSelectAlert(
                        isEmail: state.channelType.value == 2,
                        onSelected: (int value) {
                          state.notifyTypeSelect.value = value;
                          state.updateNotifyTypeText();
                        });
                  },
                )),
            Container(height: 10.h),
            Obx(() => CommonItem(
                  leftTitel: '模板'.tr,
                  rightTitle: state.currentNotifyItem.value.name ?? '',
                  isHaveDirection: true,
                  isHaveLine: true,
                  action: () {
                    openBottomItemSheet(context);
                  },
                )),
            Container(
              // height: 360.h,
              color: Colors.white,
              padding: EdgeInsets.only(
                  left: 20.w, right: 20.w, top: 20.h, bottom: 20.h),
              child: Column(
                children: [
                  TextField(
                    maxLines: 8,
                    maxLength: 1000,
                    textAlign: TextAlign.start,
                    controller: state.templateContentController,
                    keyboardType: TextInputType.multiline, // 多行文本键盘类型
                    textInputAction: TextInputAction.done, // 键盘完成按钮
                    onEditingComplete: () => FocusScope.of(context).unfocus(), // 点击完成
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 22.sp,
                    ),
                    decoration: InputDecoration(
                      border: OutlineInputBorder(
                        ///设置边框四个角的弧度
                        borderRadius: BorderRadius.all(Radius.circular(20.h)),

                        ///用来配置边框的样式
                        borderSide: const BorderSide(
                          ///设置边框的颜色
                          color: Color(0xffB2B2B2),

                          ///设置边框的粗细
                          width: 0.5,
                        ),
                      ),

                      ///用来配置输入框获取焦点时的颜色
                      focusedBorder: OutlineInputBorder(
                        ///设置边框四个角的弧度
                        borderRadius: BorderRadius.all(Radius.circular(20.h)),

                        ///用来配置边框的样式
                        borderSide: const BorderSide(
                          ///设置边框的颜色
                          color: Color(0xffB2B2B2),

                          ///设置边框的粗细
                          width: 1,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(height: 10.h),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      GestureDetector(
                        onTap: () {
                          Clipboard.setData(ClipboardData(
                              text: state.templateContentController.text));
                          EasyLoading.showToast('复制成功'.tr);
                        },
                        child: Container(
                          margin: EdgeInsets.only(left: 20.w, top: 0),
                          child: const Icon(
                            Icons.copy,
                            color: Colors.blue,
                          ),
                        ),
                      )
                    ],
                  )
                ],
              ),
            ),
            _buildNewTemplateBtn(),
            SizedBox(height: 40.h),
            SubmitBtn(
                btnName: '发送'.tr,
                fontSize: 28.sp,
                borderRadius: 20.w,
                margin: EdgeInsets.only(left: 30.w, right: 30.w, top: 30.w),
                padding: EdgeInsets.only(top: 25.w, bottom: 25.w),
                onClick: () {
                  if (state.notifyTypeSelect.value == 1) {
                    logic.keyNoticeSubmitRequest();
                  } else {
                    logic.sendPersonalSMSOrEmail();
                  }
                }),
          ],
        ),
      ),
    );
  }

  Widget _buildNewTemplateBtn() {
    return GestureDetector(
      child: Container(
        height: 60.h,
        margin: EdgeInsets.only(left: 0.w, right: 0.w),
        color: Colors.white,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'images/icon_btn_add.png',
              width: 28.w,
              height: 28.w,
            ),
            SizedBox(
              width: 6.w,
            ),
            Text(
              '新建模版'.tr,
              style: TextStyle(
                  color: AppColors.mainColor,
                  fontSize: 24.sp,
                  fontWeight: FontWeight.bold),
            )
          ],
        ),
      ),
      onTap: () {
        Get.toNamed(Routers.newSMSTemplatePage);
      },
    );
  }

  Widget _buildReceiverItemWidget() {
    return Container(
      constraints: BoxConstraints(maxWidth: 400.w), // 设置父组件的宽度约束
      child: Row(
        mainAxisSize: MainAxisSize.min, // 设置 Row 的 mainAxisSize 属性
        children: <Widget>[
          Flexible(
            fit: FlexFit.loose, // 使用 Flexible 并设置ting fit 属性
            child: SizedBox(width: 10.w),
          ),
          if (state.channelType.value == 1)
            GestureDetector(
              child: Container(
                width: 90.w,
                color: Colors.white,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Obx(() => Text(
                          '+${state.countryCode.value.toString()}',
                          style: TextStyle(
                              color: AppColors.darkGrayTextColor,
                              fontSize: 20.sp),
                        )),
                    Image.asset(
                      'images/icon_grayPullDown.png',
                      width: 20.w,
                      height: 20.w,
                    ),
                  ],
                ),
              ),
              onTap: () async {
                final result =
                    await Get.toNamed(Routers.selectCountryRegionPage);
                if (result != null) {
                  result as Map<String, dynamic>;
                  state.countryCode.value = int.parse(result['code']);
                  state.countryName.value = result['countryName'];
                }
              },
            )
          else
            Container(),
          getReceiverTFWidget(),
          Container(
            width: 32.w,
            height: 32.w,
            decoration: const BoxDecoration(
              color: Colors.white,
              image: DecorationImage(
                  image: AssetImage('images/icon_addressBook.png'),
                  fit: BoxFit.fill),
            ),
            alignment: Alignment.center,
            child: InkWell(
              onTap: () async {
                final Contact? currentContact =
                    await logic.state.contactPicker.selectContact();
                logic.state.contact = currentContact!;
                if (currentContact.phoneNumbers!.isNotEmpty) {
                  logic.state.receiverController.text = currentContact
                      .phoneNumbers![0]
                      .replaceAll(RegExp(r'\s+\b|\b\s'), '');
                }
                // if (currentContact.fullName!.isNotEmpty) {
                //   logic.state.keyNameController.text = currentContact.fullName!;
                // }
              },
            ),
          )
        ],
      ),
    );
  }

  // 接受者信息输入框
  Widget getReceiverTFWidget() {
    return SizedBox(
      height: 65.h,
      width: 200.w,
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              controller: state.receiverController,
              //输入框一行
              maxLines: 1,
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.deny('\n'),
                LengthLimitingTextInputFormatter(50),
              ],
              autofocus: false,
              textAlign: TextAlign.end,
              decoration: InputDecoration(
                hintText: '请输入'.tr,
                hintStyle: TextStyle(fontSize: 22.sp),
                focusedBorder: const OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 0, color: Colors.transparent)),
                disabledBorder: const OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 0, color: Colors.transparent)),
                enabledBorder: const OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 0, color: Colors.transparent)),
                border: const OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 0, color: Colors.transparent)),
                contentPadding: const EdgeInsets.symmetric(vertical: 0),
              ),
              style: TextStyle(
                  fontSize: 22.sp, textBaseline: TextBaseline.alphabetic),
              onChanged: (String value) {
                // 处理接收者输入改变事件
              },
            ),
          ),
        ],
      ),
    );
  }

  // 底部选择pickerView
  void openBottomItemSheet(BuildContext context) {
    final List nameList = state.emailTemplateList
        .map((EmailNotificationItem item) => item.name!)
        .toList();

    Pickers.showSinglePicker(context,
        data: nameList,
        selectData: state.currentNotifyItem.value.name,
        pickerStyle: DefaultPickerStyle(), onConfirm: (p, int position) {
      state.currentNotifyItem.value = state.emailTemplateList[position];
      state.templateContentController.text =
          state.emailTemplateList[position].template!;
    });
  }
}