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/reading/widgets/ReadingModeType.dart';
import 'package:wow_english/pages/reading/widgets/reading_dialog_widget.dart';
import 'package:wow_english/route/route.dart';

import '../../common/core/app_consts.dart';
import '../../common/core/user_util.dart';
import '../../models/course_process_entity.dart';
import '../../utils/log_util.dart';
import 'bloc/reading_bloc.dart';

class ReadingPage extends StatelessWidget {
  const ReadingPage({super.key, this.courseLessonId});

  final String? courseLessonId;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => ReadingPageBloc(context, PageController(), courseLessonId ?? '')
        ..add(InitBlocEvent())
        ..add(RequestDataEvent())
        ..add(XSVoiceInitEvent(
            {
              'appKey':AppConsts.xsAppKey,
              'service':AppConsts.xsAppService,
              'secretKey':AppConsts.xsAppSecretKey,
              'userId':UserUtil.getUser()!.id.toString(),
            }
        )),
      child: _ReadingPage(),
    );
  }
}

class _ReadingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<ReadingPageBloc, ReadingPageState>(
      listener: (context, state) {
        Log.d('reading BlocListener=$state');
        if (state is RequestDataState) {
          ///刷新页面
          context.read<ReadingPageBloc>().add(CurrentPageIndexChangeEvent(0));
        }
        if (state is FeedbackState) {
          showDialog<ReadingDialog>(
              context: context,
              barrierDismissible: false,
              builder: (context) {
                return const ReadingDialog();
              });
        }
      },
      child: _readingPageView(),
    );
  }

  Widget _readingPageView() => BlocBuilder<ReadingPageBloc, ReadingPageState>(
      builder: (context, state) {
        final bloc = BlocProvider.of<ReadingPageBloc>(context);
        return Container(
          color: Colors.white,
          child: Stack(
            children: [
              PageView.builder(
                  itemCount: bloc.dataCount(),
                  controller: bloc.pageController,
                  onPageChanged: (int index) {
                    bloc.add(CurrentPageIndexChangeEvent(index));
                  },
                  itemBuilder: (context, int index) {
                    return _readingPagerItem(bloc.entity!.readings![index]);
                  }),
              Container(
                color: Colors.transparent,
                height: kToolbarHeight,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Padding(
                      padding:
                      EdgeInsets.only(left: ScreenUtil().bottomBarHeight),
                      child: IconButton(
                          onPressed: () {
                            popPage(
                                data:{
                                  'currentStep':bloc.currentPage,
                                  'courseLessonId':bloc.courseLessonId,
                                  'isCompleted':bloc.isLastPage(),
                                }
                            );
                          },
                          icon: Image.asset(
                            'back_around'.assetPng,
                            width: 40.w,
                            height: 40.h,
                          )),
                    ),
                    Container(
                      height: 32.h,
                      padding: EdgeInsets.symmetric(horizontal: 27.w),
                      decoration: BoxDecoration(
                        color: const Color(0xFF00B6F1),
                        borderRadius: BorderRadius.circular(15.r),
                        border: Border.all(
                          width: 1.0,
                          color: const Color(0xFF140C10),
                        ),
                      ),
                      alignment: Alignment.center,
                      child: Text(
                        '${bloc.currentPage}/${bloc.dataCount()}',
                        style: TextStyle(fontSize: 20.sp, color: Colors.white),
                      ),
                    ),

                    Padding(
                      padding: EdgeInsets.only(
                          right: 15.w + ScreenUtil().bottomBarHeight),
                      child: GestureDetector(
                        onTap: () {
                          bloc.add(CurrentModeChangeEvent());
                        },
                        child: SizedBox(
                          height: 40.h,
                          child: Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: AssetImage('bg_reading_mode'.assetPng),
                                  fit: BoxFit.fill),
                            ),
                            alignment: Alignment.center,
                            padding: EdgeInsets.symmetric(horizontal: 10.w),
                            child: Text(
                              bloc.currentMode == ReadingModeType.auto
                                  ? '设为手动'
                                  : '设为自动',
                              style: TextStyle(fontSize: 14.5.sp),
                            ),
                          ),
                        ),
                      ),
                    ),

                    // ScreenUtil().bottomBarHeight.horizontalSpace,
                  ],
                ),
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: Container(
                  color: const Color(0x4DFFFFFF),
                  margin: EdgeInsets.symmetric(horizontal: 10.w),
                  child: Row(
                    children: [
                      GestureDetector(
                        onTap: () {
                          if (bloc.isRecording) {
                            return;
                          }
                          bloc.add(PlayOriginalAudioEvent(null));
                        },
                        child: Image.asset(
                          bloc.voicePlayState == VoicePlayState.playing &&
                              bloc.isOriginAudioPlaying
                              ? 'reade_answer'.assetGif
                              : 'voice'.assetPng,
                          height: 40.h,
                          width: 45.w,
                        ),
                      ),
                      SizedBox(
                        width: 10.w,
                      ),
                      Expanded(
                          child: Text(
                            bloc.currentPageData()?.word ?? '',
                            style: TextStyle(
                                color: const Color(0xFF333333), fontSize: 21.sp),
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                          )),
                      SizedBox(
                        width: 10.w,
                      ),
                      GestureDetector(
                          onTap: () {
                            if (bloc.isRecording) {
                              bloc.add(XSVoiceStopEvent());
                            } else {
                              bloc.add(XSVoiceStartEvent(
                                  bloc.currentPageData()?.word ?? '',
                                  '0',
                                  UserUtil.getUser()?.id.toString()));
                            }
                          },
                          child: Image.asset(
                            bloc.isRecording
                                ? 'micro_phone'.assetGif
                                : 'micro_phone'.assetPng,
                            height: 47.h,
                            width: 47.w,
                          )),
                      SizedBox(
                        width: 10.w,
                      ),
                      GestureDetector(
                          onTap: () {
                            if (bloc.isRecording) {
                              return;
                            }
                            bloc.add(PlayRecordAudioEvent());
                          },
                          child: Visibility(
                            visible: bloc.currentPageData()?.recordUrl != null,
                            child: Image.asset(
                              bloc.isRecordAudioPlaying
                                  ? 'record_pause'.assetWebp
                                  : 'record_play'.assetWebp,
                              height: 33.h,
                              width: 33.w,
                            ),
                          )),
                    ],
                  ),
                ),
              )
            ],
          ),
        );
      });

  Widget _readingPagerItem(CourseProcessReadings readings) =>
      BlocBuilder<ReadingPageBloc, ReadingPageState>(builder: (context, state) {
        return Stack(
          children: [
            Positioned.fill(
              child:
              Image.network(readings.picUrl ?? '', fit: BoxFit.cover),
            ),
          ],
        );
      });
}