import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:wanna_battle/model/ParticipatingInfo.dart';
import 'package:wanna_battle/redux/AppState.dart';
import '../styles/colors.dart';
import '../net/HttpManager.dart';

class CompetitionRank extends StatefulWidget {
  final int competitionId;

  const CompetitionRank({Key key, this.competitionId}) : super(key: key);

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

class CompetitionRankState extends State<CompetitionRank> {
  List<ParticipatingInfo> data = [];
  ParticipatingInfo myParticipatingInfo;

  Future<void> refresh() async {
    final res = await HttpManager.get('participatingInfo/rank', data: {'competitionId': widget.competitionId});
    ParticipatingInfo myParticipatingInfo;
    if (res.success) {
      List<ParticipatingInfo> list = [];
      for (var item in res.data) {
        var p = ParticipatingInfo.fromJson(item);
        list.add(p);
        if (StoreProvider.of<AppState>(context).state.userInfo.id == p.userId) {
          myParticipatingInfo = p;
        }
      }
      setState(() {
        data = list;
        this.myParticipatingInfo = myParticipatingInfo;
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        title: Text('排行榜'),
      ),
      body: Stack(
        children: <Widget>[
          RefreshIndicator(
            onRefresh: () async {
              await refresh();
              return;
            },
            child: Builder(
              builder: (context) {
                List<Widget> list = [
                  Container(
                    padding: EdgeInsets.only(bottom: 10),
                    color: SUB_COLOR,
                    child: Row(
                      children: <Widget>[
                        topRank(data.length > 1 ? data[1] : null),
                        topRank(data.length > 0 ? data[0] : null),
                        topRank(data.length > 2 ? data[2] : null),
                      ],
                    ),
                  )
                ];
                if (data.length > 3) {
                  for (int i = 3; i < data.length; i++) {
                    list.add(rankItem(data[i]));
                  }
                }
                return ListView(
                  padding: EdgeInsets.only(bottom: 48),
                  children: list,
                );
              },
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: rankItem(myParticipatingInfo, mine: true),
          )
        ],
      ),
    );
  }

  Widget topRank(ParticipatingInfo participatingInfo) {
    if (participatingInfo == null) {
      return Expanded(child: Container());
    }
    double size = participatingInfo.rank == 1 ? 80 : 70;
    List<Color> colors = [Color(0xFFD48E00), Color(0xFFFECF01)];
    String icon = 'images/icon_paihangbang_01.png';
    if (participatingInfo.rank == 2) {
      colors = [Color(0xFFC5C5C5), Color(0xFFE3E3E3)];
      icon = 'images/icon_paihangbang_02.png';
    } else if (participatingInfo.rank == 3) {
      colors = [Color(0xFFE77023), Color(0xFFF89E58)];
      icon = 'images/icon_paihangbang_03.png';
    }
    return Expanded(
      child: Container(
        margin: EdgeInsets.only(top: participatingInfo.rank == 1 ? 4 : 38),
        child: Column(
          children: <Widget>[
            Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.topCenter,
                  child: Container(
                    width: size,
                    height: size,
                    margin: EdgeInsets.only(top: 23),
                    padding: EdgeInsets.all(5),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(size / 2)),
                      gradient: LinearGradient(
                        colors: colors,
                        begin: Alignment.centerRight,
                        end: Alignment.centerLeft,
                      ),
                    ),
                    child: ClipOval(
                      child: CachedNetworkImage(
                        imageUrl: participatingInfo?.userInfo?.icon ?? '',
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.topCenter,
                  child: Image.asset(icon),
                ),
              ],
            ),
            Container(
              margin: EdgeInsets.only(top: 6),
              child: Text(
                participatingInfo?.userInfo?.nickname ?? '',
                style: TextStyle(color: PRIMARY_COLOR, fontSize: 14, fontWeight: FontWeight.bold),
              ),
            ),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Image.asset('images/icon_jifen_da.png', width: 20),
                Container(
                  margin: EdgeInsets.only(left: 2),
                  child: Text(
                    (participatingInfo?.points ?? 0).toString(),
                    style: TextStyle(color: Colors.white, fontSize: 14, fontWeight: FontWeight.bold),
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }

  Widget rankItem(ParticipatingInfo participatingInfo, {bool mine = false}) {
    if (participatingInfo == null) {
      if (mine) {
        return Container();
      }
      return Container();
    }
    return Container(
      height: mine ? 48 : 66,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: mine ? 0 : 1,
            color: Color(0x2E000000),
          ),
        ),
        color: mine ? SUB_COLOR : Colors.transparent,
      ),
      padding: EdgeInsets.only(left: 15),
      child: Row(
        children: <Widget>[
          Container(
            width: 30,
            height: 30,
            child: Stack(
              children: <Widget>[
                Image.asset('images/icon_rank.png'),
                Align(
                  alignment: Alignment.topCenter,
                  child: Container(
                    margin: EdgeInsets.only(top: 11),
                    child: Text(
                      (participatingInfo?.rank ?? 0).toString(),
                      style: TextStyle(color: Color(0xFF15151D), fontSize: 12, fontWeight: FontWeight.bold),
                    ),
                  ),
                )
              ],
            ),
          ),
          Container(
            width: mine ? 30 : 46,
            height: mine ? 30 : 46,
            margin: EdgeInsets.only(left: 10),
            child: ClipOval(
              child: CachedNetworkImage(
                imageUrl: participatingInfo?.userInfo?.icon ?? '',
                fit: BoxFit.cover,
              ),
            ),
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 19),
              child: Text(
                participatingInfo?.userInfo?.nickname ?? '',
                style: TextStyle(color: mine ? Colors.white : PRIMARY_COLOR, fontSize: 14),
              ),
            ),
          ),
          Container(
            width: 113,
            child: Row(
              children: <Widget>[
                Image.asset('images/icon_jifen_da.png', width: 20),
                Container(
                  margin: EdgeInsets.only(left: 2),
                  child: Text(
                    (participatingInfo?.points ?? 0).toString(),
                    style: TextStyle(color: Colors.white, fontSize: 14, fontWeight: FontWeight.bold),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}