import 'package:flutter/material.dart';
import 'package:flutter/services.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/messageWarn/notificationMode/notificationMode_data.dart';
import 'package:star_lock/main/lockDetail/messageWarn/notificationMode/notificationMode_logic.dart';
import 'package:star_lock/main/lockDetail/messageWarn/notificationMode/notificationMode_state.dart';
import 'package:star_lock/tools/commonItem.dart';
import 'package:star_lock/tools/submitBtn.dart';

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

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

  @override
  State<NotificationModePage> createState() => _NotificationModePageState();
}

class _NotificationModePageState extends State<NotificationModePage> {
  final NotificationModeLogic logic = Get.put(NotificationModeLogic());
  final NotificationModeState state = Get.find<NotificationModeLogic>().state;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: TitleAppBar(
            barTitle: '提醒方式'.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: SingleChildScrollView(
          child: Obx(_buildMainView),
        ));
  }

  Widget _buildMainView() {
    return Column(
      children: <Widget>[
        CommonItem(
            leftTitel: 'APP推送'.tr,
            rightTitle: '管理员'.tr,
            isHaveLine: true,
            isHaveDirection: false,
            action: () {}),
        SizedBox(
          height: 10.h,
        ),
        _buildNotifyWayItem('邮件提醒'.tr, isEmail: true),
        _buildListView(isEmail: true),
        SizedBox(
          height: 10.h,
        ),
        _buildNotifyWayItem('短信提醒'.tr, isEmail: false),
        _buildListView(isEmail: false),
        SizedBox(
          height: 60.h,
        ),
        SubmitBtn(
          btnName: '确定'.tr,
          onClick: () {
            Get.back(result: <String, List>{
              'emailReceiverList': state.emailReceiverList.value,
              'phoneReceiverList': state.phoneReceiverList.value
            });
          },
        )
      ],
    );
  }

  Widget _buildNotifyWayItem(String title, {required bool isEmail}) {
    return CommonItem(
        leftTitel: title,
        rightTitle: '',
        isHaveLine: true,
        isHaveDirection: false,
        isHaveRightWidget: true,
        rightWidget: (!isEmail
                ? state.phoneReceiverList.value.length < 3
                : state.emailReceiverList.value.length < 3)
            ? Image.asset(
                'images/icon_btn_add.png',
                width: 32.w,
                height: 32.w,
              )
            : Container(),
        action: () {
          if (isEmail) {
            if (state.emailReceiverList.value.length < 3) {
              state.emailReceiverList.value.add(MsgNoticeModeData());
            }
            state.emailReceiverList.refresh();
          } else {
            if (state.phoneReceiverList.value.length < 3) {
              state.phoneReceiverList.value.add(MsgNoticeModeData());
            }
            state.phoneReceiverList.refresh();
          }
        });
  }

  Widget _buildListView({required bool isEmail}) {
    return SizedBox(
      height: isEmail
          ? state.emailReceiverList.value.length * 62.h
          : state.phoneReceiverList.value.length * 62.h,
      child: ListView.separated(
        itemCount: isEmail
            ? state.emailReceiverList.value.length
            : state.phoneReceiverList.value.length,
        itemBuilder: (BuildContext context, int index) {
          return _buildReceiverItemWidget(index, isEmail: isEmail);
        },
        separatorBuilder: (BuildContext context, int index) {
          return Divider(
            height: 1.h,
            color: AppColors.greyBackgroundColor,
          );
        },
      ),
    );
  }

  Widget _buildReceiverItemWidget(int index, {required bool isEmail}) {
    return Container(
      padding: EdgeInsets.only(left: 20.w, right: 20.w),
      height: 62.h,
      color: Colors.white,
      child: Row(
        children: <Widget>[
          GestureDetector(
            onTap: () {
              if (isEmail) {
                state.emailReceiverList.value.removeAt(index);
                state.emailReceiverList.refresh();
              } else {
                state.phoneReceiverList.value.removeAt(index);
                state.phoneReceiverList.refresh();
              }
            },
            child: Container(
              color: Colors.white,
              child: Image.asset(
                'images/icon_massSend_delete.png',
                width: 26.w,
                height: 26.w,
              ),
            ),
          ),
          SizedBox(
            width: 20.w,
          ),
          Text(
            '接收者'.tr,
            style: TextStyle(fontSize: 22.sp),
          ),
          Expanded(child: SizedBox(width: 10.w)),
          if (!isEmail)
            GestureDetector(
              child: Container(
                width: 90.w,
                color: Colors.white,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Obx(() => Text(
                          '+${state.countryCode}',
                          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 = result['code'];
                  state.countryName.value = result['countryName'];
                }
              },
            )
          else
            Container(),
          getReceiverTFWidget(isEmail ? '请输入Email'.tr : '请输入手机号'.tr, index,
              isEmail: isEmail)
        ],
      ),
    );
  }

  // 接受者信息输入框
  Widget getReceiverTFWidget(String tfStr, int lineIndex,
      {required bool isEmail}) {
    final MsgNoticeModeData msgData = isEmail
        ? state.emailReceiverList.value[lineIndex]
        : state.phoneReceiverList.value[lineIndex];
    msgData.countryCode = state.countryCode.value;
    msgData.receiverTF.text =
        isEmail ? msgData.receiveEmail : msgData.receivePhone;
    return SizedBox(
      height: 65.h,
      width: 200.w,
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              controller: msgData.receiverTF,
              //输入框一行
              maxLines: 1,
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.deny('\n'),
                LengthLimitingTextInputFormatter(30),
              ],
              autofocus: false,
              textAlign: TextAlign.end,
              decoration: InputDecoration(
                hintText: tfStr,
                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) {
                if (isEmail) {
                  msgData.receiveEmail = value;
                  state.emailReceiverList.value[lineIndex] = msgData;
                } else {
                  msgData.receivePhone = value;
                  state.phoneReceiverList.value[lineIndex] = msgData;
                }
              },
            ),
          ),
        ],
      ),
    );
  }
}