import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../app_settings/app_colors.dart';
import '../../../../tools/titleAppBar.dart';
import 'controlsOverlay_page.dart';
import 'videoLogDetail_logic.dart';
import 'package:video_player/video_player.dart';

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

  @override
  State<VideoLogDetailPage> createState() => _VideoLogDetailPageState();
}

class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
  final logic = Get.put(VideoLogDetailLogic());
  final state = Get.find<VideoLogDetailLogic>().state;

  late VideoPlayerController _controller;

  // Future<ClosedCaptionFile> _loadCaptions() async {
  //   final String fileContents = await DefaultAssetBundle.of(context)
  //       .loadString('images/bumble_bee_captions.vtt');
  //   return WebVTTCaptionFile(
  //       fileContents); // For vtt files, use WebVTTCaptionFile
  // }

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.networkUrl(
      Uri.parse('https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4'),
      // closedCaptionFile: _loadCaptions(),
      // videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
    );

    _controller.addListener(() {
      setState(() {
        print("controller.value.isBuffering:${_controller.value.isBuffering}");
      });
    });

    _controller.setLooping(false);
    // _controller.setVolume(1);
    _controller.initialize();

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: TitleAppBar(
        barTitle: "本地视频播放",
        haveBack: true,
        backgroundColor: AppColors.mainColor,
      ),
      body: Column(
        children: [
          AspectRatio(
            aspectRatio: 16/9,
            child: Stack(
              alignment: Alignment.bottomCenter,
              children: <Widget>[
                VideoPlayer(_controller),
                // ClosedCaption(text: _controller.value.caption.text),
                ControlsOverlay(controller: _controller),
                (_controller.value.isPlaying || _controller.value.isBuffering) ? Container() : VideoProgressIndicator(_controller, colors:VideoProgressColors(playedColor:AppColors.mainColor), allowScrubbing: true),
              ],
            ),
          ),
          Container(
              margin: EdgeInsets.only(left:20.w, top: 15.w),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text("2023.10.23", style: TextStyle(fontSize: 20.sp)),
                    ],
                  ),
                  SizedBox(height: 15.h),
                  Row(
                    children: [
                      videoItem(true),
                    ],
                  ),
                ],
              )),
          Expanded(
            child: ListView.builder(
                itemCount: 4,
                itemBuilder: (c, index) {
                  return Column(children: [
                    Container(
                        margin: EdgeInsets.only(left:20.w, top: 15.w, bottom: 15.w),
                        child: Row(
                            children: [
                              Text("2023.10.23", style: TextStyle(fontSize: 20.sp)),
                            ]
                        )),
                    mainListView()
                  ],);
                }),
          ),
        ],
      ),
    );
  }


  var itemW = (1.sw - 15.w*4)/3;
  var itemH = (1.sw - 15.w*4)/3+40.h;
  Widget mainListView(){
    return GridView.builder(
      padding: EdgeInsets.only(left: 15.w, right: 15.w),
      itemCount: 4,
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        //横轴元素个数
          crossAxisCount: 3,
          //纵轴间距
          mainAxisSpacing: 10.w,
          // 横轴间距
          crossAxisSpacing: 15.w,
          //子组件宽高长度比例
          childAspectRatio: itemW/itemH
      ),
      itemBuilder: (context, index) {
        return videoItem(false);
      },
    );
  }

  Widget videoItem(bool isPlay){
    return SizedBox(
      width: itemW,
      height: itemH,
      child: Stack(
        children: [
          Column(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(10.w),
                child: Stack(
                    children: [
                      Image(width: itemW, height: itemW, fit: BoxFit.fill, image: const AssetImage("images/main/icon_lockDetail_monitoringvoiceFrist.png")),
                      Positioned(
                        left: 8.w,
                          bottom: 5.h,
                          child: Text("00:06", style: TextStyle(color: Colors.white, fontSize: 20.sp))
                      ),
                      Visibility(
                        visible: isPlay,
                        child: Positioned(
                            left: 0,
                            right: 0,
                            top: 0,
                            bottom: 0,
                            child: Container(
                              // padding: EdgeInsets.only(right: 10.w, left: 10.w),
                              color: const Color.fromRGBO(0, 0, 0, 0.3),
                              child: Center(child: Text("播放中", style: TextStyle(color: Colors.white, fontSize: 22.sp))),
                            )
                        ),
                      )
                    ]
                ),
              ),
              SizedBox(height:5.h),
              Text("2023.10.23 10:00", style: TextStyle(fontSize: 20.sp))
            ],
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

}