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/app_settings/app_colors.dart';
import 'package:star_lock/mine/valueAddedServices/valueAddedServicesSMSTemplate/valueAddedServicesAddSMSTemplate/newSMSTemplate_entity.dart';
import 'package:star_lock/mine/valueAddedServices/valueAddedServicesSMSTemplate/valueAddedServicesAddSMSTemplate/newSMSTemplate_logic.dart';
import 'package:star_lock/mine/valueAddedServices/valueAddedServicesSMSTemplate/valueAddedServicesAddSMSTemplate/newSMSTemplate_state.dart';

import '../../../../tools/commonItem.dart';
import '../../../../tools/showBottomSheetTool.dart';
import '../../../../tools/submitBtn.dart';
import '../../../../tools/titleAppBar.dart';

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

  @override
  State<NewSMSTemplatePage> createState() => _NewSMSTemplatePageState();
}

class _NewSMSTemplatePageState extends State<NewSMSTemplatePage> {
  final NewSMSTemplateLogic logic = Get.put(NewSMSTemplateLogic());
  final NewSMSTemplateState state = Get.find<NewSMSTemplateLogic>().state;
  final FocusNode focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: TitleAppBar(
          barTitle: state.isUpdate.value == false
              ? state.channelType.value == 1
                  ? '新建短信模版'.tr
                  : '新建邮件模版'.tr
              : state.channelType.value == 1
                  ? '编辑短信模版'.tr
                  : '编辑邮件模版'.tr,
          haveBack: true,
          backgroundColor: AppColors.mainColor,
        ),
        body: GestureDetector(
            onTap: () {
              FocusScope.of(context).unfocus();
            },
            child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  _buildEditTopInfo(),
                  SizedBox(height: 10.h),
                  _buildEditTemplate(),
                  SizedBox(height: 10.h),
                  _buildPreView(),
                  SizedBox(height: 42.h),
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 20.w),
                    child: SubmitBtn(
                      btnName: '保存'.tr,
                      onClick: () {
                        if (state.currentTemplate.value.isUpdate == true) {
                          logic.updateTemplateInfo();
                        } else {
                          logic.addSMSTemplate();
                        }
                      },
                    ),
                  ),
                  SizedBox(height: 40.h),
                ],
              ),
            )));
  }

  Widget _buildEditTopInfo() {
    return Column(
      children: <Widget>[
        CommonItem(
          leftTitel: '名称'.tr,
          rightTitle: '',
          isHaveLine: true,
          isHaveRightWidget: true,
          rightWidget: getTFWidget(
            state.templateNameTf,
            '请输入'.tr,
          ),
        ),
        Obx(() => state.isUpdate.value == false
            ? CommonItem(
                leftTitel: '类型'.tr,
                rightTitle: state.currentTemplate.value.templateName ?? '',
                isHaveLine: true,
                isHaveDirection: true,
                action: _showSelectTemplateType,
              )
            : Container()),
        Obx(() => state.isUpdate.value == false
            ? CommonItem(
                leftTitel: '模版类型'.tr,
                rightTitle: state.currentTemplate.value.langName ?? '',
                isHaveLine: false,
                isHaveDirection: true,
                action: _showSelectLangType,
              )
            : Container()),
      ],
    );
  }

  Widget _buildEditTemplate() {
    return Container(
      color: Colors.white,
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(25.w),
                child: Text(
                  '模版内容'.tr,
                  style:
                      TextStyle(fontSize: 20.sp, fontWeight: FontWeight.w600),
                ),
              ),
            ],
          ),
          Container(
            margin: EdgeInsets.symmetric(horizontal: 25.w, vertical: 25.h),
            height: 100,
            child: _buildContentTF(state.templateOneTf),
          ),
          Obx(() => Container(
                width: 1.sw - 50.w,
                margin: EdgeInsets.only(left: 25.w, right: 25.w),
                padding: EdgeInsets.only(bottom: 20.h),
                child: _buildTemplateWithType(isPreview: false),
              )),
          SizedBox(height: 10.h),
          Container(
            margin: EdgeInsets.symmetric(horizontal: 25.w, vertical: 25.h),
            height: 100,
            child: Stack(
              alignment: Alignment.bottomRight,
              children: <Widget>[
                _buildContentTF(state.templateTwoTf),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _buildPreView() {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.only(bottom: 20.h),
      child: Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(top: 25.h, bottom: 25.h, left: 25.w),
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                '预览'.tr,
                style: TextStyle(fontSize: 20.sp, fontWeight: FontWeight.w600),
                textAlign: TextAlign.left,
              ),
            ),
          ),
          Obx(() => Container(
                width: 1.sw - 50.w,
                margin: EdgeInsets.only(left: 25.w, right: 25.w),
                padding: EdgeInsets.only(left: 20.w, right: 20.w, top: 10.h),
                decoration: BoxDecoration(
                  color: const Color(0xFFF5F5F5),
                  borderRadius: BorderRadius.circular(10.h),
                ),
                child: _buildTemplateWithType(isPreview: true),
              )),
          if (state.channelType.value == 1)
            Padding(
              padding: EdgeInsets.only(
                left: 25.w,
                top: 25.h,
                bottom: 25.h,
              ),
              child: Text(
                '${'预计产生短信条数'.tr}：${logic.calculateSmsCost()}',
                style: TextStyle(
                  color: Colors.grey,
                  fontSize: 20.sp,
                ),
              ),
            )
          else
            SizedBox(
              height: 20.h,
            )
        ],
      ),
    );
  }

  Widget _buildTemplateWithType({required bool isPreview}) {
    // 检查当前模板是否为空
    if (state.currentTemplate.value.template == null ||
        state.currentTemplate.value.template!.isEmpty) {
      return const SizedBox.shrink(); // 如果为空，返回一个空的 SizedBox
    } else {
      return RichText(
        text: TextSpan(
          children: state.currentTemplate.value.templateName == '电子钥匙'.tr
              ? logic.buildElectronicKeySpan(isPreview: isPreview)
              : logic.buildPasswordSpan(isPreview: isPreview),
        ),
      );
    }
  }

  Widget _buildContentTF(TextEditingController controller) {
    return TextField(
      maxLines: 8,
      textAlign: TextAlign.start,
      controller: controller,
      style: state.defaultStyle,
      autofocus: false,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.all(20.w),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(20.h),
          borderSide: const BorderSide(color: Color(0xffB2B2B2), width: 0.5),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(20.h),
          borderSide: const BorderSide(color: Color(0xffB2B2B2), width: 1),
        ),
      ),
      onChanged: (String value) {
        setState(logic.calculateSmsCost);
      },
    );
  }

  Widget getTFWidget(TextEditingController tfController, String tfStr) {
    return SizedBox(
      height: 65.h,
      width: 320.w,
      child: TextField(
        controller: tfController, //输入框一行
        maxLines: 3,
        inputFormatters: <TextInputFormatter>[
          FilteringTextInputFormatter.deny('\n'),
          LengthLimitingTextInputFormatter(50),
        ],
        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: EdgeInsets.only(top: 20.h, bottom: 0)),
        style:
            TextStyle(fontSize: 22.sp, textBaseline: TextBaseline.alphabetic),
      ),
    );
  }

  void _showSelectTemplateType() {
    final List<String> titleList = state.templateList
        .map((TemplateData template) => template.templateName ?? '')
        .toList();
    ShowBottomSheetTool().showSingleRowPicker(
      context,
      normalIndex: 0,
      title: '类型'.tr,
      cancelTitle: '取消'.tr,
      sureTitle: '确定'.tr,
      data: titleList,
      clickCallBack: (int index, Object str) {
        state.selectedTemplateIndex.value = index;
        state.currentTemplate.value = state.templateList[index];
        state.currentTemplate.value.templateName = str.toString();
        state.selectedTemplateIndex.refresh();
        state.currentTemplate.refresh();
      },
    );
  }

  void _showSelectLangType() {
    // 提取 langName 列表
    final List<String> langNames = state.langTemplateList
        .map((LangData langData) => langData.langName ?? '')
        .toList();

    ShowBottomSheetTool().showSingleRowPicker(
      context,
      normalIndex: 0,
      title: '类型'.tr,
      cancelTitle: '取消'.tr,
      sureTitle: '确定'.tr,
      data: langNames,
      clickCallBack: (int index, Object str) {
        state.selectedLangIndex.value = index;
        state.currentTemplate.value = state
            .langTemplateList[state.selectedLangIndex.value]
            .templates![state.selectedTemplateIndex.value];
        state.currentTemplate.value.langName = str.toString();
        state.selectedLangIndex.refresh();
        state.currentTemplate.refresh();
      },
    );
  }
}