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/practice/voicetopic/voiceword/bloc/voice_word_bloc.dart';
import 'package:wow_english/practice/widgets/practice_header_widget.dart';

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


  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => VoiceWordBloc(PageController(),4),
      child: _VoiceWordPage(),
    );
  }
}

class _VoiceWordPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<VoiceWordBloc, VoiceWordState>(
      listener: (context, state){},
      child: _voiceWorView(),
    );
  }

  Widget _voiceWorView() => BlocBuilder<VoiceWordBloc, VoiceWordState>(
      builder: (context, state){
        return _voiceWordView();
      });

  Widget _voiceWordView() => BlocBuilder<VoiceWordBloc, VoiceWordState>(
      buildWhen: (_,s) => s is CurrentPageIndexState,
      builder: (context,state){
        final bloc = BlocProvider.of<VoiceWordBloc>(context);
        return Container(
          color: Colors.white,
          child: Stack(
            children: [
              Image.asset(
                  'road_bg'.assetPng,
                  height: double.infinity,
                  width: double.infinity
              ),
              Column(
                children: [
                  PracticeHeaderWidget(
                    title: '${bloc.currentPage}/8',
                    onTap: (){Navigator.pop(context);},
                  ),
                  Image.asset('voice'.assetPng,height: 33.h,width: 30.w,),
                  26.verticalSpace,
                  Expanded(
                    child: PageView.builder(
                        itemCount: 8,
                        scrollDirection: Axis.horizontal,
                        controller: bloc.pageController,
                        onPageChanged: (int index) {
                          bloc.add(CurrentPageIndexChangeEvent(index));
                        },
                        itemBuilder: (BuildContext context,int index){
                          return _pageViewItemWidget();
                        }),
                  )
                ],
              )
            ],
          ),
        );
      });

  Widget _pageViewItemWidget() => BlocBuilder<VoiceWordBloc, VoiceWordState>(
      builder: (context, state){
        final bloc = BlocProvider.of<VoiceWordBloc>(context);
        return SafeArea(
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                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<VoiceWordBloc,VoiceWordState>(
      buildWhen: (_, s) => s is SelectItemChangeState,
      builder: (context,state){
        final bloc = BlocProvider.of<VoiceWordBloc>(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),
                )
              ],
            ),
          ),
        );
      });
}