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/practice/widgets/practice_header_widget.dart';

import 'bloc/voice_pic_bloc.dart';

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

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

class _VoicePicPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<VoicePicBloc, VoicePicState>(
      listener: (context, state){},
      child: _voicePicView(),
    );
  }
  
  Widget _voicePicView() => BlocBuilder<VoicePicBloc, VoicePicState>(
      builder: (context, state){
        return _voicePictureView();
      });

  Widget _voicePictureView() => BlocBuilder<VoicePicBloc, VoicePicState>(
      buildWhen: (_,s) => s is CurrentPageIndexState,
      builder: (context,state){
        final bloc = BlocProvider.of<VoicePicBloc>(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);},
                  ),
                  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,
                  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<VoicePicBloc, VoicePicState>(
      builder: (context, state){
        final bloc = BlocProvider.of<VoicePicBloc>(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<VoicePicBloc, VoicePicState>(
      buildWhen: (_, s) => s is SelectItemChangeState,
      builder: (context,state){
        final bloc = BlocProvider.of<VoicePicBloc>(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')
                  )
              ),
            ),
          ),
        );
      });
}