import 'package:dio/dio.dart';
import 'package:extended_image/extended_image.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:momo/models/image_resp.dart';
import 'package:momo/provider/rerender.dart';
import 'package:momo/request/http_client.dart';
import 'package:url_launcher/url_launcher.dart';

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

  @override
  ConsumerState<ImageDetail> createState() => _ImageDetailState();
}

class _ImageDetailState extends ConsumerState<ImageDetail> {
  Future<ImageResp?> loadImage(id) async {
    try {
      var resp = await dio.get("/image/detail/$id");
      return ImageResp.fromJson(resp.data);
    } catch (e) {
      if (e is DioError) {
        if (kDebugMode) {
          print(e.response?.data);
        }
      }
    }
    return null;
  }

// double dx=0;
  double _scale = 1;


  Future<void> _launchInBrowser(Uri url) async {
    if (!await launchUrl(
      url,
      mode: LaunchMode.externalApplication,
    )) {
      throw Exception('Could not launch $url');
    }
  }

  @override
  Widget build(BuildContext context) {
    String id = GoRouterState.of(context).queryParams["id"] ?? "";
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.white,
      // TODO: 拖动
      child: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
              child: FutureBuilder(
                  future: loadImage(id),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return ClipRect(
                          child: SizedBox(
                        width: double.infinity,
                        height: double.infinity,
                        child: ExtendedImage.network(
                          "${dio.options.baseUrl}/image/${snapshot.data?.file_path}",
                          mode: ExtendedImageMode.gesture,
                          // scale: 3,
                        ),
                      ));
                    } else if (snapshot.hasError) {
                      return ErrorWidget("13");
                    }
                    return const Center(
                      child: CircularProgressIndicator(),
                    );
                  })),
          Positioned(
              bottom: 10,
              child: Card(
                // decoration: BoxDecoration(),
                elevation: 30,
                // color: Colors.pinkAccent,
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(20, 5, 20, 5),
                  child: Row(
                    children: [
                      IconButton(
                          onPressed: () {
                            dio.delete("/image/delete/$id").then((resp) {
                              ref.read(uniqueIdProvider.notifier).updateId();
                              context.go("/");
                            });
                          },
                          icon: const Icon(Icons.delete)),
                      IconButton(
                          onPressed: _scale > 0.2 ? () {} : null,
                          icon: const Icon(Icons.remove_circle_outline)),
                      IconButton(
                          onPressed: _scale < 10 ? () {} : null,
                          icon: const Icon(Icons.add_circle_outline)),
                      IconButton(
                          onPressed: () async {
                            final image = await loadImage(id);
                            final imageUrl =
                                "https://raichi.hodokencho.com/api/image/${image?.file_path}";
                            final launchUrl =
                                "https://saucenao.com/search.php?url=${Uri.encodeComponent(imageUrl)}";
                            _launchInBrowser(Uri.parse(launchUrl));
                          },
                          icon: const Icon(Icons.search)),
                      IconButton(
                          onPressed: () async {
                            setState(() {});
                          },
                          icon: const Icon(Icons.menu_rounded)),
                    ],
                  ),
                ),
              )),
        ],
      ),
    );
  }
}