import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

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

//高亮样式
final TextStyle highStyle =
    TextStyle(color: const Color(0xFFEEDFA8), fontSize: 20.sp);

//默认样式
final TextStyle defaultStyle = TextStyle(color: Colors.black, fontSize: 20.sp);

//预览样式封装-密码
InlineSpan emailPasswardSpan = TextSpan(children: [
  TextSpan(
      text:
          '${TranslationLoader.lanKeys!.hello!.tr}，${TranslationLoader.lanKeys!.yourRoomIs!.tr}：',
      style: defaultStyle),
  TextSpan(
      text: '{${TranslationLoader.lanKeys!.roomName!.tr}', style: highStyle),
  TextSpan(
      text: '，${TranslationLoader.lanKeys!.theCodeToOpenTheDoorIs!.tr}：',
      style: defaultStyle),
  TextSpan(
      text: '{${TranslationLoader.lanKeys!.password!.tr}}', style: highStyle),
  TextSpan(
      text: '。${TranslationLoader.lanKeys!.periodValidity!.tr}：',
      style: defaultStyle),
  TextSpan(
      text: '{${TranslationLoader.lanKeys!.periodValidity!.tr}}',
      style: highStyle),
  TextSpan(
      text: '。${TranslationLoader.lanKeys!.templateTip1!.tr}。',
      style: defaultStyle),
]);

//预览样式封装-密码提示
InlineSpan emailPasswardTipSpan = TextSpan(children: [
  TextSpan(
      text: TranslationLoader.lanKeys!.templateTip4!.tr, style: defaultStyle),
  TextSpan(
      text: '{${TranslationLoader.lanKeys!.roomName!.tr}}', style: highStyle),
  TextSpan(text: '、', style: defaultStyle),
  TextSpan(
      text: '{${TranslationLoader.lanKeys!.password!.tr}}', style: highStyle),
  TextSpan(text: TranslationLoader.lanKeys!.and!.tr, style: defaultStyle),
  TextSpan(
      text: '{${TranslationLoader.lanKeys!.periodValidity!.tr}}',
      style: highStyle),
  TextSpan(
      text: TranslationLoader.lanKeys!.willBeReplacedWithTheActualValue!.tr,
      style: defaultStyle),
]);

String emaiPasswardStr =
    "${TranslationLoader.lanKeys!.hello!.tr}，${TranslationLoader.lanKeys!.yourRoomIs!.tr}：{${TranslationLoader.lanKeys!.roomName!.tr}}，${TranslationLoader.lanKeys!.theCodeToOpenTheDoorIs!.tr}：{${TranslationLoader.lanKeys!.password!.tr}}。${TranslationLoader.lanKeys!.periodValidity!.tr}：{${TranslationLoader.lanKeys!.periodValidity!.tr}}。${TranslationLoader.lanKeys!.templateTip1!.tr}";

//预览样式封装-电子钥匙
InlineSpan emailElectronicKeySpan = TextSpan(children: [
  TextSpan(
      text: TranslationLoader.lanKeys!.templateTip2!.tr, style: defaultStyle),
  TextSpan(text: 'https://abc.com/bcd', style: highStyle)
]);

//预览样式封装-电子钥匙提示
InlineSpan emailElectronicKeyTipSpan = TextSpan(children: [
  TextSpan(
      text: TranslationLoader.lanKeys!.templateTip4!.tr, style: defaultStyle),
  TextSpan(
      text: '{${TranslationLoader.lanKeys!.downloadLink!.tr}',
      style: highStyle),
  TextSpan(
      text: TranslationLoader.lanKeys!.willBeReplacedWithTheActualValue!.tr,
      style: defaultStyle),
]);

String emailElectronicKeyStr =
    "${TranslationLoader.lanKeys!.templateTip2!.tr}\n{${TranslationLoader.lanKeys!.downloadLink!.tr}}";

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

  @override
  State<ValueAddedServicesAddEmailTemplatePage> createState() =>
      _ValueAddedServicesAddEmailTemplatePageState();
}

