import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:gz_video_player/video.dart';

import 'package:gz_video_player/video_control_bar_style.dart';
import 'package:gz_video_player/video_definition.dart';
import 'package:gz_video_player/video_loading_style.dart';
import 'package:gz_video_player/video_play_options.dart';
import 'package:gz_video_player/video_progress_style.dart';
import 'package:gz_video_player/video_speed.dart';
import 'package:gz_video_player/video_style.dart';
import 'package:gz_video_player/video_subtitles.dart';
import 'package:gz_video_player/video_top_bar_style.dart';
import 'package:gz_video_player_example/other_test_page.dart';
import 'package:gz_video_player_example/overflow_test_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomePage'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).push(
              MaterialPageRoute(builder: (BuildContext context) {
                return const VideoPlayerPage();
              }),
            );
          },
          child: Container(
            width: 120.0,
            height: 30.0,
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('to video player'),
          ),
        ),
      ),
    );
  }
}

class VideoPlayerPage extends StatefulWidget {
  const VideoPlayerPage({super.key});

  @override
  State<VideoPlayerPage> createState() => _VideoPlayerPageState();
}

class _VideoPlayerPageState extends State<VideoPlayerPage> {
  // String videoUrl = "https://www.runoob.com/try/demo_source/movie.mp4";

  // String videoUrl = "https://yun.zxziyuan-yun.com/20180221/4C6ivf8O/index.m3u8";
  // String videoUrl = "http://vodkgeyttp8.vod.126.net/cloudmusic/1241/core/e30b/aec700ee466da6c8ce51d12953e7b89f.mp4?wsSecret=a6d7342a3ea018d632b3d7ce56ffd11f&wsTime=1580815486";
  // String videoUrl = "http://vod.anyrtc.cc/364c01b9c8ca4e46bd65e7307887341d/34688ef93da349628d5e4efacf8a5167-9fd7790c8f5862b09c350e4a916b203d.mp4";
  String videoUrl =
      'https://mpv.videocc.net/8f38fa3352/5/8f38fa33520aa63d3daa7a7b3eb6e4c5_1.mp4';
  String mainSubtitles = ""; //主字幕
  String subSubtitles = ""; //辅字幕
  bool _isPlaying = false;
  bool _isFullscreen = false;

  bool showAdvertCover = false; //是否显示广告

  bool get isPlaying => _isPlaying;
  late List<VideoModel> dataList;

  set isPlaying(bool playing) {
    debugPrint("playing  $playing");
    _isPlaying = playing;
  }

  GZVideoPlayerState? state;
  VideoPlayerController? videoPlayerController;
  List<VideoDefinitionItem> definitionList = [];

