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 '../../widgets/practice_header_widget.dart';
import 'bloc/topic_picture_bloc.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){
                          return _pageViewItemWidget();
                        }),
                  )
                ],
              ),
              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')
                  )
              ),
            ),
          ),
        );
      });
}