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 'bloc/reading_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => ReadingPageBloc(PageController()),
      child: _ReadingPage(),
    );
  }
}

class _ReadingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<ReadingPageBloc, ReadingPageState>(
      listener: (context, state) {},
      child: _readingPageView(),
    );
  }

  Widget _readingPageView() => BlocBuilder<ReadingPageBloc, ReadingPageState>(
      buildWhen: (_, s) => s is CurrentPageIndexState,
      builder: (context, state) {
        final bloc = BlocProvider.of<ReadingPageBloc>(context);
        return Container(
          color: Colors.white,
          child: Stack(
            children: [
              PageView.builder(
                  itemCount: 10,
                  controller: bloc.pageController,
                  onPageChanged: (int index) {
                    bloc.add(CurrentPageIndexChangeEvent(index));
                  },
                  itemBuilder: (context, int index) {
                    return _readingPagerItem();
                  }),
              Container(
                color: Colors.transparent,
                height: 60.h,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Padding(
                      padding:
                          EdgeInsets.only(left: ScreenUtil().bottomBarHeight),
                      child: IconButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          icon: Image.asset(
                            'back_around'.assetPng,
                            width: 40,
                            height: 40,
                          )),
                    ),
                    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}/10',

                        ///todo 分母需要替换成数据数组长度
                        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: [
                      Image.asset(
                        'voice'.assetPng,
                        height: 40.h,
                        width: 45.w,
                      ),
                      SizedBox(
                        width: 10.w,
                      ),
                      Expanded(
                          child: Text(
                        "HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld",
                        style: TextStyle(
                            color: const Color(0xFF333333), fontSize: 21.sp),
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      )),
                      SizedBox(
                        width: 10.w,
                      ),
                      Image.asset(
                        'micro_phone'.assetPng,
                        height: 47.h,
                        width: 47.w,
                      ),
                      SizedBox(
                        width: 10.w,
                      ),
                      Visibility(
                        visible: false,

                        ///todo 依据是否录过音
                        child: Image.asset(
                          'record_pause'.assetWebp,

                          ///todo 根据播放状态切换图片
                          height: 33.h,
                          width: 33.w,
                        ),
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        );
      });

  Widget _readingPagerItem() =>
      BlocBuilder<ReadingPageBloc, ReadingPageState>(builder: (context, state) {
        return Stack(
          children: [
            Image.network(
                'https://img.liblibai.com/web/648331d5a2cb5.png?image_process=format,webp&x-oss-process=image/resize,w_2980,m_lfit/format,webp',
                height: double.infinity,
                width: double.infinity),
          ],
        );
      });
}