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';

class SportListPage extends StatefulWidget {
  SportListPage();

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

class _PageState extends State<SportListPage> with InjectApi {
  Future<RespList<GameInfoData>> _future;

  @override
  void initState() {
    super.initState();
    _future = api.getGameAll();
  }

  @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: Center(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(0, 80.0, 0, 20.0),
              child: Column(
                children: <Widget>[
                  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(),
                              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());
                              },
                            )
                          ],
                        ),
                      ),
                    ),
                  ),
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () => Navigator.maybePop(context),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Image.asset("lib/assets/img/pop_share_chose.png"),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}