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: 28.sp);

//默认样式
final TextStyle defaultStyle = TextStyle(color: Colors.black, fontSize: 28.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),
            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:(){
          _showSeletTemplateType();
        }),
      ],
    );
  }

  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,
                  ),
                ),
              ),
            ),
          ),
          Visibility(
            visible: true,
            child: Column(
              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_unSelet.png', width: 40.w, height: 40.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: highStyle),
                        TextSpan(text: '${TranslationLoader.lanKeys!.templateTip3!.tr}\n', style: defaultStyle),
                        TextSpan(text: 'https://abc.com/bcd\n', style: highStyle),
                      ]))
                  ),
                ],
              ),
          ),
          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: 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,
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }

  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: 28.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)),
                  ),
                  Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.only(left: 25.w, top: 25.h, bottom: 25.h, right: 25.w),
                        child: Text('${TranslationLoader.lanKeys!.expectedNotoCount!.tr}：2', style: TextStyle(color: Colors.grey, fontSize: 26.sp,),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          )
        )
      ]
    );
  }

  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 _showSeletTemplateType(){
    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) {

        }
    );
  }

}