class _ValueAddedServicesAddEmailTemplatePageState
    extends State<ValueAddedServicesAddEmailTemplatePage> {
  final _templateOneTf = TextEditingController();
  final _templateNameTf = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    _templateOneTf.text = emailElectronicKeyStr;

    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: TitleAppBar(
            barTitle: TranslationLoader.lanKeys!.customMailTemplate!.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: ListView(
          children: [
            _buildEditTopInfo(),
            SizedBox(
              height: 10.h,
            ),
            _buildEditTemplate(),
            SizedBox(
              height: 10.h,
            ),
            _buildpreview(),
            SizedBox(height: 42.h),
            SubmitBtn(
                btnName: TranslationLoader.lanKeys!.save!.tr,
                borderRadius: 10.w,
                margin: EdgeInsets.only(
                    left: 30.w, right: 30.w, top: 30.w, bottom: 30.w),
                padding: EdgeInsets.only(top: 25.w, bottom: 25.w),
                onClick: () {
                  // Navigator.pushNamed(context, Routers.sendElectronicKeyManagePage);
                }),
          ],
        ));
  }

  Widget _buildEditTopInfo() {
    return Column(
      children: [
        CommonItem(
            leftTitel: TranslationLoader.lanKeys!.name!.tr,
            rightTitle: "",
            isHaveLine: true,
            isHaveRightWidget: true,
            rightWidget: getTFWidget(
                _templateNameTf, TranslationLoader.lanKeys!.pleaseEnter!.tr)),
        CommonItem(
            leftTitel: TranslationLoader.lanKeys!.type!.tr,
            rightTitle: TranslationLoader.lanKeys!.password!.tr,
            isHaveLine: false,
            action: () {
              _showSelectTemplateType();
            }),
      ],
    );
  }

  Widget _buildEditTemplate() {
    return Container(
      color: Colors.white,
      child: Column(
        children: [
          Row(
            children: [
              Padding(
                padding: EdgeInsets.only(
                    left: 25.w, top: 25.h, bottom: 25.h, right: 25.w),
                child: Text(
                  TranslationLoader.lanKeys!.templateContent!.tr,
                  style:
                      TextStyle(fontSize: 28.sp, fontWeight: FontWeight.w600),
                ),
              ),
            ],
          ),
          Container(
            margin: EdgeInsets.only(left: 25.w, right: 25.w, bottom: 25.h),
            height: 100,
            child: TextField(
              maxLines: 8,
              // maxLength:1000,
              textAlign: TextAlign.start,
              controller: _templateOneTf,
              style: TextStyle(
                color: Colors.black,
                fontSize: 28.sp,
              ),
              decoration: InputDecoration(
                contentPadding: EdgeInsets.only(
                    top: 20.h, left: 20.w, right: 20.w, bottom: 20.h),
                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,
                  ),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.only(
                top: 20.h, left: 20.w, right: 20.w, bottom: 20.h),
            margin: EdgeInsets.only(left: 15.w, right: 15.w, bottom: 15.h),
            decoration: BoxDecoration(
                color: const Color(0xFFFbF9EC),
                borderRadius: BorderRadius.circular(10.h)),
            child: RichText(text: emailElectronicKeyTipSpan),
          )
        ],
      ),
    );
  }

  Widget _buildpreview() {
    return Column(
        // mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
              color: Colors.white,
              margin: EdgeInsets.only(bottom: 20.h),
              child: Column(
                children: [
                  Column(
                    children: [
                      Row(
                        children: [
                          Padding(
                            padding: EdgeInsets.only(
                                left: 25.w,
                                top: 25.h,
                                bottom: 25.h,
                                right: 25.w),
                            child: Text(
                              TranslationLoader.lanKeys!.preview!.tr,
                              style: TextStyle(fontSize: 20.sp),
                            ),
                          ),
                        ],
                      ),
                      Container(
                        margin: EdgeInsets.only(
                            left: 25.w, right: 25.w, bottom: 20.h),
                        padding: EdgeInsets.only(
                            left: 20.w, top: 20.h, right: 20.w, bottom: 20.h),
                        decoration: BoxDecoration(
                          color: const Color(0xFFF5F5F5),
                          borderRadius: BorderRadius.circular(10.h),
                        ),
                        child: RichText(text: emailElectronicKeySpan),
                      )
                    ],
                  ),
                ],
              ))
        ]);
  }

  Widget getTFWidget(TextEditingController tfController, String tfStr) {
    return Container(
      height: 50.h,
      width: 500.w,
      child: Row(
        children: [
          Expanded(
            child: TextField(
              //输入框一行
              maxLines: 1,
              controller: tfController,
              autofocus: false,
              textAlign: TextAlign.end,
              decoration: InputDecoration(
                //输入里面输入文字内边距设置
                contentPadding: const EdgeInsets.only(top: 12.0, bottom: 8.0),
                hintText: tfStr,
                //不需要输入框下划线
                border: InputBorder.none,
              ),
            ),
          ),
        ],
      ),
    );
  }

  void _showSelectTemplateType() {
    var list = [
      TranslationLoader.lanKeys!.electronicKey!.tr,
      TranslationLoader.lanKeys!.password!.tr
    ];
    ShowBottomSheetTool().showSingleRowPicker(
        //上下文
        context,
        //默认的索引
        normalIndex: 0,
        title: TranslationLoader.lanKeys!.type!.tr,
        cancelTitle: TranslationLoader.lanKeys!.cancel!.tr,
        sureTitle: TranslationLoader.lanKeys!.sure!.tr,
        //要显示的列表
        //可自定义数据适配器
        //adapter: PickerAdapter(),
        data: list,
        //选择事件的回调
        clickCallBack: (int index, var str) {});
  }
}