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/reading_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => ReadingPageBloc(),
      child: _ReadingPage(),
    );
  }
}

class _ReadingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<ReadingPageBloc, ReadingPageState>(
      listener: (context, state) {},
      child: _voiceAnswerView(),
    );
  }

  Widget _voiceAnswerView() =>
      BlocBuilder<ReadingPageBloc, ReadingPageState>(builder: (context, state) {
        final bloc = BlocProvider.of<ReadingPageBloc>(context);
        return Container(
          color: Colors.white,
          child: Stack(
            children: [
              Positioned(
                  left: 0,
                  right: 0,
                  bottom: 0,
                  child: Image.asset(
                    'bottom_grass'.assetPng,
                    fit: BoxFit.fitWidth,
                  )),
              Column(
                children: [
                  PracticeHeaderWidget(
                    title: '1/8',
                    onTap: () {
                      Navigator.pop(context);
                    },
                  ),
                  Expanded(
                      child: PageView.builder(
                          itemCount: 10,
                          itemBuilder: (context, int index) {
                            return _voiceAnswerItem();
                          }))
                ],
              )
            ],
          ),
        );
      });

  Widget _voiceAnswerItem() =>
      BlocBuilder<VoiceAnswerBloc, VoiceAnswerState>(builder: (context, state) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.network(
              'https://img.liblibai.com/web/648331d5a2cb5.png?image_process=format,webp&x-oss-process=image/resize,w_2980,m_lfit/format,webp',
              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,
                )
              ],
            )
          ],
        );
      });
}