import 'package:flutter/material.dart';
import 'package:webview_flutter_plus/webview_flutter_plus.dart';

void main() {
  runApp(const WebView());
}

class WebView extends StatelessWidget {
  const WebView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: WebViewMainPage(),
    );
  }
}

class WebViewMainPage extends StatefulWidget {
  const WebViewMainPage({Key? key}) : super(key: key);

  @override
  _WebViewMainPageState createState() => _WebViewMainPageState();
}

class _WebViewMainPageState extends State<WebViewMainPage> {
  late WebViewPlusController _controller;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        Future<bool> canGoBack = _controller.webViewController.canGoBack();
        return canGoBack.then((str) {
          if (str) {
            _controller.webViewController.goBack();
            return false;
          } else {
            Navigator.of(context).pop();
            return true;
          }
        });
      },
      child: Scaffold(
        body: WebViewPlus(
          gestureNavigationEnabled: true,
          javascriptChannels: {
            JavascriptChannel(
                name: "Log",
                onMessageReceived: (JavascriptMessage message) {
                  // ignore: avoid_print
                  print(message.message);
                }),
          },
          initialUrl: 'assets/web/index.html',
          onWebViewCreated: (controller) {
            _controller = controller;
          },
          onPageFinished: (url) {
            _controller.webViewController.runJavascript(initWebView(context));
          },
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

String initWebView(context) {
  final double areaPaddingTop = MediaQuery.of(context).padding.top;
  final double areaPaddingBottom = MediaQuery.of(context).padding.bottom;
  String initEval = '''
          (function () {
            window.areaPaddingTop = $areaPaddingTop; 
            window.areaPaddingBottom = $areaPaddingBottom;
            document.documentElement.style.setProperty('--area-padding-top', $areaPaddingTop + 'px');
            document.documentElement.style.setProperty('--area-padding-bottom', $areaPaddingBottom + 'px');
            window.H5RemoteRuntime.bootstrap();
          })();
          ''';

  return initEval;
}