import 'package:cached_network_image/cached_network_image.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:flutter/cupertino.dart';
import 'package:flutter/material.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;
  List langList;

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

  @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,
    ];
  }

  @override
  void dispose() {
//    MessageMgr().off('Update Group Info', updateGroupInfo);
    super.dispose();
  }

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

    return myPop.PopupMenuButton(
        child: Container(
          constraints: BoxConstraints(
              minHeight: 41,
              minWidth: 115,
          maxWidth: 165),
          decoration: BoxDecoration(color: Color(0xffD3E7FF),borderRadius:BorderRadius.circular(10) ),
          child: Row(
            children: <Widget>[
             Expanded(child:  Text(langList[curIndex],textAlign: TextAlign.center,textScaleFactor: 1.0,style: TextStyle(color: Colors.black, fontSize: 16),)),
              Icon(IconData(0xe63b, fontFamily: Constants.IconFontFamily),
                  color: Colors.grey)
            ],
          ),
        ),
        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,
            );
          });
        });
  }

  @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(10)),),SizedBox(width: 10,)],
    );

    return Scaffold(
      appBar: appBar,
      body: SafeArea(
        child: Container(
          color: Color(0xffE8EAF0),
          child: ListView(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(left: 10, 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: 5, // 阴影
                  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>[
                        Text(
                          I18n.of(context).choose_language,
                          textScaleFactor: 1.0,
                          textAlign: TextAlign.left,
                          style: TextStyle(color: AppColors.NewAppbarTextColor,fontSize: 17),
                        ),
                        Row(
                          children: <Widget>[
                            Image.asset(
                              R.assetsImagesImgTranslationIcon,
                              width: 195,
                              height: 175,
                            ),
                            Column(
                              mainAxisSize: MainAxisSize.min,
                              children: <Widget>[
                                _langPopMenu(true),
                                SizedBox(width: 10),
                                InkWell(
                                  onTap: () {
                                    var temp = curSourceLang;
                                    curSourceLang = curToLang;
                                    curToLang = temp;
                                    setState(() {});
                                  },
                                  child: Container(
                                    child: Icon(
                                      IconData(
                                        0xe669,
                                        fontFamily: Constants.IconFontFamily,
                                      ),
                                      size: 12,
                                    ),
                                    padding: EdgeInsets.symmetric(
                                        vertical: 5, horizontal: 5),
                                  ),
                                ),
                                SizedBox(width: 20),
                                _langPopMenu(false),
                              ],
                            ),
                          ],
                        ),

                        Padding(
                          padding: EdgeInsets.only(left: 10, right: 10, top: 15),
                          child: Text(
                            I18n.of(context).translation_butler_rules,
                            textScaleFactor: 1.0,
                            style: TextStyle(color: Color(0xffABABAB), fontSize: 13),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              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: () {
                      showToast(
                          '呼叫管家${I18n.of(context).translation_butler_call}');
                    }),
              )
            ],
          ),
        ),
      ),
    );
  }
}