import 'dart:ui';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:sport/bean/game.dart';
import 'package:sport/pages/game/game_detail.dart';
import 'package:sport/router/navigator_util.dart';
import 'package:sport/services/api/inject_api.dart';
import 'package:sport/services/api/resp.dart';
import 'package:sport/widgets/decoration.dart';
import 'package:sport/widgets/game_run.dart';
import 'package:sport/widgets/loading.dart';
import 'package:sport/widgets/misc.dart';

import '../../widgets/game_run.dart';

class SportListPage extends StatefulWidget {
  final ValueNotifier<int> index;
  SportListPage({this.index});

  @override
  State<StatefulWidget> createState() => _PageState();
}

class _PageState extends State<SportListPage> with InjectApi {
  Future<RespList<GameInfoData>> _future;
  ValueNotifier<int> index; // 渲染中间部分的
  @override
  void initState() {
    super.initState();
    index = widget.index ?? ValueNotifier(0);
    _future = api.getGameAll();
  }

  changeIndex(int newIndex) {
    index.value = newIndex;
  }

  @override
  Widget build(BuildContext context) {
    var _padding = const EdgeInsets.symmetric(vertical: 6.0);
    return BackdropFilter(
      //背景滤镜
      filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
      child: Scaffold(
        backgroundColor: Colors.transparent.withOpacity(0.5),
        body: GestureDetector(
            onTap: () => Navigator.maybePop(context),
            behavior: HitTestBehavior.opaque,
            child: ValueListenableBuilder(
              valueListenable: index,
              builder: (context, _index, _) {
                return _index == 0
                    ? Center(
                        child: Padding(
                          padding: const EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
                          child: Column(
                            children: <Widget>[
                              GestureDetector(
                                behavior: HitTestBehavior.opaque,
                                onTap: () => Navigator.maybePop(context),
                                child: Container(
                                  alignment: Alignment.centerRight,
                                  padding: const EdgeInsets.only(
                                      bottom: 40.0, top: 20, right: 20.0),
                                  child: Image.asset(
                                      "lib/assets/img/btn_close_big.png"),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.all(12.0),
                                child: Stack(
                                  alignment: Alignment.center,
                                  children: <Widget>[
                                    Image.asset(
                                      "lib/assets/img/mine_image_achievement.png",
                                      fit: BoxFit.fitWidth,
                                      width: 240,
                                    ),
                                    Text(
                                      "运动列表",
                                      style:
                                          Theme.of(context).textTheme.headline4,
                                      strutStyle: fixedLine,
                                    )
                                  ],
                                ),
                              ),
                              Expanded(
                                child: SingleChildScrollView(
                                  child: Padding(
                                    padding: const EdgeInsets.all(12.0),
                                    child: Column(
                                      children: <Widget>[
                                        Container(
                                          margin: _padding,
                                          child: GameRun(changeIndex:changeIndex),
                                          decoration: circular(),
                                        ),
                                        FutureBuilder(
                                          future: _future,
                                          builder: (BuildContext context,
                                              AsyncSnapshot<
                                                      RespList<GameInfoData>>
                                                  snapshot) {
                                            if (snapshot.connectionState !=
                                                ConnectionState.done)
                                              return RequestLoadingWidget();
                                            var list = snapshot.data?.results;
                                            return Column(
                                                children: list
                                                    .map((e) => Padding(
                                                        padding: _padding,
                                                        child: GestureDetector(
                                                          onTap: () =>
                                                              NavigatorUtil.goPage(
                                                                  context,
                                                                  (context) =>
                                                                      GameDetailsPage(
                                                                          e)),
                                                          child: ClipRRect(
                                                              borderRadius:
                                                                  BorderRadius
                                                                      .circular(
                                                                          10.0),
                                                              child: Container(
                                                                color: Colors
                                                                    .white,
                                                                child: Row(
                                                                  children: <
                                                                      Widget>[
                                                                    CachedNetworkImage(
                                                                      width:
                                                                          90.0,
                                                                      height:
                                                                          90.0,
                                                                      fit: BoxFit
                                                                          .cover,
                                                                      imageUrl:
                                                                          "${e.cover}",
                                                                    ),
                                                                    const SizedBox(
                                                                      width:
                                                                          12.0,
                                                                    ),
                                                                    Expanded(
                                                                      child:
                                                                          Column(
                                                                        crossAxisAlignment:
                                                                            CrossAxisAlignment.start,
                                                                        children: <
                                                                            Widget>[
                                                                          Text(
                                                                            e.name,
                                                                            style:
                                                                                Theme.of(context).textTheme.headline3,
                                                                          ),
                                                                          const SizedBox(
                                                                            height:
                                                                                3,
                                                                          ),
                                                                          Text(
                                                                            "${e.userCount}人在练",
                                                                            style:
                                                                                Theme.of(context).textTheme.bodyText1,
                                                                          ),
                                                                          const SizedBox(
                                                                            height:
                                                                                5,
                                                                          ),
                                                                          Row(
                                                                            children: <Widget>[
                                                                              Text(
                                                                                "难度： ",
                                                                                style: Theme.of(context).textTheme.bodyText1,
                                                                              ),
                                                                              RatingBarIndicator(
                                                                                rating: e.difficulty / 20.0,
                                                                                itemBuilder: (context, index) => Image.asset(
                                                                                  "lib/assets/img/con_icon_difficulty_normal.png",
                                                                                  color: const Color(0xffFFC400),
                                                                                ),
                                                                                itemCount: 5,
                                                                                itemSize: 14.0,
                                                                                unratedColor: const Color(0xffCECECE),
                                                                                direction: Axis.horizontal,
                                                                              )
                                                                            ],
                                                                          )
                                                                        ],
                                                                      ),
                                                                    ),
                                                                    Container(
                                                                      width:
                                                                          120.0,
                                                                      child:
                                                                          PositionedBottom(
                                                                        e,
                                                                        (v) {
                                                                          startGame(
                                                                              context,
                                                                              e);
                                                                        },
                                                                        height:
                                                                            35.0,
                                                                        width:
                                                                            93.0,
                                                                        textStyle:
                                                                            TextStyle(
                                                                          color:
                                                                              Colors.white,
                                                                          fontSize:
                                                                              14.0,
                                                                        ),
                                                                      ),
                                                                    )
                                                                  ],
                                                                ),
                                                              )),
                                                        )))
                                                    .toList());
                                          },
                                        )
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      )
                    : Center(
                        child: Padding(
                            padding: const EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
                            child: Column(
                              children: <Widget>[
                                GestureDetector(
                                  behavior: HitTestBehavior.opaque,
                                  onTap: () => Navigator.maybePop(context),
                                  child: Container(
                                    alignment: Alignment.centerRight,
                                    padding: const EdgeInsets.only(
                                        bottom: 40.0, top: 20, right: 20.0),
                                    child: Image.asset(
                                        "lib/assets/img/btn_close_big.png"),
                                  ),
                                ),
                                FunctionSet()
                              ],
                            )));
              },
            )),
      ),
    );
  }
}
