import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import 'package:flutter_screenutil/flutter_screenutil.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);
        return Container(
            alignment: Alignment.center,
            margin: EdgeInsets.symmetric(horizontal: 40.0.w),
            child: GridView.builder(
                padding: EdgeInsets.zero,
                // 让 GridView 只占用所需的空间
                shrinkWrap: true,
                // physics: const NeverScrollableScrollPhysics(),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 4,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                  childAspectRatio: 0.75,
                ),
                itemCount: bloc.listData.length,
                itemBuilder: (BuildContext context, int index) {
                  final gameEntity = bloc.listData[index];
                  return GestureDetector(
                    onTap: () {
                      bloc.add(GotoGamePageEvent(gameEntity.id));
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        //图片增加圆角
                        ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: Image.asset(gameEntity.imageName,
                                width: 150, height: 150)),
                        10.verticalSpace,
                        Text(gameEntity.name,
                            style: TextStyle(
                                fontSize: 16.sp,
                                color: const Color(0xFF140C10)))
                      ],
                    ),
                  );
                }));
      });
}