import 'dart:convert';

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/Helpers/translationHelper.dart';
import 'package:mymuseum_visitapp/app_context.dart';
import 'package:mymuseum_visitapp/constants.dart';
import 'package:provider/provider.dart';
//import 'package:youtube_player_iframe/youtube_player_iframe.dart' as iframe;
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class VideoPage extends StatefulWidget {
  final VideoDTO section;
  VideoPage({required this.section});

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

class _VideoPage extends State<VideoPage> {
  //iframe.YoutubePlayer? _videoViewWeb;
  YoutubePlayer? _videoView;
  VideoDTO? videoDTO;
  late YoutubePlayerController _controller;
  bool isFullScreen = false;

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

    String? videoId;
    if (videoDTO!.source_ != null && videoDTO!.source_!.isNotEmpty) {
      videoId = YoutubePlayer.convertUrlToId(videoDTO!.source_!);

      /*if (false) {
        final _controllerWeb = iframe.YoutubePlayerController(
          params: iframe.YoutubePlayerParams(
              mute: false,
              showControls: true,
              showFullscreenButton: false,
              loop: true,
              showVideoAnnotations: false,
              strictRelatedVideos: false,
              enableKeyboard: false,
              enableCaption: false,
              pointerEvents: iframe.PointerEvents.auto
          ),
        );

        _controllerWeb.loadVideo(videoDTO!.source_!);

        _videoViewWeb = iframe.YoutubePlayer(
          controller: _controllerWeb,
          //showVideoProgressIndicator: false,
          /*progressIndicatorColor: Colors.amber,
          progressColors: ProgressBarColors(
            playedColor: Colors.amber,
            handleColor: Colors.amberAccent,
          ),*/
        );
      } else {*/
        videoId = YoutubePlayer.convertUrlToId(videoDTO!.source_!);
        _controller = YoutubePlayerController(
          initialVideoId: videoId!,
          flags: const YoutubePlayerFlags(
            autoPlay: true,
            controlsVisibleAtStart: false,
            loop: true,
            hideControls: false,
            hideThumbnail: true,
          ),
        )..addListener(_onYoutubePlayerChanged);

        _videoView = YoutubePlayer(
          controller: _controller,
          //showVideoProgressIndicator: false,
          progressIndicatorColor: kMainColor,
          progressColors: const ProgressBarColors(
            playedColor: kMainColor,
            handleColor: kSecondColor,
          ),
        );
      //}
      _controller.toggleFullScreenMode();
      super.initState();
    }
  }

  void _onYoutubePlayerChanged() {
    if (_controller.value.isFullScreen) {
      setState(() {
        isFullScreen = true;
      });
    } else {
      setState(() {
        isFullScreen = false;
      });
    }
  }

  @override
  void dispose() {
    _videoView = 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 Stack(
      children: [
        !isFullScreen ? 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,
          ),
        ) : const SizedBox(),
        Column(
          children: <Widget>[
            !isFullScreen ? 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: () {
                            _controller.dispose();
                            _videoView = null;
                            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)
                          ),
                        )
                    ),
                  ),
                ],
              ),
            ): const SizedBox(),
            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: !isFullScreen ? const BorderRadius.only(
                        topLeft: Radius.circular(30),
                        topRight: Radius.circular(30),
                      ): BorderRadius.zero,
                      child: videoDTO!.source_ != null && videoDTO!.source_!.isNotEmpty ?
                      _videoView :
                      const Center(child: Text("La vidéo ne peut pas être affichée, l'url est incorrecte", style: TextStyle(fontSize: kNoneInfoOrIncorrect))))
              ),
            ),
          ],
        ),
        isFullScreen ? Positioned(
          top: 35,
          left: 10,
          child: SizedBox(
              width: 50,
              height: 50,
              child: InkWell(
                onTap: () {
                  _controller.toggleFullScreenMode();
                  _controller.dispose();
                  _videoView = null;
                  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)
                ),
              )
          ),
        ): const SizedBox(),
      ],
    );
  }
}