import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:flutter/cupertino.dart';
import '../redux/AppState.dart';
import '../model/UserInfo.dart';
import '../pages/MyWallet.dart';
import '../pages/BindGame.dart';
import '../pages/RecordList.dart';
import '../net/HttpManager.dart';
import '../net/Result.dart';
import '../redux/UserRedux.dart';
import '../pages/UserChange.dart';

class HomeDrawer extends StatefulWidget {
  @override
  HomeDrawerState createState() => HomeDrawerState();
}

class HomeDrawerState extends State<HomeDrawer> {
  Future<void> getUserInfo() async {
    Result res = await HttpManager.get('userInfo/getUserInfo');
    if (res.success) {
      StoreProvider.of<AppState>(context).dispatch(UpdateUserAction(UserInfo.fromJson(res.data)));
    } else {}
  }

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration.zero, () => getUserInfo());
  }

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, UserInfo>(
      converter: (Store store) => store.state.userInfo,
      builder: (context, userInfo) {
        return Drawer(
            child: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
            begin: Alignment.bottomRight,
            colors: [Color(0xFF3D3E6C), Color(0xFF626C85)],
          )),
          child: Column(
            children: <Widget>[
              Container(
                height: 210,
                decoration: BoxDecoration(color: Color(0x4D000000)),
                child: SafeArea(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ClipOval(
                        child: InkWell(
                          child: Image.network(
                            userInfo.icon,
                            width: 86,
                            height: 86,
                            fit: BoxFit.cover,
                          ),
                          onTap: () {
                            Navigator.push(context, CupertinoPageRoute(builder: (context) => UserChange()));
                          },
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 16),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              userInfo.nickname,
                              style: TextStyle(fontSize: 27, color: Colors.white, fontWeight: FontWeight.w700),
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Container(
                                  margin: EdgeInsets.only(right: 4),
                                  child: SizedBox(
                                    width: 20,
                                    height: 20,
                                    child: Image.asset('images/icon_jinbi_da_bai.png'),
                                  ),
                                ),
                                Text(
                                  userInfo.moneyCoin.toString(),
                                  style: TextStyle(fontSize: 16, color: Colors.white, fontWeight: FontWeight.w700),
                                )
                              ],
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  padding: EdgeInsets.only(top: 10),
                  child: Column(
                    children: <Widget>[
                      DrawerMenu(
                        'images/icon_qianbao.png',
                        '我的钱包',
                        onTap: () {
                          Navigator.push(context, CupertinoPageRoute(builder: (context) => MyWallet()));
                        },
                      ),
                      Divder(),
                      DrawerMenu('images/icon_zhanji.png', '我的战绩', onTap: () {
                        Navigator.push(context, CupertinoPageRoute(builder: (context) => RecordList()));
                      }),
                      Divder(),
                      DrawerMenu(
                        'images/icon_bangding.png',
                        '游戏绑定',
                        onTap: () {
                          Navigator.push(context, CupertinoPageRoute(builder: (context) => BindGame()));
                        },
                      ),
                      // Divder(),
                      // DrawerMenu('images/home_icon_shezhi.png', '个人设置',onTap: (){
                      //    Navigator.push(context, CupertinoPageRoute(builder: (context) => Setting()));
                      // },)
                    ],
                  ),
                ),
              )
            ],
          ),
        ));
      },
    );
  }
}

typedef void OnDrawerMenuTap();

class Divder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 1,
      padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
      child: Container(
        decoration: BoxDecoration(color: Color(0x2E000000)),
      ),
    );
  }
}

class DrawerMenu extends StatelessWidget {
  final String icon;
  final String title;
  final OnDrawerMenuTap onTap;
  DrawerMenu(this.icon, this.title, {this.onTap});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      padding: EdgeInsets.fromLTRB(30, 0, 28, 0),
      child: GestureDetector(
        onTap: onTap,
        child: Row(
          children: <Widget>[
            Image.asset(icon),
            Expanded(
              flex: 1,
              child: Container(
                margin: EdgeInsets.only(left: 16),
                child: Text(
                  title,
                  style: TextStyle(color: Colors.white, fontSize: 15, fontWeight: FontWeight.w700),
                ),
              ),
            ),
            Image.asset('images/icon_inter.png')
          ],
        ),
      ),
    );
  }
}