  @override
  void initState() {
    dataList = [
      VideoModel(
        url:
            'https://mpv.videocc.net/8f38fa3352/5/8f38fa3352cdb65e6773173ae8c767b5_1.mp4',
        title: '高正视频',
      ),
      VideoModel(
        url: 'https://www.runoob.com/try/demo_source/movie.mp4',
        title: '测试视频',
      ),
    ];

    definitionList = [
      VideoDefinitionItem(
        dataSource:
            'https://mpv.videocc.net/8f38fa3352/5/8f38fa33520aa63d3daa7a7b3eb6e4c5_1.mp4',
        title: 'LD',
      ),
      VideoDefinitionItem(
        dataSource:
            'https://mpv.videocc.net/8f38fa3352/5/8f38fa33520aa63d3daa7a7b3eb6e4c5_2.mp4',
        title: 'SD',
      ),
      VideoDefinitionItem(
        dataSource:
            'https://mpv.videocc.net/8f38fa3352/5/8f38fa33520aa63d3daa7a7b3eb6e4c5_3.mp4',
        title: 'HD',
      ),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: !_isFullscreen ? AppBar(title: const Text('video player')) : null,
      body: Column(children: <Widget>[
        videoUrl != ""
            ? GZVideoPlayer(
                dataSource: videoUrl,
                sourceType: DataSourceType.network,

                /// 视频播放配置
                playOptions: VideoPlayOptions(
                  seekSeconds: 30,
                  //左侧垂直手势调节视频亮度的单位（0～1之间，不能小于0，不能大于1）
                  brightnessGestureUnit: 0.01,
                  //右侧垂直手势调节视频音量的单位（0～1之间，不能小于0，不能大于1）
                  volumeGestureUnit: 0.005,
                  //横行手势调节视频进度的单位毫秒数
                  progressGestureUnit: 2000,
                  aspectRatio: 16 / 9,
                  loop: false,
                  autoplay: true,
                  allowScrubbing: true,
                  startPosition: const Duration(seconds: 0),
                  definitionList: definitionList,
                ),

                /// 自定义视频样式
                videoStyle: VideoStyle(
                  /// 自定义视频暂停时视频中部的播放按钮
                  playIcon: const Icon(
                    Icons.play_circle_outline,
                    size: 60,
                    color: Colors.white,
                  ),

                  /// 暂停时是否显示视频中部播放按钮
                  showPlayIcon: true,

                  videoLoadingStyle: VideoLoadingStyle(

                      /// 重写部分（二选一）
                      // 重写Loading的widget
                      // customLoadingIcon: CircularProgressIndicator(strokeWidth: 2.0),
                      // 重写Loading 下方的Text widget
                      // customLoadingText: Text("加载中..."),
                      /// 设置部分（二选一）
                      // 设置Loading icon 下方的文字
                      // loadingText: "Loading...",
                      // // 设置loading icon 下方的文字颜色
                      // loadingTextFontColor: Colors.white,
                      // // 设置loading icon 下方的文字大小
                      // loadingTextFontSize: 20,
                      ),

                  /// 自定义顶部控制栏
                  videoTopBarStyle: VideoTopBarStyle(
                    show: true,
                    //是否显示
                    height: 60,
                    padding:
                        const EdgeInsets.symmetric(vertical: 8, horizontal: 10),
                    barBackgroundColor: const Color.fromRGBO(0, 0, 0, 0.5),
                    popIcon: const Icon(
                      Icons.arrow_back,
                      size: 25,
                      color: Colors.white,
                    ),
                    contents: [
                      Center(
                        child: Container(
                          margin: const EdgeInsets.symmetric(horizontal: 10),
                          child: const Text(
                            '123',
                            style: TextStyle(color: Colors.white, fontSize: 14),
                          ),
                        ),
                      )
                    ],
                    //自定义顶部控制栏中间显示区域
                    actions: [
                      GestureDetector(
                        behavior: HitTestBehavior.translucent,
                        onTap: () {
                          ///1. 可配合自定义拓展元素使用，例如广告
                          setState(() {
                            showAdvertCover = true;
                          });

                          ///
                        },
                        child: const Icon(
                          Icons.more_horiz,
                          size: 25,
                          color: Colors.white,
                        ),
                      )
                    ], //自定义顶部控制栏右侧显示区域
                    /// 设置cusotmBar之后，以上属性均无效(除了`show`之外)
                    // customBar: Positioned(
                    //   top: 0,
                    //   left: 0,
                    //   right: 0,
                    //   child: Container(
                    //     width: double.infinity,
                    //     height: 50,
                    //     color: Colors.yellow,
                    //     child: Text("12312312"),
                    //   ),
                    // ),
                    // customBar: Align(
                    //   alignment: Alignment.topLeft,
                    //   child: Container(
                    //     width: double.infinity,
                    //     height: 30,
                    //     color: Colors.yellow,
                    //     child: GestureDetector(
                    //       onTap: () {
                    //         debugPrint("yes");
                    //       },
                    //       child: Text("123123132")
                    //     )
                    //   ),
                    // ),
                  ),

                  /// 自定义底部控制栏
                  videoControlBarStyle: VideoControlBarStyle(
                    /// 自定义颜色
                    // barBackgroundColor: Colors.blue,
                    /// 自定义时间TextStyle
                    // timeTextStyle:
                    //     const TextStyle(fontSize: 14.0, color: Colors.white),

                    ///添加边距
                    padding:
                        const EdgeInsets.symmetric(vertical: 8, horizontal: 10),

                    ///设置控制拦的高度，默认为40，如果图标设置过大但是高度不够就会出现图标被裁剪的现象
                    height: 40,
                    progressStyle: VideoProgressStyle(
                      playedColor: Colors.blue,
                    ),

                    /// 自定义进度条样式
                    // progressStyle: VideoProgressStyle(
                    //     // padding: EdgeInsets.all(0),
                    //     padding: EdgeInsets.symmetric(
                    //         vertical: 0,
                    //         horizontal: 10), //vertical不能设置太大，不然被把进度条压缩肉眼无法识别
                    //     playedColor: Colors.red,
                    //     bufferedColor: Colors.yellow,
                    //     backgroundColor: Colors.green,
                    //     dragBarColor: Colors
                    //         .white, //进度条为`progress`时有效，如果时`basic-progress`则无效
                    //     height: 4,
                    //     progressRadius:
                    //         2, //进度条为`progress`时有效，如果时`basic-progress`则无效
                    //     dragHeight:
                    //         5 //进度条为`progress`时有效，如果时`basic-progress`则无效
                    //     ),

                    /// 更改进度栏的播放按钮
                    playIcon: const Icon(Icons.play_arrow,
                        color: Colors.white, size: 25),

                    /// 更改进度栏的暂停按钮
                    // pauseIcon: const Icon(
                    //   Icons.pause,
                    //   color: Colors.white,
                    //   size: 25,
                    // ),

                    /// 更改进度栏的快退按钮
                    // rewindIcon: const Icon(
                    //   Icons.replay_30,
                    //   size: 25,
                    //   color: Colors.white,
                    // ),

                    /// 更改进度栏的快进按钮
                    // forwardIcon: const Icon(
                    //   Icons.forward_30,
                    //   size: 25,
                    //   color: Colors.white,
                    // ),

                    /// 更改进度栏的全屏按钮
                    // fullscreenIcon: const Icon(
                    //   Icons.fullscreen,
                    //   size: 25,
                    //   color: Colors.white,
                    // ),

                    /// 更改进度栏的退出全屏按钮
                    // fullscreenExitIcon: const Icon(
                    //   Icons.fullscreen_exit,
                    //   size: 25,
                    //   color: Colors.white,
                    // ),

                    /// 决定控制栏的元素以及排序，示例见上方图3
                    // itemList: _isFullscreen
                    //     ? [
                    //         'play',
                    //         'progress',
                    //         'time',
                    //         'speed',
                    //         'definition',
                    //         'fullscreen',
                    //       ]
                    //     : [
                    //         'play',
                    //         'progress',
                    //         'time',
                    //         // 'speed',
                    //         // 'definition',
                    //         'fullscreen',
                    //       ],

                    // [
                    //   "rewind",
                    //   "play",
                    //   "forward",
                    //   "position-time", //当前播放时间
                    //   "progress", //线条形进度条（与‘basic-progress’二选一）
                    //   // "basic-progress",//矩形进度条（与‘progress’二选一）
                    //   "duration-time", //视频总时长
                    //   // "time",//格式：当前时间/视频总时长
                    //   'speed',
                    //   "fullscreen"
                    // ],
                  ),

                  /// 自定义字幕
                  videoSubtitlesStyle: VideoSubtitles(
                    mainTitle: Align(
                      alignment: Alignment.bottomCenter,
                      child: Container(
                        padding: const EdgeInsets.fromLTRB(10, 0, 10, 30),
                        child: Text(mainSubtitles,
                            maxLines: 2,
                            textAlign: TextAlign.center,
                            style: const TextStyle(
                                color: Colors.white, fontSize: 14)),
                      ),
                    ),
                    subTitle: Align(
                      alignment: Alignment.bottomCenter,
                      child: Container(
                        padding: const EdgeInsets.all(10),
                        child: Text(subSubtitles,
                            maxLines: 2,
                            textAlign: TextAlign.center,
                            style: const TextStyle(
                                color: Colors.white, fontSize: 14)),
                      ),
                    ),
                  ),
                ),

                /// 自定义拓展元素
                children: [
                  /// DEMO1 自定义视频播放状态Toast
                  /// 待完善

                  /// DEMO2 这个将会覆盖的视频内容，因为这个层级是最高级，因此手势会失效(慎用)
                  /// 这个可以用来做视频广告
                  showAdvertCover
                      ? Align(
                          alignment: Alignment.center,
                          child: Container(
                            width: 200,
                            height: 100,
                            color: Colors.blue[500],
                            child: Stack(
                              fit: StackFit.expand,
                              children: <Widget>[
                                //关闭广告
                                Align(
                                  alignment: Alignment.topRight,
                                  child: GestureDetector(
                                    onTap: () {
                                      setState(() {
                                        showAdvertCover = false;
                                      });
                                    },
                                    child: const Icon(
                                      Icons.cancel,
                                      size: 16,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                                Container(
                                  alignment: Alignment.center,
                                  child: const Text(
                                    "一个广告封面",
                                    style: TextStyle(color: Colors.white),
                                  ),
                                )
                              ],
                            ),
                          ),
                        )
                      : const Align(),
                  Builder(builder: (BuildContext context) {
                    state = GZVideoPlayer.of(context);
                    return const SizedBox();
                  })
                ],

                /// 初始化完成
                onInit: (VideoPlayerController controller) {
                  videoPlayerController = controller;
                },

                /// 视频暂停回调
                onPause: (value) {
                  debugPrint("video paused");
                  setState(() {
                    isPlaying = false;
                  });
                },

                /// 视频播放回调
                onPlay: (value) {
                  debugPrint("video played");
                  setState(() {
                    isPlaying = true;
                  });
                },

                /// 视频播放结束回调
                onEnded: (value) {
                  debugPrint("video ended");
                },

                /// 视频播放进度回调
                /// 可以用来匹配字幕
                onTimeUpdate: (value) {
                  // debugPrint("timeupdate ${value.position.inSeconds}");
                  // var position = value.position.inMilliseconds / 1000;
                  //根据 position 来判断当前显示的字幕
                },

                onProgressDrag: (position, duration) {
                  debugPrint("进度条拖拽的时间节点： $position");
                  debugPrint("进度条总时长： $duration");
                },

                onVolume: (value) {
                  // debugPrint("onvolume $value");
                },

                onBrightness: (value) {
                  debugPrint("onbrightness $value");
                },

                onFullscreen: (fullscreen) {
                  debugPrint("is fullscreen $fullscreen");
                  setState(() {
                    _isFullscreen = fullscreen;
                  });
                },

                onSpeedChange: (VideoSpeedItem item) {
                  debugPrint('current speed ${item.title}');
                },

                /// 顶部控制栏点击返回按钮
                onPop: (value) {
                  debugPrint("返回上一页");
                },
              )
            : const AspectRatio(
                aspectRatio: 16 / 9,
                child: Center(
                  child: CircularProgressIndicator(strokeWidth: 2.0),
                ),
              ),

        //update data source
        !_isFullscreen
            ? Expanded(
                child: CustomScrollView(
                  slivers: [
                    SliverToBoxAdapter(
                      child: VideoListWidget(
                        dataList: dataList,
                        onTapItem: (int index) {
                          VideoModel model = dataList[index];
                          setState(() {
                            videoUrl = model.url;
                          });
                        },
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: Center(
                        child: CustomBtn(
                          title: '暂停/播放',
                          onTap: () {
                            state?.togglePlay();
                          },
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: Center(
                        child: CustomBtn(
                          title: '播放到指定位置',
                          onTap: () {
                            state?.seekTo(const Duration(seconds: 2));
                          },
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: Center(
                        child: CustomBtn(
                          title: 'to second page',
                          onTap: () {
                            videoPlayerController?.pause();
                            Navigator.of(context).push(MaterialPageRoute(
                                builder: (BuildContext context) {
                              return const OtherTestPage();
                            }));
                          },
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: Center(
                        child: CustomBtn(
                          title: '切换视频source',
                          onTap: () {
                            definitionList = [
                              // VideoDefinitionItem(
                              //   dataSource:
                              //       'https://mpv.videocc.net/8f38fa3352/0/8f38fa33525a64b20de46bb5271f5ba0_1.mp4',
                              //   title: 'LD',
                              // ),
                              // VideoDefinitionItem(
                              //   dataSource:
                              //       'https://mpv.videocc.net/8f38fa3352/0/8f38fa33525a64b20de46bb5271f5ba0_2.mp4',
                              //   title: 'SD',
                              // ),
                              // "play_url": "https://mpv.videocc.net/8f38fa3352/c/8f38fa3352029c8ac2af1c90e3bb7cdc_2.mp4",
                              VideoDefinitionItem(
                                dataSource:
                                    'https://mpv.videocc.net/8f38fa3352/c/8f38fa3352029c8ac2af1c90e3bb7cdc_1.mp4',
                                title: 'LD',
                              ),
                              VideoDefinitionItem(
                                dataSource:
                                    'https://mpv.videocc.net/8f38fa3352/c/8f38fa3352029c8ac2af1c90e3bb7cdc_2.mp4',
                                title: 'SD',
                              ),
                            ];
                            videoUrl =
                                'https://mpv.videocc.net/8f38fa3352/c/8f38fa3352029c8ac2af1c90e3bb7cdc_1.mp4';
                            setState(() {});
                          },
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: Center(
                        child: CustomBtn(
                          title: 'overflow page',
                          onTap: () {
                            videoPlayerController?.pause();
                            Navigator.of(context).push(
                              MaterialPageRoute(
                                builder: (BuildContext context) {
                                  return const OverflowTestPage();
                                },
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                  ],
                ),
              )
            : Container(),
      ]),
    );
  }
}

class VideoModel {
  final String url;
  final String title;

  VideoModel({
    required this.url,
    required this.title,
  });
}

class VideoListWidget extends StatelessWidget {
  const VideoListWidget({
    super.key,
    this.dataList = const [],
    this.onTapItem,
  });

  final List<VideoModel> dataList;
  final ValueChanged<int>? onTapItem;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: buildItems(),
    );
  }

  List<Widget> buildItems() {
    List<Widget> list = [];
    for (int i = 0; i < dataList.length; i++) {
      VideoModel model = dataList[i];
      Widget widget = CustomBtn(
        title: model.title,
        onTap: () {
          onTapItem?.call(i);
        },
      );
      list.add(widget);
    }
    return list;
  }
}

class CustomBtn extends StatelessWidget {
  final VoidCallback? onTap;
  final String title;

  const CustomBtn({super.key, required this.title, this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.all(2),
        child: Container(
          width: 130.0,
          height: 30.0,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.5),
            borderRadius: const BorderRadius.all(Radius.circular(3.0)),
          ),
          child: Text(
            title,
            style: const TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}
