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/chosetopic/topicword/bloc/topic_word_bloc.dart';
import 'package:wow_english/practice/widgets/practice_header_widget.dart';

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

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

class _TopicWordPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<TopicWordBloc,TopicWordState>(
      listener: (context, state) {

      },
      child: _topicWordView(),
    );
  }

  Widget _topicWordView() => BlocBuilder<TopicWordBloc,TopicWordState>(
      builder: (context,state){
        final bloc = BlocProvider.of<TopicWordBloc>(context);
        return Container(
          color: Colors.white,
          child: Stack(
            children: [
              Positioned(
                  left: 0,
                  right: 0,
                  bottom: 0,
                  child: Image.asset('background_grass'.assetPng,fit: BoxFit.fitWidth,)
              ),
              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){
                          return _pageViewItemWidget();
                        }),
                  )
                ],
              ),
            ],
          ),
        );
      });

  Widget _pageViewItemWidget() => BlocBuilder<TopicWordBloc,TopicWordState>(
      builder: (context, state){
        final bloc = BlocProvider.of<TopicWordBloc>(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: _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<TopicWordBloc,TopicWordState>(
      buildWhen: (_, s) => s is SelectItemChangeState,
      builder: (context,state){
        final bloc = BlocProvider.of<TopicWordBloc>(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),
                )
              ],
            ),
          ),
        );
      });
}