import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:openmediacentermobile/platform.dart';
import 'package:openmediacentermobile/preview_tile.dart';

class PreviewGrid extends StatefulWidget {
  const PreviewGrid({Key? key, required this.videoLoader}) : super(key: key);

  final Future<List<VideoT>> Function() videoLoader;

  @override
  State<PreviewGrid> createState() => _PreviewGridState();
}

class _PreviewGridState extends State<PreviewGrid> {
  late Future<List<VideoT>> _data;
  Image? _previewImage;

  @override
  void initState() {
    super.initState();
    _data = widget.videoLoader();
  }

  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;

    return FutureBuilder<List<VideoT>>(
      future: _data, // a previously-obtained Future<String> or null
      builder: (BuildContext context, AsyncSnapshot<List<VideoT>> snapshot) {
        if (snapshot.hasError) {
          return Text("Error");
        } else if (snapshot.hasData) {
          return Stack(
            children: [
              MasonryGridView.count(
                // every tile should be at max 330 pixels long...
                crossAxisCount: isTV() ? width ~/ 200 : width ~/ 275,
                // crossAxisCount: isTV() ? width ~/ 200 : width ~/ 330,

                mainAxisSpacing: 4,
                crossAxisSpacing: 4,
                padding: EdgeInsets.all(5),
                itemBuilder: (context, index) {
                  return PreviewTile(
                    dta: snapshot.data![index],
                    onLongPress: (img) {
                      setState(() {
                        _previewImage = img;
                      });
                    },
                    onLongPressEnd: () {
                      setState(() {
                        _previewImage = null;
                      });
                    },
                  );
                },
              ),
              if (_previewImage != null) ...[
                BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: 5.0,
                    sigmaY: 5.0,
                  ),
                  child: Container(
                    color: Colors.white.withOpacity(0.6),
                  ),
                ),
                Container(
                  child: Center(
                    child: Padding(padding: EdgeInsets.symmetric(horizontal: 50),child: ClipRRect(borderRadius: BorderRadius.circular(10.0), child: _previewImage!)),
                  ),
                ),
              ],
            ],
          );
        } else {
          return Column(children: const <Widget>[
            SizedBox(
              width: 60,
              height: 60,
              child: CircularProgressIndicator(),
            ),
            Padding(
              padding: EdgeInsets.only(top: 16),
              child: Text('Awaiting result...'),
            )
          ]);
        }
      },
    );
  }
}