class _AvatarPageState extends State<AvatarPage> {
  wheel.FixedExtentScrollController _controller;

  final logosavatar = LogoAvatarAPI();
  List<LogoAvatar> lista = [];
  bool _isLoading = false;

  final _actualizarusuario = ProfileAPI();
  final _datos = AuthAPI();
  Me _me;

  _listListener() {
    setState(() {});
  }

  @override
  void initState() {
    inicializarLogos();
    _controller = wheel.FixedExtentScrollController();
    _controller.addListener(_listListener);
    super.initState();
  }

  @override
  void dispose() {
    _controller.removeListener(_listListener);
    _controller.dispose();
    super.dispose();
  }

  inicializarLogos() async {
    setState(() {
      _isLoading = false;
    });
    lista = await logosavatar.getLogosAvatar();
    setState(() {
      _isLoading = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    final responsive = Responsive(context);
    int currentIndex = 0;
    _me = Me.of(context);

    _itemseleccionado() async {
      final token = await _datos.getAccessToken();
      final usuarioactual = await _actualizarusuario.updateUser(
          avatar: lista[currentIndex].imagePath, token: token);

      final user = User.fromJson(usuarioactual);
      _me.data = user;

      Navigator.pop(context);
    }

    return Scaffold(
      backgroundColor: Color(0xFF2F6FE0),
      appBar: AppBar(
        title: Text("Elige un Avatar"),
      ),
      body: (_isLoading)
          ? Stack(
              children: <Widget>[
                wheel.CircleListScrollView.useDelegate(
                  physics: wheel.CircleFixedExtentScrollPhysics(),
                  controller: _controller,
                  axis: Axis.vertical,
                  itemExtent: 120.0,
                  radius: MediaQuery.of(context).size.width * 0.8,
                  childDelegate: wheel.CircleListChildBuilderDelegate(
                    childCount: lista.length,
                    builder: (context, index) {
                      try {
                        currentIndex = _controller.selectedItem;
                      } catch (_) {}
                      final resizeFactor = (1 -
                          (((currentIndex - index).abs() * 0.3)
                              .clamp(0.0, 1.0)));
                      return CircleListItem(
                        resizeFactor: resizeFactor,
                        character: lista[index],
                        itemSelected: (currentIndex == index) ? true : false,
                      );
                    },
                  ),
                ),
                Positioned(
                  left: responsive.wp(50.0),
                  bottom: responsive.hp(68.0),
                  child: GestureDetector(
                    onTap: () {
                   //   print('tocado ${lista[currentIndex].name}');
                      Dialogs.avatarselect(context,
                          avatar:
                              '${AppConfig.socketHost}${lista[currentIndex].imagePath}',
                          onConfirm: () {
                        _itemseleccionado();
                        Navigator.pop(context);
                      });
                    },
                    child: Container(
                      width: 100.0,
                      height: 100.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(60),
                      ),
                    ),
                  ),
                ),
              ],
            )
          : Center(
              child: CircularProgressIndicator(),
            ),
    );
  }
}