import 'dart:async';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:chat/chat/ChatPage.dart';
import 'package:chat/data/UserData.dart';
import 'package:chat/data/chat_data_mgr.dart';
import 'package:chat/data/group_data_mgr.dart';
import 'package:chat/home/add_friend.dart';
import 'package:chat/home/group_announcement.dart';
import 'package:chat/home/group_manage_page.dart';
import 'package:chat/models/group_info_model.dart';
import 'package:chat/models/money_change.dart';
import 'package:chat/models/ref_name_provider.dart';
import 'package:chat/utils/MessageMgr.dart';
import 'package:chat/utils/group_member_model.dart';
import 'package:chat/utils/msgHandler.dart';
import 'package:chat/utils/screen.dart';
import 'package:chat/utils/sp_utils.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:oktoast/oktoast.dart';
import 'package:provider/provider.dart';

import '../../data/constants.dart';
import '../../generated/i18n.dart';
import '../../r.dart';
import '../../utils/CustomUI.dart';
import '../../utils/FullWithButton.dart';
import '../../utils/app_navigator.dart';
import '../create_group_view.dart';
import 'package:chat/utils/PopUpMenu.dart' as myPop;

class TranslationButlerPage extends StatefulWidget {
  final GroupInfoModel groupInfoModel;

  TranslationButlerPage({Key key, this.groupInfoModel}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return TranslationButlerPageState();
  }
}

class TranslationButlerPageState extends State<TranslationButlerPage> {
  int curToLang = 1;
  int curSourceLang = UserData().language;
  int curScenes = 0;
  List langList;
  List scenesList;

  String extraMsg;

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

    initData();

