import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wow_english/common/extension/string_extension.dart';

enum OperationType {
  //返回
  back,
  //字幕
  subtitlesState,
  //静音
  audioState,
  //暂停/播放
  playState,
}

class VideoOperaWidget extends StatefulWidget {
  const VideoOperaWidget({super.key,
    this.currentTime = '00:00',
    this.totalTime = '00:00',
    this.degree = 0.0,
    this.actionEvent,
    this.sliderChangeEvent,
    this.isPlay = true
  });
  //当前播放时间
  final String currentTime;
  //总时间
  final String totalTime;
  final double degree;
  final bool isPlay;
  final Function(OperationType type)? actionEvent;
  final Function(double degree)? sliderChangeEvent;

  @override
  State<StatefulWidget> createState() {
    return _VideoOperaWidgetState();
  }
}

class _VideoOperaWidgetState extends State<VideoOperaWidget> {

  //是否在滑动
  late bool isSlider;
  late double sliderValue;

  @override
  void initState() {
    super.initState();
    isSlider = false;
    sliderValue = 0.0;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SafeArea(
            child: Padding(
              padding: EdgeInsets.only(top: 11.h),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      GestureDetector(
                        onTap: (){
                          widget.actionEvent?.call(OperationType.back);
                        },
                        child: Image.asset(
                            'back_around'.assetPng,
                            height: 40,
                            width: 40
                        ),
                      ),
                      18.horizontalSpace,
                      Container(
                        height: 40.h,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(6.r),
                            border: Border.all(
                                width: 1.5,
                                color: const Color(0xFF140C10)
                            )
                        ),
                        padding: EdgeInsets.symmetric(horizontal: 10.w),
                        child: Text(
                          'song',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 20.sp,
                            color: const Color(0xFF333333),
                          ),
                        ),
                      )
                    ],
                  ),
                  GestureDetector(
                    onTap: () {
                      widget.actionEvent?.call(OperationType.subtitlesState);
                    },
                    child: Container(
                      height: 40.h,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(6.r),
                          border: Border.all(
                              width: 1.5,
                              color: const Color(0xFF140C10)
                          )
                      ),
                      padding: EdgeInsets.symmetric(horizontal: 10.w),
                      child: Text(
                        '中/英',
                        style: TextStyle(
                          fontSize: 20.sp,
                          color: const Color(0xFF333333),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
          Container(
            color: Colors.white10,
            height: 47.h+ScreenUtil().bottomBarHeight,
            padding: EdgeInsets.symmetric(horizontal: 11.w),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Row(
                  children: [
                    IconButton(onPressed: (){
                      widget.actionEvent?.call(OperationType.playState);
                    }, icon: widget.isPlay?const Icon(Icons.pause,color: Colors.white,):const Icon(Icons.play_arrow,color: Colors.white),),
                    Expanded(
                      child: Slider(
                        activeColor: Colors.blue,
                        inactiveColor: Colors.white,
                        value: isSlider?sliderValue:widget.degree,
                        onChangeStart: (value) {
                         setState(() {
                           isSlider = true;
                           sliderValue = value;
                         });
                        },
                        onChangeEnd: (value) {
                          setState(() {
                            isSlider = false;
                          });
                          widget.sliderChangeEvent?.call(value);
                        },
                        onChanged: (value) {
                          setState(() {
                            sliderValue = value;
                          });
                        },
                      ),
                    ),
                    Text(
                      '${widget.currentTime}/${widget.totalTime}',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 12.sp
                      ),
                    )
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}