import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/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);

//预览样式封装-密码
late InlineSpan passwardSpan = TextSpan(children: [
  TextSpan(
      text:
          '${TranslationLoader.lanKeys!.hello!.tr}，\n${TranslationLoader.lanKeys!.yourRoomIs!.tr}：',
      style: defaultStyle),
  TextSpan(text: '201', style: highStyle),
  TextSpan(
      text: '  ${TranslationLoader.lanKeys!.theCodeToOpenTheDoorIs!.tr}： ',
      style: defaultStyle),
  TextSpan(text: '332211\n', style: highStyle),
  TextSpan(
      text: '${TranslationLoader.lanKeys!.periodValidity!.tr}： ',
      style: defaultStyle),
  TextSpan(text: '2021.12.11 12:00 - 2021.12.12 13:00。\n', style: highStyle),
  TextSpan(
      text: TranslationLoader.lanKeys!.templateTip1!.tr, style: defaultStyle),
]);

//预览样式封装-密码
late InlineSpan electronicKeySpan = TextSpan(children: [
  TextSpan(
      text:
          '${TranslationLoader.lanKeys!.hello!.tr}，\n${TranslationLoader.lanKeys!.templateTip2!.tr}',
      style: defaultStyle),
  TextSpan(text: 'https://abc.com/bcd\n', style: highStyle),
  TextSpan(
      text: '${TranslationLoader.lanKeys!.templateTip3!.tr}\n',
      style: defaultStyle),
  TextSpan(text: 'https://abc.com/bcd', style: highStyle),
]);

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

  @override
  State<ValueAddedServicesAddSMSTemplatePage> createState() =>
      _ValueAddedServicesAddSMSTemplatePageState();
}

class _ValueAddedServicesAddSMSTemplatePageState
    extends State<ValueAddedServicesAddSMSTemplatePage> {
  final _templateOneTf = TextEditingController();
  final _templateTwoTf = TextEditingController();
  final _templateNameTf = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    _templateOneTf.text = TranslationLoader.lanKeys!.hello!.tr;
    _templateTwoTf.text = TranslationLoader.lanKeys!.templateTip1!.tr;

    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: TitleAppBar(
            barTitle: TranslationLoader.lanKeys!.customSMSTemplate!.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: ListView(
          children: [
            _buildEditTopInfo(),
            SizedBox(
              height: 10.h,
            ),
            _buildEditTemplate(),
            SizedBox(
              height: 10.h,
            ),
            _buildpreview(),
            SizedBox(height: 42.h),
            Container(
              margin: EdgeInsets.only(left: 20.w, right: 20.w),
              child: 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);
                  }),
            ),
            SizedBox(
              height: 40.h,
            )
          ],
        ));
  }

  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: 20.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: 20.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,
                  ),
                ),
              ),
            ),
          ),
          Visibility(
            visible: true,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Column(
                  children: [
                    Padding(
                        padding:
                            EdgeInsets.only(left: 25.w, top: 10.h, right: 25.w),
                        child: RichText(
                            text: TextSpan(children: [
                          TextSpan(
                              text:
                                  '${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),
                        ]))),
                  ],
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Padding(
                        padding: EdgeInsets.only(left: 25.w, top: 10.h),
                        child: RichText(
                            text: TextSpan(children: [
                          TextSpan(
                              text:
                                  '${TranslationLoader.lanKeys!.periodValidity!.tr}： ',
                              style: defaultStyle),
                          TextSpan(
                              text:
                                  '{${TranslationLoader.lanKeys!.periodValidity!.tr}}',
                              style: highStyle),
                        ]))),
                    SizedBox(
                      width: 10.w,
                    ),
                    GestureDetector(
                      onTap: () {},
                      child: Row(
                        children: [
                          Image.asset(
                            'images/icon_round_unSelect.png',
                            width: 26.w,
                            height: 26.w,
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ],
            ),
          ),
          Visibility(
            visible: false,
            child: Row(
              children: [
                Padding(
                    padding:
                        EdgeInsets.only(left: 25.w, top: 10.h, right: 25.w),
                    child: RichText(
                        text: TextSpan(children: [
                      TextSpan(
                          text:
                              '${TranslationLoader.lanKeys!.templateTip2!.tr}\n',
                          style: defaultStyle),
                      TextSpan(
                          text: 'https://abc.com/bcd\n',
                          style: TextStyle(
                              color: const Color(0xFFEEDFA8), fontSize: 20.sp)),
                      TextSpan(
                          text:
                              '${TranslationLoader.lanKeys!.templateTip3!.tr}\n',
                          style: defaultStyle),
                      TextSpan(
                          text: 'https://abc.com/bcd\n',
                          style: TextStyle(
                              color: const Color(0xFFEEDFA8), fontSize: 20.sp)),
                    ]))),
              ],
            ),
          ),
          SizedBox(height: 10.h),
          Container(
            margin: EdgeInsets.only(left: 25.w, right: 25.w, bottom: 25.h),
            height: 100,
            child: Stack(
              alignment: Alignment.bottomRight,
              children: [
                TextField(
                  maxLines: 8,
                  // maxLength:1000,
                  textAlign: TextAlign.start,
                  controller: _templateTwoTf,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 20.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,
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }

  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, fontWeight: FontWeight.w600),
                            ),
                          ),
                        ],
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 25.w, right: 25.w),
                        decoration: BoxDecoration(
                          color: const Color(0xFFF5F5F5),
                          borderRadius: BorderRadius.circular(10.h),
                        ),
                        child: Padding(
                            padding: EdgeInsets.only(
                                left: 20.w,
                                top: 20.h,
                                right: 20.w,
                                bottom: 20.h),
                            child: RichText(text: passwardSpan)),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(
                              left: 25.w,
                              top: 25.h,
                              bottom: 25.h,
                            ),
                            child: Text(
                              '${TranslationLoader.lanKeys!.expectedNotoCount!.tr}：2',
                              style: TextStyle(
                                color: Colors.grey,
                                fontSize: 20.sp,
                              ),
                            ),
                          )
                        ],
                      )
                      /*
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(
                              // left: 25.w,
                              top: 25.h,
                              bottom: 25.h,
                            ),
                            child: Text(
                              '${TranslationLoader.lanKeys!.expectedNotoCount!.tr}：2',
                              style: TextStyle(
                                color: Colors.grey,
                                fontSize: 20.sp,
                              ),
                            ),
                          ),
                        ],
                      ),
                      */
                    ],
                  ),
                ],
              ))
        ]);
  }

  Widget getTFWidget(TextEditingController tfController, String tfStr) {
    return Container(
      height: 50.h,
      width: 300.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,
                hintStyle: TextStyle(fontSize: 22.sp),
                //不需要输入框下划线
                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) {});
  }
}