import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
import 'package:syncrow_web/pages/home/bloc/home_state.dart';
import 'package:syncrow_web/pages/home/view/home_card.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/web_layout/web_scaffold.dart';

class HomeMobilePage extends StatelessWidget {
  HomeMobilePage({super.key});

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return PopScope(
      canPop: false,
      onPopInvoked: (didPop) => false,
      child: WebScaffold(
        enableMenuSidebar: false,
        appBarTitle: Row(
          children: [
            SvgPicture.asset(
              Assets.loginLogo,
              width: 150,
            ),
          ],
        ),
        scaffoldBody: BlocConsumer<HomeBloc, HomeState>(
            listener: (context, state) {},
            builder: (context, state) {
              final homeBloc = BlocProvider.of<HomeBloc>(context);
              return SizedBox(
                height: size.height,
                width: size.width,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    SizedBox(height: size.height * 0.05),
                    const Text(
                      'ACCESS YOUR APPS',
                      style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
                    ),
                    const SizedBox(height: 30),
                    Expanded(
                      flex: 4,
                      child: SizedBox(
                        height: size.height * 0.6,
                        width: size.width * 0.68,
                        child: GridView.builder(
                          itemCount: homeBloc.homeItems.length,
                          gridDelegate:
                              const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            crossAxisSpacing: 20.0,
                            mainAxisSpacing: 20.0,
                            childAspectRatio: 1.5,
                          ),
                          itemBuilder: (context, index) {
                            return HomeCard(
                              index: index,
                              active: true,
                              color: homeBloc.homeItems[index].color,
                              name:  homeBloc.homeItems[index].title!,
                              img:  homeBloc.homeItems[index].icon!,
                              onTap: () =>
                                  homeBloc.homeItems[index].onPress(context),
                            );
                          },
                        ),
                      ),
                    ),
                  ],
                ),
              );
            }),
      ),
    );
  }
}