import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:momo/models/image_list_resp.dart';
import 'package:momo/models/image_resp.dart';
import 'package:momo/provider/gallery.dart';
import 'package:momo/request/http_client.dart';

class Gallery extends ConsumerStatefulWidget {
  const Gallery({Key? key}) : super(key: key);

  @override
  ConsumerState<Gallery> createState() => _GalleryState();
}

class _GalleryState extends ConsumerState<Gallery> {
  late ScrollController _scrollController;

  List<ImageResp> imageList = [];
  int pageNum = 1;
  int pageSize = 10;
  bool hasMore = true;
  bool loading = false;

  Future<dynamic> loadImages() async {
    loading = true;
    if (!hasMore) {
      loading = false;
      return;
    }
    print(pageNum);
    var resp = await dio.get("/image/history",
        queryParameters: {"page": pageNum, "size": pageSize});
    ImageListResp imageListResp = ImageListResp.fromJson(resp.data);
    hasMore = imageListResp.hasNext;
    pageNum = pageNum + 1;
    if (mounted) {
      setState(() {
        imageList.addAll(imageListResp.list);
      });
      loading = false;
    }
  }

  void resetState() {
    imageList = [];
    pageNum = 1;
    hasMore = true;
    loading = false;
    ref.read(galleryProvider.notifier).clearImage();
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print("init");
    // ref.read(galleryProvider.notifier).clearImage();
    _scrollController = ScrollController(initialScrollOffset: 5.0)
      ..addListener(() {
        if (_scrollController.offset >=
                _scrollController.position.maxScrollExtent &&
            !_scrollController.position.outOfRange) {
          print("到底了 controller $loading");
          if (!loading) {
            loadImages();
          }
        }
      });
    loadImages();
  }

  @override
  Widget build(BuildContext context) {
    print("build gallery");
    return GridView.builder(
        itemCount: imageList.length,
        controller: _scrollController,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: MediaQuery.of(context).size.width > 640 ? 5 : 3),
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
            onTap: () {
              context.go(Uri(
                      path: "/detail",
                      queryParameters: {"id": "${imageList[index].id}"})
                  .toString());
            },
            child: Image.network(
              "${dio.options.baseUrl}/image/thumbnail/${imageList[index].file_path}",
              fit: BoxFit.cover,
              errorBuilder: (BuildContext context, o, err) {
                return const Icon(Icons.error_outline);
              },
            ),
          );
        });
    // final imageList = ref.watch(galleryProvider);
    // return GridView.builder(
    //     itemCount: imageList.length,
    //     controller: _scrollController,
    //     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    //         crossAxisCount: MediaQuery.of(context).size.width > 640 ? 5 : 3),
    //     itemBuilder: (BuildContext context, int index) {
    //       return InkWell(
    //         onTap: () {
    //           context.go(Uri(
    //                   path: "/detail",
    //                   queryParameters: {"id": "${imageList[index].id}"})
    //               .toString());
    //         },
    //         child: Image.network(
    //           "${dio.options.baseUrl}/image/thumbnail/${imageList[index].file_path}",
    //           fit: BoxFit.cover,
    //           errorBuilder: (BuildContext context, o, err) {
    //             return const Icon(Icons.error_outline);
    //           },
    //         ),
    //       );
    //     });
  }
}
