import 'dart:async';
import 'dart:convert';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:link/view/component/web_image.dart';

import '../utils/size_fit.dart';

class Preview extends StatefulWidget {
  Uint8List? chooseImage;
  String? urlImage;
  Preview({Key? key, Uint8List? memory, String? url}) : super(key: key) {
    if (memory != null) {
      chooseImage = memory;
    }
    if (url != null) {
      urlImage = url;
    }
  }

  @override
  State<Preview> createState() => _PreviewState();
}

class _PreviewState extends State<Preview> {
  double w = 1.0;
  double h = 1.0;
  String url = '';
  bool showImage = false;
  @override
  void initState() {
    calulate();
    super.initState();
  }

  Future calulate() async {
    if (widget.chooseImage != null) {
      url = "data:image/png;base64," + base64Encode(widget.chooseImage!);
      var decodedImage = await decodeImageFromList(widget.chooseImage!);
      setState(() {
        h = w * decodedImage.height / decodedImage.width;
        showImage = true;
      });
    }
    if (widget.urlImage != null) {
      url = widget.urlImage!;
      Image image = Image.network(url);
      image.image
          .resolve(const ImageConfiguration())
          .addListener(ImageStreamListener((ImageInfo info, bool isSync) {
        setState(() {
          h = w * info.image.height / info.image.width;
          showImage = true;
        });
      }));
    }
  }

  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);
    bool needScroll = false;
    if (h * 250.px > MediaQuery.of(context).size.height) {
      needScroll = true;
    }
    return Container(
      color: const Color(0xBF000000),
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: Stack(children: [
        Positioned(
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            child: GestureDetector(
              onTap: () {
                Navigator.of(context).pop();
              },
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                color: Colors.transparent,
              ),
            )),
        Positioned(
            right: 24.px,
            top: 24.px,
            child: GestureDetector(
              onTap: () {
                Navigator.of(context).pop();
              },
              child: SvgPicture.asset(
                'assets/icons/close.svg',
                width: 24.px,
                height: 24.px,
              ),
            )),
        if (!needScroll && showImage)
          Container(
            alignment: Alignment.center,
            child: WebImage(
              url: url,
              width: 250.px,
              height: h * 250.px,
            ),
          ),
        if (needScroll && showImage)
          Positioned(
              left: 62.px,
              width: 250.px,
              bottom: 0.px,
              top: 0.px,
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      height: 72.px,
                    ),
                    WebImage(
                      url: url,
                      width: 250.px,
                      height: h * 250.px,
                    ),
                    SizedBox(
                      height: 72.px,
                    ),
                  ],
                ),
              ))
        // SingleChildScrollView(
        //   child: ,
        // ),
      ]),
    );
  }
}