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/common/widgets/ow_image_widget.dart';

import 'bloc/topic_picture_bloc.dart';
import 'widgets/practice_header_widget.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => TopicPictureBloc(PageController(),3),
      child: _TopicPicturePage(),
    );
  }
}

class _TopicPicturePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<TopicPictureBloc,TopicPictureState>(
      listener: (context, state){},
      child: _topicPictureView(),
    );
  }

  Widget _topicPictureView() => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      buildWhen: (_,s) => s is CurrentPageIndexState,
      builder: (context,state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return Container(
          color: Colors.white,
          child: Stack(
            children: [
              Column(
                children: [
                  PracticeHeaderWidget(
                    title: '${bloc.currentPage}/8',
                    onTap: (){Navigator.pop(context);},
                  ),
                  Expanded(
                    child: PageView.builder(
                        itemCount: 8,
                        scrollDirection: Axis.horizontal,
                        controller: bloc.pageController,
                        onPageChanged: (int index) {
                          bloc.add(CurrentPageIndexChangeEvent(index));
                        },
                        itemBuilder: (BuildContext context,int index){
                          if (index % 5 == 0) {
                            return _pageViewWordItemWidget();
                          } else if (index % 5 == 1) {
                            return _pageViewItemWidget();
                          } else  if (index % 5 == 2){
                            return _pageViewVoicePictureItemWidget();
                          } else  if (index % 5 == 3){
                            return _voiceAnswerItem();
                          } else {
                            return _pageViewVoiceWordItemWidget();
                          }
                        }),
                  )
                ],
              ),
              Positioned(
                  left: 0,
                  right: 0,
                  bottom: 0,
                  child: Image.asset('bottom_grass'.assetPng)
              )
            ],
          ),
        );
      });

  ///看题选图
  Widget _pageViewItemWidget() => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context, state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return SafeArea(
          child: Column(
            children: [
              Text(
                  'What to do when the sentence question is very long and needs a line break',
                  softWrap: true,
                  style: TextStyle(
                      fontSize: 21.sp,
                      color: const Color(0xFF333333)
                  )
              ),
              26.verticalSpace,
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Offstage(
                    offstage: (bloc.modelCount < 1),
                    child: _decodeImageWidget(1),
                  ),
                  Offstage(
                    offstage: (bloc.modelCount < 2),
                    child: _decodeImageWidget(2),
                  ),
                  Offstage(
                    offstage: (bloc.modelCount < 3),
                    child: _decodeImageWidget(3),
                  ),
                  Offstage(
                    offstage: (bloc.modelCount < 4),
                    child: _decodeImageWidget(4),
                  )
                ],
              )
            ],
          ),
        );
      });

  Widget _decodeImageWidget(int index) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      buildWhen: (_, s) => s is SelectItemChangeState,
      builder: (context,state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return GestureDetector(
          onTap: () => bloc.add(SelectItemEvent(index)),
          child: Container(
            padding: const EdgeInsets.all(4.5),
            decoration: BoxDecoration(
              color: bloc.selectItem == index?const Color(0xFF00B6F1):Colors.white,
              borderRadius: BorderRadius.circular(15),
            ),
            height: 143.h,
            width: 143.w,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(15),
                  border: Border.all(
                      width: 1.0,
                      color: const Color(0xFF140C10)
                  ),
                  image: const DecorationImage(
                      fit: BoxFit.fitWidth,
                      image: NetworkImage('https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714')
                  )
              ),
            ),
          ),
        );
      });

  ///看题选字
  Widget _pageViewWordItemWidget() => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context, state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return SafeArea(
          child: Column(
            children: [
              Text(
                  'What to do when the sentence question is very long and needs a line break',
                  softWrap: true,
                  style: TextStyle(
                      fontSize: 21.sp,
                      color: const Color(0xFF333333)
                  )
              ),
              26.verticalSpace,
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Offstage(
                    offstage: (bloc.modelCount < 1),
                    child: _decodeWordWidget(1),
                  ),
                  Offstage(
                    offstage: (bloc.modelCount < 2),
                    child: _decodeWordWidget(2),
                  ),
                  Offstage(
                    offstage: (bloc.modelCount < 3),
                    child: _decodeWordWidget(3),
                  ),
                  Offstage(
                    offstage: (bloc.modelCount < 4),
                    child: _decodeWordWidget(4),
                  )
                ],
              )
            ],
          ),
        );
      });

  Widget _decodeWordWidget(int index) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      buildWhen: (_, s) => s is SelectItemChangeState,
      builder: (context,state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return GestureDetector(
          onTap: () => bloc.add(SelectItemEvent(index)),
          child: Container(
            width: 143.w,
            height: 143.h,
            padding: EdgeInsets.only(left: 13.w,right: 13.w,top: 13.h,bottom: 13.h),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(15),
              border: Border.all(
                  width: 1.0,
                  color: const Color(0xFF140C10)
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Expanded(
                  child: Container(
                    alignment: Alignment.center,
                    child: Text(
                        'yellow',
                        style: TextStyle(
                            fontSize: 20.sp,
                            color: const Color(0xFF333333)
                        )
                    ),
                  ),
                ),
                Container(
                  height: 30.h,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: bloc.selectItem == index?const Color(0xFF00B6F1):Colors.white,
                    borderRadius: BorderRadius.circular(15.r),
                    border: Border.all(
                        width: 1.5,
                        color: const Color(0xFF140C10)
                    ),
                  ),
                  alignment: Alignment.center,
                  child: Image.asset('choose'.assetPng),
                )
              ],
            ),
          ),
        );
      });

  ///听音选图
  Widget _pageViewVoicePictureItemWidget() => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context, state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return SafeArea(
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset('voice'.assetPng,height: 33.h,width: 30.w,),
                  10.horizontalSpace,
                  Text(
                      'yellow',
                      style: TextStyle(
                          fontSize: 20.sp,
                          color: const Color(0xFF333333)
                      )
                  )
                ],
              ),
              26.verticalSpace,
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Offstage(
                    offstage: (bloc.modelCount < 1),
                    child: _decodeVoiceImageWidget(1),
                  ),
                  Offstage(
                    offstage: (bloc.modelCount < 2),
                    child: _decodeVoiceImageWidget(2),
                  ),
                  Offstage(
                    offstage: (bloc.modelCount < 3),
                    child: _decodeVoiceImageWidget(3),
                  ),
                  Offstage(
                    offstage: (bloc.modelCount < 4),
                    child: _decodeVoiceImageWidget(4),
                  )
                ],
              )
            ],
          ),
        );
      });

  Widget _decodeVoiceImageWidget(int index) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      buildWhen: (_, s) => s is SelectItemChangeState,
      builder: (context,state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return GestureDetector(
          onTap: () => bloc.add(SelectItemEvent(index)),
          child: Container(
            padding: const EdgeInsets.all(4.5),
            decoration: BoxDecoration(
              color: bloc.selectItem == index?const Color(0xFF00B6F1):Colors.white,
              borderRadius: BorderRadius.circular(15),
            ),
            height: 143.h,
            width: 143.w,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(15),
                  border: Border.all(
                      width: 1.0,
                      color: const Color(0xFF140C10)
                  ),
                  image: const DecorationImage(
                      fit: BoxFit.fitWidth,
                      image: NetworkImage('https://img1.baidu.com/it/u=3392591833,1640391553&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714')
                  )
              ),
            ),
          ),
        );
      });

  ///听音选字
  Widget _pageViewVoiceWordItemWidget() => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context, state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return SafeArea(
          child: Column(
            children: [
              Image.asset('voice'.assetPng,height: 33.h,width: 30.w,),
              26.verticalSpace,
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Offstage(
                    offstage: (bloc.modelCount < 1),
                    child: _decodeVoiceWordImageWidget(1),
                  ),
                  Offstage(
                    offstage: (bloc.modelCount < 2),
                    child: _decodeVoiceWordImageWidget(2),
                  ),
                  Offstage(
                    offstage: (bloc.modelCount < 3),
                    child: _decodeVoiceWordImageWidget(3),
                  ),
                  Offstage(
                    offstage: (bloc.modelCount < 4),
                    child: _decodeVoiceWordImageWidget(4),
                  )
                ],
              )
            ],
          ),
        );
      });

  Widget _decodeVoiceWordImageWidget(int index) => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      buildWhen: (_, s) => s is SelectItemChangeState,
      builder: (context,state){
        final bloc = BlocProvider.of<TopicPictureBloc>(context);
        return GestureDetector(
          onTap: () => bloc.add(SelectItemEvent(index)),
          child: Container(
            width: 143.w,
            height: 143.h,
            padding: EdgeInsets.only(left: 13.w,right: 13.w,top: 13.h,bottom: 13.h),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(15),
              border: Border.all(
                  width: 1.0,
                  color: const Color(0xFF140C10)
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Expanded(
                  child: Container(
                    alignment: Alignment.center,
                    child: Text(
                        'yellow',
                        style: TextStyle(
                            fontSize: 20.sp,
                            color: const Color(0xFF333333)
                        )
                    ),
                  ),
                ),
                Container(
                  height: 30.h,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: bloc.selectItem == index?const Color(0xFF00B6F1):Colors.white,
                    borderRadius: BorderRadius.circular(15.r),
                    border: Border.all(
                        width: 1.5,
                        color: const Color(0xFF140C10)
                    ),
                  ),
                  alignment: Alignment.center,
                  child: Image.asset('choose'.assetPng),
                )
              ],
            ),
          ),
        );
      });

  ///语音问答
  Widget _voiceAnswerItem() => BlocBuilder<TopicPictureBloc,TopicPictureState>(
      builder: (context, state) {
        return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        OwImageWidget(
          name:'https://up.enterdesk.com/edpic_source/16/e7/0d/16e70d550daff77cbac31fae5e1651d4.jpg',
          height: 186.h,
          width: 186.w,
        ),
        160.horizontalSpace,
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'voice'.assetPng,
              height: 52.h,
              width: 46.w,
            ),
            70.verticalSpace,
            Image.asset(
              'micro_phone'.assetPng,
              height: 75.w,
              width: 75.w,
            )
          ],
        )
      ],
    );
  });
}