import '../../constants.dart';
import '../../utils/iframe_web.dart' if (dart.library.io) '../../utils/fake_iframe_web.dart';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

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

  @override
  State<StatefulWidget> createState() {
    return MobileTutorialsState();
  }

}

class MobileTutorialsState extends State<MobileTutorials> {
  InAppWebViewController webView;
  String url = "";
  double progress = 0;
  bool isLoadStop = false;

  @override
  Widget build(BuildContext context) {
    if (kIsWeb) {
      return Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(
            child: IFrameWeb(
              width: double.maxFinite.toString(),
              height: double.maxFinite.toString(),
              src: Constants.TUTORIAL_URL,
            ),
          ),
        ],
      );
    } else {
      print('progress: $progress');
      return Stack(
        children: [
          InAppWebView(
            initialUrlRequest: URLRequest(url: Uri.parse(Constants.TUTORIAL_URL)),
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(

              ),
            ),
            onWebViewCreated: (InAppWebViewController controller) {
              webView = controller;
            },
            onLoadStart: (controller, url) {
              if (mounted) {
                setState(() {
                  this.url = url.toString();
                  this.isLoadStop = false;
                });
              }
            },
            onLoadStop: (controller, url) async {
              if (mounted) {
                setState(() {
                  this.url = url.toString();
                  this.isLoadStop = true;
                });
              }
            },
            onProgressChanged: (InAppWebViewController controller, int progress) {
              if (mounted) {
                setState(() {
                  if (this.progress < 1.0) {
                    this.isLoadStop = false;
                  } else {
                    this.isLoadStop = true;
                  }
                  this.progress = progress / 100;
                });
              }
            },
          ),
          isLoadStop ? Container() :
              Center(
                child: CircularProgressIndicator(),
              ),
        ],
      );
    }
  }

}