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

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:link/utils/global.dart';
import 'package:link/view/component/web_image.dart';
import 'package:screenshot/screenshot.dart';
import 'dart:js' as js;
import '../utils/size_fit.dart';

class Share extends StatefulWidget {
  Uint8List byteData;
  Share({Key? key, required this.byteData}) : super(key: key);

  @override
  State<Share> createState() => _ShareState();
}

class _ShareState extends State<Share> {
  bool showShareGuide = false;
  bool isWechatBrowser = false; //false;
  ScreenshotController screenshotController = ScreenshotController();
  Uint8List? imgData;
  @override
  initState() {
    // var ua = html.window.navigator.userAgent.toLowerCase();
    getImage();
    getPlatform();
    super.initState();
  }

  getImage() async {
    screenshotController
        .captureFromWidget(SizedBox(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.width,
      child: SingleChildScrollView(
        physics: const NeverScrollableScrollPhysics(),
        child: Container(
          transform: Matrix4.translationValues(0, -72.px, 0),
          child: Image.memory(widget.byteData),
        ),
      ),
    ),pixelRatio: 0.6)
        .then((value) {
      imgData = value;
    });
  }

  getPlatform() async {
    bool result = js.context
        .callMethod('isWechatBrowser'); //await DdJsUtil.isWeChatBrowser;
    setState(() {
      isWechatBrowser = result;
    });

    // js.context.callMethod('shareSys');
  }

  share() {
    setState(() {
      showShareGuide = true;
    });
    String url = "data:image/png;base64," +
        base64Encode(imgData != null ? imgData! : widget.byteData);
    js.context.callMethod('shareSys', [url, '?u=' + Global().uid]);
  }

  copy() {}
  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);
    String url = "data:image/png;base64," + base64Encode(widget.byteData);
    // js.context.callMethod('shareSys');
    return Material(
      color: Colors.transparent,
      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,
                ),
              )),
          if (showShareGuide && isWechatBrowser)
            Positioned(
                right: 21.px,
                top: 12.px,
                child: Image.asset(
                  'assets/images/share_arrow_up.png',
                  width: 40.px,
                  height: 46.px,
                )),
          if (showShareGuide && isWechatBrowser)
            Positioned(
                right: 81.px,
                top: 40.px,
                child: Text(
                  '点击…打开分享菜\n单，选择你要分享\n的好友',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.px,
                      fontWeight: FontWeight.bold,
                      height: 1.8),
                )),
          if (showShareGuide && !isWechatBrowser)
            Positioned(
                left: 156.px,
                bottom: 46.px,
                child: Image.asset(
                  'assets/images/share_arrow_down.png',
                  width: 40.px,
                  height: 46.px,
                )),
          if (showShareGuide && !isWechatBrowser)
            Positioned(
                left: 0,
                right: 0,
                bottom: 112.px,
                child: Text(
                  '点击分享菜单，选\n择你要分享的平台',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.px,
                      fontWeight: FontWeight.bold,
                      height: 1.8),
                )),
          if (!showShareGuide)
            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 (!showShareGuide)
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                    width: 200.px,
                    height: MediaQuery.of(context).size.height / (375 / 200.0),
                    child: WebImage(
                      url: url,
                      width: 200.px,
                      height:
                          MediaQuery.of(context).size.height / (375 / 200.0),
                    )

                    // Image.memory(
                    //   widget.byteData,
                    //   width: 200.px,
                    //   height: MediaQuery.of(context).size.height / (375 / 200.0),
                    //   fit: BoxFit.cover,
                    // ),
                    ),
                SizedBox(
                  height: 53.px,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    GestureDetector(
                      onTap: () {
                        share();
                      },
                      child: Column(
                        children: [
                          Image.asset(
                            'assets/images/share_weibo.png',
                            width: 44.px,
                            height: 44.px,
                          ),
                          SizedBox(
                            height: 11.px,
                          ),
                          Text(
                            '微博',
                            style:
                                TextStyle(color: Colors.white, fontSize: 11.px),
                          )
                        ],
                      ),
                    ),
                    SizedBox(
                      width: 24.px,
                    ),
                    GestureDetector(
                      onTap: () {
                        share();
                      },
                      child: Column(
                        children: [
                          Image.asset(
                            'assets/images/share_wechat.png',
                            width: 44.px,
                            height: 44.px,
                          ),
                          SizedBox(
                            height: 11.px,
                          ),
                          Text(
                            '微信',
                            style:
                                TextStyle(color: Colors.white, fontSize: 11.px),
                          )
                        ],
                      ),
                    ),
                    SizedBox(
                      width: 24.px,
                    ),
                    GestureDetector(
                      onTap: () {
                        share();
                      },
                      child: Column(
                        children: [
                          Image.asset(
                            'assets/images/share_qq.png',
                            width: 44.px,
                            height: 44.px,
                          ),
                          SizedBox(
                            height: 11.px,
                          ),
                          Text(
                            'QQ',
                            style:
                                TextStyle(color: Colors.white, fontSize: 11.px),
                          )
                        ],
                      ),
                    ),
                    SizedBox(
                      width: 24.px,
                    ),
                    GestureDetector(
                      onTap: () {
                        copy();
                      },
                      child: Column(
                        children: [
                          Image.asset(
                            'assets/images/share_link.png',
                            width: 44.px,
                            height: 44.px,
                          ),
                          SizedBox(
                            height: 11.px,
                          ),
                          Text(
                            '复制链接',
                            style:
                                TextStyle(color: Colors.white, fontSize: 11.px),
                          )
                        ],
                      ),
                    ),
                  ],
                )
              ],
            ),
        ],
      ),
    );
  }
}