    WidgetsBinding.instance.addPostFrameCallback((_) {


      Future.delayed(Duration(seconds: 2), () {
//       CustomUI.buildTranslationHelperOrderDialog(context);
        Navigator.of(context).push(
          new MaterialPageRoute(
            builder: (context) {
              return  ChatPage(
                key: Key('Chat'),
                friendId: 100006,
                isTranslateButler: true,
              );
            },
          ),
        );
      });



    });
  }

  initData() async {
    String time = (await SPUtils.get(Constants.TranslationHelper));

    if (time != null) {
      print('time:$time');

      int second = int.parse(time) ~/ 1000;
//     if(DateTime.now().millisecondsSinceEpoch~/1000-second>5*3600){ ///超过5小时清除缓存记录
//        SPUtils.save(Constants.TranslationHelper,null);
//       return;
//     }
      secondsPassed =
          ((DateTime.now().millisecondsSinceEpoch ~/ 1000 - second));
      apply();
    } else {
      print('time: null');
    }
  }

  apply() {
    isApply = false;

    timer = Timer.periodic(Duration(seconds: 1), (Timer t) {
      handleTick();
    });
    setState(() {});
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    langList = [
      I18n.of(context).english,
      I18n.of(context).Vietnamese,
      I18n.of(context).traditional_Chinese,
      I18n.of(context).Simplified_Chinese,
      I18n.of(context).Korean,
      I18n.of(context).Japanese,
    ];

    scenesList = [
      I18n.of(context).translation_scenes_1,
      I18n.of(context).translation_scenes_2,
      I18n.of(context).translation_scenes_3,
      I18n.of(context).translation_scenes_4,
    ];
  }

  @override
  void dispose() {
//    MessageMgr().off('Update Group Info', updateGroupInfo);
    timer?.cancel();

    if (!isApply && timeStamp != null) {
      print('保存时间戳$timeStamp');
      SPUtils.save(Constants.TranslationHelper, timeStamp.toString());
    }

    super.dispose();
  }

  _langPopMenu(bool isSource) {
    var curIndex = isSource ? curSourceLang : curToLang;

    return myPop.PopupMenuButton(
        child: Container(
          height: 40,
          width: double.maxFinite,
          decoration: BoxDecoration(
              color: Color(0xffD3E7FF),
              borderRadius: BorderRadius.circular(10)),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                  child: Text(
                langList[curIndex],
                textAlign: TextAlign.center,
                overflow: TextOverflow.ellipsis,
                textScaleFactor: 1.0,
                style: TextStyle(color: Color(0xff4A5E76), fontSize: 14),
              )),
              Icon(IconData(0xe63b, fontFamily: Constants.IconFontFamily),
                  size: 30, color: Color(0xff4A5E76))
            ],
          ),
        ),
        offset: Offset(0, 100),
        onSelected: (int index) {
          if (curIndex != index) {
            if (isSource) {
              curSourceLang = index;
            } else {
              curToLang = index;
            }
            print('更换翻译语言');
            setState(() {});
          }
        },
        itemBuilder: (BuildContext context) {
          return List<myPop.PopupMenuItem<int>>.generate(langList.length,
              (int i) {
            return myPop.PopupMenuItem(
              child: Container(
                alignment: Alignment.center,
                color: Colors.white,
                padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                child: Text(langList[i],
                    textScaleFactor: 1.0,
                    maxLines: 1,
                    style: TextStyle(
                        color: i == curIndex
                            ? Colors.blueAccent
                            : Color(AppColors.AppBarColor),
                        fontSize: 14)),
              ),
              value: i,
            );
          });
        });
  }

  _scenesPopMenu() {
    var curIndex = curScenes;

    return myPop.PopupMenuButton(
        child: Container(
          height: 40,
          width: double.maxFinite,
          child: Card(
            elevation: 2, // 阴影
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
//              side: BorderSide(color: Colors.green,width: 25),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Expanded(
                    child: Text(
                  scenesList[curIndex],
                  textAlign: TextAlign.center,
                  overflow: TextOverflow.ellipsis,
                  textScaleFactor: 1.0,
                  style: TextStyle(color: Color(0xff3875E9), fontSize: 14),
                )),
                Icon(IconData(0xe63b, fontFamily: Constants.IconFontFamily),
                    size: 30, color: Color(0xff4A5E76))
              ],
            ),
          ),
        ),
        offset: Offset(0, 100),
        onSelected: (int index) {
          if (curIndex != index) {
            curScenes = index;
            print('更换场景');
            setState(() {});
          }
        },
        itemBuilder: (BuildContext context) {
          return List<myPop.PopupMenuItem<int>>.generate(scenesList.length,
              (int i) {
            return myPop.PopupMenuItem(
              child: Container(
                width: Screen.width / 2 - 40,
                alignment: Alignment.center,
                color: Colors.white,
                padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                child: Text(scenesList[i],
                    textScaleFactor: 1.0,
                    maxLines: 1,
                    style: TextStyle(
                        color: i == curIndex
                            ? Colors.blueAccent
                            : Color(AppColors.AppBarColor),
                        fontSize: 14)),
              ),
              value: i,
            );
          });
        });
  }

  @override
  Widget build(BuildContext context) {
    Widget appBar = AppBar(
      backgroundColor: AppColors.NewAppbarBgColor,
      title: Text(
        I18n.of(context).translation_butler,
        textScaleFactor: 1.0,
        style: TextStyle(color: AppColors.NewAppbarTextColor),
      ),
//      leading: CustomUI.buildCustomLeading(context),
      centerTitle: true,
      actions: <Widget>[
        Container(
          child: CustomUI.buildImageLabel(R.assetsImagesCoin,
              Provider.of<MoneyChangeProvider>(context).money,
              isLeft: true),
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(15)),
        ),
        SizedBox(
          width: 10,
        )
      ],
    );

    return Scaffold(
      appBar: appBar,
      body: SafeArea(
        child: Container(
          color: Color(0xffE8EAF0),
          child: isApply ? applyPage() : waitPage(),
        ),
      ),
    );
  }

  Widget applyPage() {
    return ListView(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(left: 20, right: 10, top: 15),
          child: Text(
            I18n.of(context).translation_butler_tips,
            textScaleFactor: 1.0,
            style: TextStyle(color: Color(0xffABABAB), fontSize: 13),
          ),
        ),
        Container(
          margin: EdgeInsets.all(10),
          child: Card(
            elevation: 2, // 阴影
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
//              side: BorderSide(color: Colors.green,width: 25),
            ),
            child: Container(
              padding: EdgeInsets.all(10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(bottom: 12),
                    child: Text(
                      I18n.of(context).choose_language,
                      textScaleFactor: 1.0,
                      textAlign: TextAlign.left,
                      style: TextStyle(
                          color: AppColors.NewAppbarTextColor, fontSize: 17),
                    ),
                  ),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: _langPopMenu(true),
                        flex: 5,
                      ),
                      Expanded(
                        child: InkWell(
                          onTap: () {
                            var temp = curSourceLang;
                            curSourceLang = curToLang;
                            curToLang = temp;
                            setState(() {});
                          },
                          child: Container(
                            child: Icon(
                              IconData(
                                0xe669,
                                fontFamily: Constants.IconFontFamily,
                              ),
                              size: 24,
                              color: Color(0xff4A5E76),
                            ),
                            padding: EdgeInsets.symmetric(
                                vertical: 5, horizontal: 5),
                          ),
                        ),
                        flex: 2,
                      ),
                      Expanded(
                        child: _langPopMenu(false),
                        flex: 5,
                      ),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Image.asset(
                          R.assetsImagesImgTranslationIcon,
                          width: 195,
                          height: 175,
                        ),
                        flex: 1,
                      ),
                      Expanded(
                        child: Column(
                          children: <Widget>[
                            Text(
                              I18n.of(context).translation_butler_scenes,
                              textScaleFactor: 1.0,
                              textAlign: TextAlign.left,
                              style: TextStyle(
                                  color: AppColors.NewAppbarTextColor,
                                  fontSize: 15),
                            ),
                            _scenesPopMenu(),
                          ],
                        ),
                        flex: 1,
                      )
                    ],
                  ),
                  Container(
                    alignment: Alignment.topLeft,
                    height: 100.5,
                    width: Screen.width-50,
                    padding: EdgeInsets.only(left: 17),
//          constraints:  BoxConstraints(
//            minHeight: 82,
//          ),
                    decoration: BoxDecoration(
                        color: Color(0xFFE9EEF4),
                        borderRadius: BorderRadius.all(Radius.circular(10))),
                    child: TextField(
                      keyboardAppearance: Brightness.light,
                      decoration: new InputDecoration(
                        hintText: I18n.of(context).set_password2,
                        hintStyle: TextStyle(fontSize: 14),
                        border: InputBorder.none,
                      ),
//            maxLines: 1,
                      inputFormatters: [LengthLimitingTextInputFormatter(160)],
//            obscureText: true,
                      style: TextStyle(textBaseline: TextBaseline.alphabetic),
                      onChanged: (str) {
                        extraMsg = str;
                        setState(() {});
                      },
                    ),
                  ),
                  Text(
                    I18n.of(context).translation_butler_scenes_tips,
                    textScaleFactor: 1.0,
                    style: TextStyle(color: Color(0xFFFA7B3D), fontSize: 12),
                  ),

                ],
              ),
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.only(left: 70, right: 70, top: 50),
          height: 47,
          child: RaisedButton(
              color: Color(0xff3875E9),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10))),
              child: Text(
                I18n.of(context).translation_butler_call + ' (50h)',
                textScaleFactor: 1.0,
                style: TextStyle(color: Colors.white, fontSize: 19),
              ),
              onPressed: () {
                timeStamp = DateTime.now().millisecondsSinceEpoch;
                apply();
              }),
        ),
        Container(
          width: double.maxFinite,
          alignment: Alignment.center,
          padding: EdgeInsets.only(left: 10, right: 10, top: 15,bottom: 20),
          child: Text(
            I18n.of(context).translation_butler_rules,
            textScaleFactor: 1.0,
            style: TextStyle(color: Color(0xffABABAB), fontSize: 13),
          ),
        ),
      ],
    );
  }

  Widget waitPage() {
    //  ～/ 取整操作
    int seconds = secondsPassed % 60;
    int minutes = secondsPassed ~/ 60;

    return ListView(
      children: <Widget>[
        ///当前排队人数过多。。。
        Container(
          margin: EdgeInsets.all(10),
          child: Card(
            elevation: 2, // 阴影
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
//              side: BorderSide(color: Colors.green,width: 25),
            ),
            child: Container(
//                    width: double.maxFinite,
//                    color: Colors.blue,
              padding: EdgeInsets.fromLTRB(14, 14, 14, 22),
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(bottom: 20, top: 10),
                    child: Text(
                      I18n.of(context).translation_butler_tips2,
                      textScaleFactor: 1.0,
                      textAlign: TextAlign.left,
                      style: TextStyle(color: Color(0xff797979), fontSize: 13),
                    ),
                  ),
                  Container(
                    width: double.maxFinite,
                    child: Row(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            fixedText(
                                I18n.of(context).translation_butler_wait_people,
                                fontSize: 16,
                                color: Colors.black),
                            SizedBox(
                              height: 10,
                            ),
                            RichText(
                                maxLines: 3,
                                textAlign: TextAlign.center,
                                text: TextSpan(children: [
                                  TextSpan(
                                      text: '333',
                                      style: TextStyle(
                                          color: Color(0xffFF1010),
                                          fontSize: 27)),
                                  TextSpan(
                                      text: ' ' +
                                          I18n.of(context)
                                              .translation_butler_wait_people_unit,
                                      style: TextStyle(
                                          color: Colors.black, fontSize: 17)),
                                ]))
                          ],
                        ),
                        Container(
                          width: 1,
                          height: 65,
                          color: Color(0xffD8D8D8),
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            fixedText(
                                I18n.of(context).translation_butler_wait_time,
                                fontSize: 16,
                                color: Colors.black),
                            SizedBox(
                              height: 10,
                            ),
                            RichText(
                                maxLines: 3,
                                textAlign: TextAlign.center,
                                text: TextSpan(children: [
                                  TextSpan(
                                      text: '666',
                                      style: TextStyle(
                                          color: Color(0xff3875E9),
                                          fontSize: 27)),
                                  TextSpan(
                                      text: ' ' + I18n.of(context).minute,
                                      style: TextStyle(
                                          color: Colors.black, fontSize: 17)),
                                ]))
                          ],
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        ),

        Padding(
          padding: EdgeInsets.only(left: 20, right: 10, top: 5, bottom: 10),
          child: Text(
            I18n.of(context).translation_butler_tips3,
            textScaleFactor: 1.0,
            style: TextStyle(color: Colors.black, fontSize: 18),
          ),
        ),

        Stack(
          alignment: Alignment.center,
          children: <Widget>[
            UnconstrainedBox(
              child: Container(
                //限制进度条的高度

                height: 190.0,
                //限制进度条的宽度
                width: 190.0,
                child: CircularProgressIndicator(
                    //0~1的浮点数，用来表示进度多少;如果 value 为 null 或空，则显示一个动画，否则显示一个定值
                    value: null,
                    strokeWidth: 5,
                    //背景颜色
                    backgroundColor: Color(0xffB2B2B2),
                    //进度颜色
                    valueColor:
                        AlwaysStoppedAnimation<Color>(Color(0xff3875E9))),
              ),
            ),
            Column(
              children: <Widget>[
                Text(
                  I18n.of(context).translation_butler_already_wait,
                  textScaleFactor: 1.0,
                  style: TextStyle(color: Colors.black, fontSize: 19),
                ),
                SizedBox(
                  height: 10,
                ),
                Text(
                  getFull(minutes) + ' : ' + getFull(seconds),
                  textScaleFactor: 1.0,
                  style: TextStyle(color: Color(0xffFF1010), fontSize: 35),
                )
              ],
            )
          ],
        ),

        Container(
          margin: EdgeInsets.only(left: 70, right: 70, top: 50),
          height: 47,
          child: RaisedButton(
              color: Color(0xff3875E9),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10))),
              child: Text(
                I18n.of(context).translation_butler_cancel,
                textScaleFactor: 1.0,
                style: TextStyle(color: Colors.white, fontSize: 19),
              ),
              onPressed: () async {
                await SPUtils.save(Constants.TranslationHelper, null);
                setState(() {
                  isApply = true;
                  timer?.cancel();
                  secondsPassed = 0;
                });
              }),
        ),
        Container(
          margin: EdgeInsets.only(left: 70, right: 70, top: 25),
          height: 47,
          child: RaisedButton(
              color: Color(0xffB3B3B3),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10))),
              child: Text(
                I18n.of(context).translation_butler_wait_service,
                textScaleFactor: 1.0,
                style: TextStyle(color: Colors.white, fontSize: 19),
              ),
              onPressed: () {}),
        )
      ],
    );
  }

  bool isApply = true;
  int secondsPassed = 1;
  int timeStamp;
  Timer timer;

  void handleTick() {
//    if (isActive) {
    setState(() {
      secondsPassed = secondsPassed + 1; //需要更新UI
    });
//    }
  }

  getFull(int sec) {
    return sec < 10 ? '0$sec' : '$sec';
  }
}