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/common/widgets/we_app_bar.dart';
import 'package:wow_english/pages/games/state.dart';

import '../games/event.dart';
import 'bloc.dart';


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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (BuildContext context) => GamesBloc()..add(InitEvent()),
      child: Builder(builder: (context) => _GamesPageView()),
    );
  }
}

class _GamesPageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<GamesBloc, GamesState>(
      listener: (context, state) {

      },
      child: Scaffold(
        appBar: const WEAppBar(
          titleText: '游戏列表',
          centerTitle: false,
        ),
        body: _gamesView(),
      ),
    );
  }

  Widget _gamesView() => BlocBuilder<GamesBloc, GamesState>(
      builder: (context, state) {
        final bloc = BlocProvider.of<GamesBloc>(context);
        //屏幕中间横着放四张图片一行展示(尺寸120*200)，每张图片下方有行文字
        return GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              childAspectRatio: 0.6,
            ),
            itemCount: 4,
            itemBuilder: (BuildContext context, int index) {
              // final entity = bloc.listData[index];
              return GestureDetector(
                onTap: () {
                  bloc.add(GotoGamePageEvent(1));
                },
                child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(
                      width: 1.0,
                      color: const Color(0xFF140C10),
                    ),
                    borderRadius: BorderRadius.circular(21),
                  ),
                  child: Column(
                    children: [
                      Image.asset('pic_module_study'.assetPng, width: 120, height: 200),
                      Text('游戏名称', style: TextStyle(fontSize: 14.sp, color: const Color(0xFF140C10)))
                    ],
                  ),
                ),
              );
      });
    });
}