import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:star_lock/main/lockDetail/videoLog/videoLog/videoLog_entity.dart';
import 'package:star_lock/tools/dateTool.dart';
import 'package:video_player/video_player.dart';

class ControlsOverlay extends StatelessWidget {
  const ControlsOverlay(
      {Key? key, required this.controller, required this.recordData})
      : super(key: key);

  static const List<Duration> _exampleCaptionOffsets = <Duration>[
    Duration(seconds: -10),
    Duration(seconds: -3),
    Duration(seconds: -1, milliseconds: -500),
    Duration(milliseconds: -250),
    Duration.zero,
    Duration(milliseconds: 250),
    Duration(seconds: 1, milliseconds: 500),
    Duration(seconds: 3),
    Duration(seconds: 10),
  ];
  static const List<double> _examplePlaybackRates = <double>[
    0.25,
    0.5,
    1.0,
    1.5,
    2.0,
    3.0,
    5.0,
    10.0,
  ];

  final VideoPlayerController controller;
  final RecordListData recordData;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AnimatedSwitcher(
          duration: const Duration(milliseconds: 50),
          reverseDuration: const Duration(milliseconds: 200),
          child: controller.value.isPlaying
              ? const SizedBox.shrink()
              : Container(
                  color: Colors.black26,
                  child: const Center(
                    child:
                        // CircularProgressIndicator()
                        Icon(
                      Icons.play_arrow,
                      color: Colors.white,
                      size: 60.0,
                      semanticLabel: 'Play',
                    ),
                  ),
                ),
        ),
        GestureDetector(
          onTap: () {
            controller.value.isPlaying ? controller.pause() : controller.play();
          },
        ),

        // Align(
        //   alignment: Alignment.topLeft,
        //   child: PopupMenuButton<Duration>(
        //     initialValue: controller.value.captionOffset,
        //     tooltip: 'Caption Offset',
        //     onSelected: (Duration delay) {
        //       controller.setCaptionOffset(delay);
        //     },
        //     itemBuilder: (BuildContext context) {
        //       return <PopupMenuItem<Duration>>[
        //         for (final Duration offsetDuration in _exampleCaptionOffsets)
        //           PopupMenuItem<Duration>(
        //             value: offsetDuration,
        //             child: Text('${offsetDuration.inMilliseconds}ms'),
        //           )
        //       ];
        //     },
        //     child: Padding(
        //       padding: const EdgeInsets.symmetric(
        //         // Using less vertical padding as the text is also longer
        //         // horizontally, so it feels like it would need more spacing
        //         // horizontally (matching the aspect ratio of the video).
        //         vertical: 12,
        //         horizontal: 16,
        //       ),
        //       child: Text('${controller.value.captionOffset.inMilliseconds}ms'),
        //     ),
        //   ),
        // ),
        // Align(
        //   alignment: Alignment.topRight,
        //   child: PopupMenuButton<double>(
        //     initialValue: controller.value.playbackSpeed,
        //     tooltip: 'Playback speed',
        //     onSelected: (double speed) {
        //       controller.setPlaybackSpeed(speed);
        //     },
        //     itemBuilder: (BuildContext context) {
        //       return <PopupMenuItem<double>>[
        //         for (final double speed in _examplePlaybackRates)
        //           PopupMenuItem<double>(
        //             value: speed,
        //             child: Text('${speed}x'),
        //           )
        //       ];
        //     },
        //     child: Padding(
        //       padding: const EdgeInsets.symmetric(
        //         // Using less vertical padding as the text is also longer
        //         // horizontally, so it feels like it would need more spacing
        //         // horizontally (matching the aspect ratio of the video).
        //         vertical: 12,
        //         horizontal: 16,
        //       ),
        //       child: Text('${controller.value.playbackSpeed}x'),
        //     ),
        //   ),
        // ),

