import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wow_english/common/extension/string_extension.dart';
import 'package:wow_english/pages/repeataftercontent/bloc/repeat_after_content_bloc.dart';
import 'package:wow_english/route/route.dart';

import '../../common/core/user_util.dart';
import 'widgets/repeat_video_widget.dart';

class RepeatAfterContentPage extends StatelessWidget {
  const RepeatAfterContentPage({super.key, this.videoFollowReadId});

  final String? videoFollowReadId;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => RepeatAfterContentBloc(videoFollowReadId ??'')
        ..add(InitBlocEvent())
        ..add(RequestDataEvent())
        ..add(XSVoiceInitEvent(
            {
              'appKey':'a418',
              'secretKey':'1a16f31f2611bf32fb7b3fc38f5b2c81',
              'userId':UserUtil.getUser()!.id.toString()
            }
        )),
      child: _RepeatAfterContentPage(),
    );
  }
}

class _RepeatAfterContentPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<RepeatAfterContentBloc,RepeatAfterContentState>(
      listener: (context,state){
        debugPrint('123');
      },
      child: _repeatAfterContentView(),
    );
  }


  Widget _repeatAfterContentView() => BlocBuilder<RepeatAfterContentBloc,RepeatAfterContentState>(builder: (context,state){
    final bloc = BlocProvider.of<RepeatAfterContentBloc>(context);
    final String videoUrl =  bloc.entityList?.first?.videoUrl??'';
    return Container(
      color: Colors.white,
      child: SafeArea(
        child: Stack(
          children: [
            ///返回
            Positioned(
              top: 13.h,
              child: GestureDetector(
                onTap: () => popPage(),
                child: Image.asset(
                  'back_around'.assetPng,
                  height: 40.h,
                  width: 40.w,
                ),
              ),
            ),
            ///左侧视频区
            Positioned(
              top: 53.h,
              left: 20.w,
              child: Container(
                width: 285.w,
                height: 299.h,
                padding: EdgeInsets.symmetric(horizontal: 50.w,vertical: 50.h),
                decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage('video_background'.assetPng),
                      fit: BoxFit.fill
                  ),
                ),
                child: videoUrl.isEmpty?Container(): RepeatVideoWidget(videoUrl: bloc.entityList?.first?.videoUrl,),
              ),
            ),
            ///右侧操作区
            Positioned(
              top: 53.h,
              right: 25.w,
              child: Container(
                width: 240.w,
                height: 299.h,
                padding: EdgeInsets.only(
                    left: 67.w,
                    bottom: 40.h
                ),
                decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage('light_ground'.assetPng),
                      fit: BoxFit.fill
                  ),
                ),
                child: bloc.isRecord?_buildLongPressWidget():_buildPlayVideoWidget(),
              ),
            ),
            Positioned(
              top: 72.h,
              left: 274.w,
              child: Container(
                width: 87.w,
                height: 240.h,
                decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage('and_book'.assetPng),
                      fit: BoxFit.fill
                  ),
                ),
              ),
            ),
            ///跟读
            Positioned(
              top: 29.h,
              left: 65.w,
              child: Container(
                width: 185.w,
                height: 48.h,
                decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage('title_ground'.assetPng),
                      fit: BoxFit.fill
                  ),
                ),
                child: Text(
                  'read title',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 21.sp
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  });

  ///播放中
  Widget _buildPlayVideoWidget() {
    return BlocBuilder<RepeatAfterContentBloc,RepeatAfterContentState>(
        builder: (context,state){
          final bloc = BlocProvider.of<RepeatAfterContentBloc>(context);
          return Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Row(
                children: [
                  SizedBox(
                    height: 23.h,
                    width: 33.w,
                  ),
                  // IconButton(
                  //     onPressed: (){},
                  //     icon: Image.asset(
                  //       'previous'.assetPng,
                  //       height: 23.h,
                  //       width: 23.w,
                  //     )
                  // ),
                  IconButton(
                      onPressed:() => bloc.add(VideoPlayChangeEvent()),
                      icon: Image.asset(
                        'video_pause'.assetPng,
                        height: 50.h,
                        width: 50.w,
                      )
                  ),
                  SizedBox(
                    height: 23.h,
                    width: 23.w,
                  ),
                  // IconButton(
                  //     onPressed: (){},
                  //     icon: Image.asset(
                  //       'next'.assetPng,
                  //       height: 23.h,
                  //       width: 23.w,
                  //     )
                  // )
                ],
              ),
              Row(
                children: [
                  SizedBox(
                    height: 23.h,
                    width: 23.w,
                  ),
                  10.horizontalSpace,
                  Column(
                    children: [
                      20.verticalSpace,
                      IconButton(
                          onPressed: ()=>bloc.add(VoiceRecordEvent()),
                          icon: Image.asset(
                            'video_record'.assetPng,
                            height: 53.h,
                            width: 53.w,
                          )
                      ),
                      Text(
                        '录音',
                        style: TextStyle(
                            color: const Color(0xFF333333),
                            fontSize: 14.sp
                        ),
                      )
                    ],
                  ),
                  // Container(
                  //   height: 22.h,
                  //   width: 37.w,
                  //   decoration: BoxDecoration(
                  //       color: const Color(0xFF56CE5F),
                  //       borderRadius: BorderRadius.circular(10.r)
                  //   ),
                  //   child: Text(
                  //     '1.0x',
                  //     textAlign: TextAlign.center,
                  //     style: TextStyle(
                  //         color: Colors.white,
                  //         fontSize: 12.sp
                  //     ),
                  //   ),
                  // )
                ],
              )
            ],
          );
        });
  }

  ///长按录音
  Widget _buildLongPressWidget() => BlocBuilder<RepeatAfterContentBloc,RepeatAfterContentState>(
      builder: (context,state){
        final bloc = BlocProvider.of<RepeatAfterContentBloc>(context);
        final voiceResult = bloc.voiceTestResult;
        return Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Offstage(
              offstage: bloc.voiceRecordState != VoiceRecordState.voiceRecordEnd && voiceResult == null,
              child: Column(
                children: [
                  Container(
                    height: 45.h,
                    width: 45.h,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: const Color(0xFF40E04B),
                        borderRadius: BorderRadius.circular(22.5.r)
                    ),
                    child: Text(
                      voiceResult?['overall'].toString()??'0',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 17.sp
                      ),
                    ),
                  ),
                  IconButton(
                      onPressed: (){
                        if(voiceResult != null) {
                          bloc.add(RecordeVoicePlayEvent(voiceResult['audioUrl']??''));
                        }
                      },
                      icon: Image.asset(
                        'voice_record_play'.assetPng,
                        height: 30.h,
                        width: 30.w,
                      )
                  ),
                  Text(
                    '录音',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: const Color(0xFF666666),
                        fontSize: 11.sp
                    ),
                  ),
                ],
              ),
            ),
            GestureDetector(
              onTap: () => bloc.add(VoiceRecordEvent()),
              onLongPress: () {
                bloc.add(XSVoiceTestEvent(bloc.entityList?.first?.word??'', '0', UserUtil.getUser()!.id.toString()));
              },
              onLongPressStart: (LongPressStartDetails details) {
                bloc.add(VoiceRecordStateChangeEvent(VoiceRecordState.voiceRecordStat));
              },
              onLongPressEnd: (LongPressEndDetails details) {
                bloc.add(VoiceRecordStateChangeEvent(VoiceRecordState.voiceRecordEnd));
              },
              onLongPressUp: () {

              },
              child: Image.asset(
                'video_record'.assetPng,
                height: 78.h,
                width: 78.w,
              ),
            ),
            Text(
              '按住录音',
              textAlign: TextAlign.center,
              style: TextStyle(
                  color: const Color(0xFF333333),
                  fontSize: 16.sp
              ),
            ),
          ],
        );
      });
}