import 'dart:convert';
import 'dart:ui' as ui;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:manager_api_new/api.dart';
import 'package:mymuseum_visitapp/Components/loading_common.dart';
import 'package:mymuseum_visitapp/Helpers/translationHelper.dart';
import 'package:mymuseum_visitapp/app_context.dart';
import 'package:mymuseum_visitapp/constants.dart';
import 'package:provider/provider.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_platform_interface/webview_flutter_platform_interface.dart';

class WebPage extends StatefulWidget {
  final WebDTO section;
  WebPage({required this.section});

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

class _WebPage extends State<WebPage> {
  //final IFrameElement _iframeElement = IFrameElement();
  //WebView _webView;
  WebDTO webDTO = WebDTO();
  WebViewController? controller;
  PlatformWebViewController? controllerWeb;
  bool isLoading = true;

  @override
  void initState() {
    //print(widget.section!.data);
    webDTO = widget.section;
    //webDTO = WebDTO.fromJson(jsonDecode(widget.section!.data!))!;
    print(webDTO);


    if(kIsWeb) {
      /*_iframeElement.src = webDTO.source_!;
      _iframeElement.style.border = 'none';

      //ignore: undefined_prefixed_name
      ui.platformViewRegistry.registerViewFactory(
        webDTO.source_!, //use source as registered key to ensure uniqueness
        (int viewId) => _iframeElement,
      );*/
    } else {

      if(webDTO.source_ != null && webDTO.source_!.length > 0) {
        try {
          controller = WebViewController()
            ..setJavaScriptMode(JavaScriptMode.unrestricted)
            ..setBackgroundColor(const Color(0x00000000))
            ..setNavigationDelegate(
              NavigationDelegate(
                onProgress: (int progress) {
                  // Update loading bar.
                },
                onPageStarted: (String url) {},
                onPageFinished: (String url) {
                  setState(() {
                    isLoading = false;
                  });
                },
                onWebResourceError: (WebResourceError error) {},
                onNavigationRequest: (NavigationRequest request) {
                  Uri sourceUri = Uri.parse(webDTO.source_!);
                  Uri requestUri = Uri.parse(request.url);

                  if (requestUri.host != sourceUri.host) { // handle navigation to site
                    print('blocking navigation to $request}');
                    return NavigationDecision.prevent;
                  }
                  return NavigationDecision.navigate;
                },
              ),
            )
            ..loadRequest(Uri.parse(webDTO.source_!));
        } catch (e) {
          print("Invalid source ${webDTO.source_}");
        }
      }
    }

    super.initState();
    /*_webView = WebView(
      initialUrl: webDTO.source_, //"https://my.matterport.com/show/?m=k8bvdezfHbT"
      javascriptMode: JavascriptMode.unrestricted,
      navigationDelegate: (NavigationRequest request) {
        print(request.url);
        print(webDTO.source_);
        if (request.url != webDTO.source_) {
          print('blocking navigation to $request}');
          return NavigationDecision.prevent;
        }
        print('allowing navigation to $request');
        return NavigationDecision.navigate;
      }
    );*/
  }

  @override
  void dispose() {
    //_webView = null;
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    final appContext = Provider.of<AppContext>(context);

    var title = TranslationHelper.get(widget.section.title, appContext.getContext());
    String cleanedTitle = title.replaceAll('\n', ' ').replaceAll('<br>', ' ');

    return webDTO.source_ != null && webDTO.source_!.isNotEmpty ?
    kIsWeb ?
      HtmlElementView(
        key: UniqueKey(),
        viewType: webDTO.source_!,
      ) :
      Stack(
        children: [
          Container(
            height: size.height * 0.28,
            decoration: BoxDecoration(
              boxShadow: const [
                BoxShadow(
                  color: kMainGrey,
                  spreadRadius: 0.5,
                  blurRadius: 5,
                  offset: Offset(0, 1), // changes position of shadow
                ),
              ],
              gradient: const LinearGradient(
                begin: Alignment.centerRight,
                end: Alignment.centerLeft,
                colors: [
                  /*Color(0xFFDD79C2),
                      Color(0xFFB65FBE),
                      Color(0xFF9146BA),
                      Color(0xFF7633B8),
                      Color(0xFF6528B6),
                      Color(0xFF6025B6)*/
                  kMainColor0, //Color(0xFFf6b3c4)
                  kMainColor1,
                  kMainColor2,

                ],
              ),
              image: widget.section.imageSource != null ? DecorationImage(
                fit: BoxFit.cover,
                opacity: 0.65,
                image: NetworkImage(
                  widget.section.imageSource!,
                ),
              ): null,
            ),
          ),
          Column(
            children: <Widget>[
              SizedBox(
                height: size.height * 0.11,
                width: size.width,
                child: Stack(
                  fit: StackFit.expand,
                  children: [
                    Center(
                      child: Padding(
                        padding: const EdgeInsets.only(top: 22.0),
                        child: SizedBox(
                          width: size.width *0.7,
                          child: HtmlWidget(
                            cleanedTitle,
                            textStyle: const TextStyle(color: Colors.white, fontFamily: 'Roboto', fontSize: 20),
                            customStylesBuilder: (element)
                            {
                              return {'text-align': 'center', 'font-family': "Roboto", '-webkit-line-clamp': "2"};
                            },
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      top: 35,
                      left: 10,
                      child: SizedBox(
                          width: 50,
                          height: 50,
                          child: InkWell(
                            onTap: () {
                              Navigator.of(context).pop();
                            },
                            child: Container(
                                decoration: const BoxDecoration(
                                  color: kMainColor,
                                  shape: BoxShape.circle,
                                ),
                                child: const Icon(Icons.arrow_back, size: 23, color: Colors.white)
                            ),
                          )
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Container(
                    margin: const EdgeInsets.only(top: 0),
                    decoration: const BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                          color: kMainGrey,
                          spreadRadius: 0.5,
                          blurRadius: 2,
                          offset: Offset(0, 1), // changes position of shadow
                        ),
                      ],
                      color: kBackgroundColor,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(30),
                        topRight: Radius.circular(30),
                      ),
                    ),
                    child: ClipRRect(
                        borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(30),
                          topRight: Radius.circular(30),
                        ),
                        child: isLoading ? Center(child: SizedBox(height: size.height * 0.15, child: const LoadingCommon())) : WebViewWidget(controller: controller!))
                ),
              ),
            ],
          ),
        ],
      ) :
    const Center(child: Text("La page internet ne peut pas être affichée, l'url est incorrecte ou vide", style: TextStyle(fontSize: kNoneInfoOrIncorrect)));
    }
} //_webView