import 'package:flutter/material.dart';

import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:cached_network_image/cached_network_image.dart';

import 'package:imagini/blocs/home_bloc.dart';
import 'package:imagini/core/app_provider.dart';
import 'package:imagini/graphql/imagini_graphql.dart';

class HomeScreen extends StatefulWidget {
  static const String PATH = '/Home';

  HomeScreen({Key key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  HomeBloc bloc;

  @override
  Widget build(BuildContext context) {
    _init();

    return PlatformScaffold(
      body: _buildGridView(),
      bottomNavBar: _buildNavBar()
    );
  }

  void _init(){
    if(bloc != null)
        return;

    bloc = HomeBloc(AppProvider.getApplication(context));
    // bloc.mediaItemsResult.listen((bool status) {
    // });
  }

  @override
  void dispose() {
    super.dispose();
    // bloc.dispose();
  }

  Widget _buildNavBar() {
    return PlatformNavBar(
        currentIndex: 0,
        itemChanged: (index) => setState(
          () {
            // _selectedTabIndex = index;
            print(index);
          },
        ),
        items: [
          BottomNavigationBarItem(
            label: "Gallery",
            icon: Icon(PlatformIcons(context).collections),
          ),
          BottomNavigationBarItem(
            label: "Me",
            icon: Icon(PlatformIcons(context).person),
          ),
          BottomNavigationBarItem(
            label: "Settings",
            icon: Icon(PlatformIcons(context).settings),
          ),
        ],
      );
  }

  Widget _buildGridView() {
    return StreamBuilder<MediaItems$Query>(
      stream: bloc.mediaItemsResult,
      builder: (context, snapshot) {
        if (snapshot.data == null)
          return _appLoading();

        List<MediaItems$Query$MediaItemResponse$MediaItem> allItems = snapshot.data.mediaItems.data;

        MediaQueryData queryData = MediaQuery.of(context);

        final double screenWidthSize = queryData.size.width * queryData.devicePixelRatio;
        final int crossAxisCount = (screenWidthSize / 500).ceil();
        final int derivedContentWidth = (screenWidthSize / crossAxisCount).ceil();

        return new StaggeredGridView.countBuilder(
          crossAxisCount: crossAxisCount,
          itemCount: allItems.length,
          itemBuilder: (BuildContext context, int index) {
            String fileName = allItems[index].fileName;
            return _buildCard(fileName, derivedContentWidth);
          },
          staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        );
      }
    );
  }

  Widget _appLoading(){
    return Center(
      child: ConstrainedBox(
        constraints: BoxConstraints(maxWidth: 500),
        child: Container(
          margin: EdgeInsets.fromLTRB(50, 0, 50, 0),
          height: 370,
          child: Column(
            children: <Widget>[
              PlatformCircularProgressIndicator()
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildCard(charImageUrl, derivedContentWidth) {
    return FutureBuilder<CachedNetworkImage>(
      future: bloc.getImage(charImageUrl, derivedContentWidth),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
            return PlatformCircularProgressIndicator();
        }

        return snapshot.data;
        // Image newImage = snapshot.data;
        // return newImage;
      }
    );
  }
}