import 'package:chat/data/constants.dart';
import 'package:chat/generated/i18n.dart';
import 'package:chat/home/IndexPage.dart';
import 'package:chat/utils/CustomUI.dart';
import 'package:chat/utils/TutorialOverlay.dart';
import 'package:flutter/material.dart';
import '../utils/ShadowButton.dart';
import '../home/EditData.dart';
import '../data/UserData.dart';
import '../utils/TokenMgr.dart';
import 'package:dio/dio.dart';
import '../utils/HttpUtil.dart';

double opacityRate = 0.4;

class SelectSex extends StatefulWidget {
  SelectSex({Key key}) : super(key: key);

  _SelectSexState createState() => _SelectSexState();
}

class _SelectSexState extends State<SelectSex> {
  int boyFlag = 1;
  @override
  Widget build(BuildContext context) {
    Widget appBar = new AppBar(
      title: new Text(I18n.of(context).who, textScaleFactor: 1.0),
      centerTitle: true,
      elevation: 0,
      // leading: IconButton(
      //   onPressed: () {
      //     HttpUtil().clearCacheData();
      //     Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(
      //       builder: (context) {
      //         return IndexPage();
      //       },
      //     ), (route) => route == null);
      //   },
      //   icon: Icon(Icons.arrow_back),
      // ),
      leading: CustomUI.buildCustomLeading(context, onTap: () {
        HttpUtil().clearCacheData();
        Navigator.of(context).pushAndRemoveUntil(new MaterialPageRoute(
          builder: (context) {
            return IndexPage();
          },
        ), (route) => route == null);
      }),
    );
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
          child: Center(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: _buildBody(),
        ),
      )),
      appBar: appBar,
    );
  }

  Widget _buildBody() {
    return new Column(
      children: <Widget>[
        _buildTips(),
        _buildSex(),
        _buildRegisterButton(),
      ],
    );
  }

  Widget _buildTips() {
    return new Container(
      alignment: Alignment.center,
      child: new Text(
        I18n.of(context).cannot_modified,
        textScaleFactor: 1.0,
        style: TextStyle(color: const Color(0xFF787878), fontSize: 14),
      ),
    );
  }

  postSexSetting() async {
    var sex = this.boyFlag;
    Map data = {
      "userid": UserData().basicInfo.userId,
      "sex": sex,
    };
    data['sign'] = TokenMgr().getSign(data);
    try {
      Response res = await HttpUtil().post('user/setting/sex', data: data);
      var resData = res.data;
      if (resData['code'] == 0) {
        UserData().basicInfo.sex = sex;
        Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (context) => EditPage(
                  isEditPage: false,
                )));
      } else {}
    } catch (e) {}
  }

  Widget _buildRegisterButton() {
    Text text = new Text(I18n.of(context).determine,
        textScaleFactor: 1.0,
        style: TextStyle(fontSize: 15, color: Colors.white));

    LinearGradient gradientColor = new LinearGradient(colors: <Color>[
      Constants.ConfrimButtonColor,
      Constants.ConfrimButtonColor,
    ]);

    return new Container(
      margin: EdgeInsets.only(top: 10),
      height: 44,
      width: MediaQuery.of(context).size.width * 0.6,
      child: ShadowButton().builder(gradientColor, text, () {
        Navigator.of(context).push(TutorialOverlay(
            child: Align(
          child: Container(
            height: 192,
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(10)),
            alignment: Alignment.center,
            width: 298,
            child: Column(
              children: <Widget>[
                Align(
                  alignment: Alignment.centerRight,
                  child: InkWell(
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                    child: Container(
                        padding: EdgeInsets.only(
                            bottom: 10, right: 14, top: 10, left: 14),
                        child: Icon(
                            IconData(
                              0xe679,
                              fontFamily: 'iconfont',
                            ),
                            size: 17,
                            color: Colors.grey[400] //const Color(0xFF939393),
                            )),
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(left: 20, right: 20, top: 12),
                  child: Text(
                    I18n.of(context).cannot_modified,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 18),
                  ),
                ),
                Container(
                    margin: EdgeInsets.only(top: 40),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        InkWell(
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                          child: Container(
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  border: Border.all(
                                      color: const Color(0xFF2D81FF)),
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(
                                          Constants.LittleButtonRadius))),
                              height: 36.5,
                              width: 93.5,
                              alignment: Alignment.center,
                              child: Text(
                                I18n.of(context).cancel,
                                style: TextStyle(
                                  fontSize: 15,
                                  color: const Color(0xFF2D81FF),
                                ),
                              )),
                        ),
                        InkWell(
                          onTap: postSexSetting,
                          child: Container(
                              decoration: Constants.ConfirmBUttonBoxDecoration,
                              height: 36.5,
                              width: 93.5,
                              alignment: Alignment.center,
                              child: Text(
                                I18n.of(context).determine,
                                style: TextStyle(
                                  fontSize: 15,
                                  color: Colors.white,
                                ),
                              )),
                        ),
                      ],
                    ))
              ],
            ),
          ),
        )));
        // CustomUI.buildOneConfirm(context, I18n.of(context).cannot_modified,
        //     I18n.of(context).determine, postSexSetting);
      }),
    );
  }

  Widget _buildPostion(flag, color) {
    return Positioned(
      right: 0,
      top: 10,
      child: flag
          ? Container(
              padding: EdgeInsets.zero,
              margin: EdgeInsets.zero,
              decoration: BoxDecoration(shape: BoxShape.circle, color: color),
              child: Icon(
                Icons.check,
                color: Colors.white,
                size: 20,
              ))
          : Container(),
    );
  }

  Widget _buildSex() {
    Widget pictureMan = new Align(
      alignment: Alignment.centerLeft,
      child: Image.asset(
        'assets/images/login/xzxb_male.png',
        width: MediaQuery.of(context).size.width * 0.53,
      ),
    );
    Widget pictureWomen = new Align(
      alignment: Alignment.centerRight,
      child: Image.asset(
        'assets/images/login/xzxb_female.png',
        width: MediaQuery.of(context).size.width * 0.53,
      ),
    );
    Widget manBox = new Align(
        alignment: Alignment.center,
        child: Stack(
          children: <Widget>[
            Container(
              height: 100,
              width: 100,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.circle,
                boxShadow: boyFlag == 1
                    ? [
                        BoxShadow(
                          color: const Color(0xBF045080),
                          offset: Offset(0, 2.5),
                          blurRadius: 4,
                        )
                      ]
                    : [],
                border: new Border.all(color: Color(0xFF0767A4), width: 3),
              ),
              child: new InkWell(
                  onTap: () {
                    setState(() {
                      boyFlag = 1;
                    });
                  },
                  highlightColor: Colors.transparent,
                  radius: 0.0,
                  child: new Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Text(
                        I18n.of(context).boy,
                        textScaleFactor: 1.0,
                        style: TextStyle(
                            fontSize: 30, color: const Color(0xFF0767A4)),
                      ),
                      UserData().language == LanguageType.English
                          ? Container()
                          : new Text(
                              'Male',
                              textScaleFactor: 1.0,
                              style: TextStyle(
                                  fontSize: 11, color: const Color(0xFF0767A4)),
                            )
                    ],
                  )),
            ),
            _buildPostion(boyFlag == 1, const Color(0xFF0767A4))
          ],
        ));

    Widget womanBox = Align(
      alignment: Alignment.center,
      child: Stack(children: <Widget>[
        InkWell(
          onTap: () {
            setState(() {
              boyFlag = 2;
            });
          },
          highlightColor: Colors.transparent,
          radius: 0.0,
          child: Container(
              alignment: Alignment.center,
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white,
                boxShadow: boyFlag == 2
                    ? [
                        BoxShadow(
                          color: const Color(0xBF720041),
                          offset: Offset(0, 2.5),
                          blurRadius: 4,
                        )
                      ]
                    : [],
                border: Border.all(color: Color(0xFFE80D89), width: 3),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    I18n.of(context).girl,
                    textScaleFactor: 1.0,
                    style:
                        TextStyle(fontSize: 30, color: const Color(0xFFE80D89)),
                  ),
                  UserData().language == LanguageType.English
                      ? Container()
                      : Text(
                          'Female',
                          textScaleFactor: 1.0,
                          style: TextStyle(
                              fontSize: 11, color: const Color(0xFFE80D89)),
                        )
                ],
              )),
        ),
        _buildPostion(boyFlag == 2, const Color(0xFFE80D89))
      ]),
    );

    return new Stack(
      children: <Widget>[
        Opacity(
          opacity: boyFlag == 1 ? 1.0 : opacityRate,
          child: pictureMan,
        ),
        Opacity(
          opacity: boyFlag == 2 ? 1 : opacityRate,
          child: pictureWomen,
        ),
        new Column(
          children: <Widget>[
            SizedBox(height: MediaQuery.of(context).size.height * 0.68 * 0.2),
            Opacity(
              opacity: boyFlag == 1 ? 1 : opacityRate,
              child: manBox,
            ),
            SizedBox(height: MediaQuery.of(context).size.height * 0.68 * 0.14),
            Opacity(
              opacity: boyFlag == 2 ? 1 : opacityRate,
              child: womanBox,
            ),
          ],
        )
      ],
    );
  }
}