        Positioned(
          top: 0.h,
          left: 0.h,
          right: 0.h,
          child: Container(
            margin: EdgeInsets.only(left: 20.w, right: 20.w),
            // color: const Color(0xC83C3F41),
            child: Row(
              // mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                    DateTool()
                        .dateToYMDHNString(recordData.operateDate.toString()),
                    style: TextStyle(color: Colors.white, fontSize: 20.sp)),
                Expanded(child: SizedBox(width: 10.w)),
                Container(
                  width: 50.w,
                  height: 50.w,
                  padding: EdgeInsets.all(10.w),
                  child: Image(
                      width: 50.w,
                      height: 50.w,
                      image: const AssetImage(
                          'images/main/icon_lockDetail_monitoringShareVideo_white.png')),
                ),
                SizedBox(width: 20.w),
                Container(
                  width: 50.w,
                  height: 50.w,
                  padding: EdgeInsets.all(10.w),
                  child: Image(
                      width: 50.w,
                      height: 50.w,
                      image: const AssetImage(
                          'images/main/icon_lockDetail_monitoringDownloadVideo_white.png')),
                ),
                SizedBox(width: 20.w),
                Container(
                  width: 50.w,
                  height: 50.w,
                  padding: EdgeInsets.all(10.w),
                  child: Image(
                      width: 50.w,
                      height: 50.w,
                      image: const AssetImage(
                          'images/main/icon_lockDetail_monitoringDeletVideo_white.png')),
                ),
              ],
            ),
          ),
        ),

        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Container(
            padding: EdgeInsets.only(right: 10.w, left: 10.w),
            color: const Color.fromRGBO(0, 0, 0, 0.5),
            height: 60.h,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                //暂停按钮
                InkWell(
                  child: controller.value.isPlaying
                      ? const Icon(Icons.pause,
                          size: 30, color: Color(0xffefefef))
                      : const Icon(Icons.play_arrow,
                          size: 30, color: Color(0xffefefef)),
                  onTap: () {
                    // if(controller.value.isBuffering == false){
                    //   return;
                    // }
                    controller.value.isPlaying
                        ? controller.pause()
                        : controller.play();
                  },
                ),
                //当前播放进度
                Text(
                  formatString(controller.value.position),
                  style: TextStyle(
                      fontSize: 22.sp, color: const Color(0xffefefef)),
                ),
                //进度条
                Expanded(
                  child: Slider(
                    activeColor: const Color(0xFFFFFFFF),
                    max: controller.value.duration.inMilliseconds
                        .truncateToDouble(),
                    value: controller.value.position.inMilliseconds
                        .truncateToDouble(),
                    onChanged: (newRating) {
                      controller
                          .seekTo(Duration(milliseconds: newRating.truncate()));
                    },
                  ),
                ),
                //总视频进度
                Text(
                  formatString(controller.value.duration),
                  style: TextStyle(
                      fontSize: 22.sp, color: const Color(0xffefefef)),
                ),
                //倍速下拉菜单
                // DropdownButtonHideUnderline(
                //   child: DropdownButton2(
                //     hint: Text(
                //       _selectedValue,
                //       style: TextStyle(
                //         fontSize: 18,
                //         color:
                //         Color(0xffefefef),
                //       ),
                //     ),
                //     items: items
                //         .map((item) =>
                //         DropdownMenuItem<
                //             String>(
                //           value: item,
                //           child: Text(
                //             '${item}x',
                //             style:
                //             const TextStyle(
                //               fontSize:
                //               16,
                //             ),
                //           ),
                //         ))
                //         .toList(),
                //     // value: _selectedValue,
                //     // icon: Visibility(
                //     //     visible: false,
                //     //     child: Icon(Icons
                //     //         .arrow_downward)),
                //     onChanged: (value) async {
                //       double val =
                //       double.parse(value
                //       as String);
                //       _videoPlayerController
                //           .setPlaybackSpeed(val);
                //       setState(() {
                //         if (val == 1.0) {
                //           _selectedValue =
                //           '倍速';
                //         } else {
                //           _selectedValue =
                //           '${value as String}x';
                //         }
                //       });
                //     },
                //     // dropdownWidth: 100,
                //     // buttonWidth: 60,
                //     // iconSize: 36,
                //     // iconEnabledColor:Colors.white,
                //     // buttonPadding:const EdgeInsets.only(left: 10),
                //   ),
                // ),
              ],
            ),
          ),
        )
      ],
    );
  }

  String formatString(time) {
    var shortName = time.toString().substring(2, 7);
    return shortName;
  }
}