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/constants/assets.dart';
import 'package:syncrow_web/web_layout/web_scaffold.dart';

class HomeWebPage extends StatelessWidget {
  HomeWebPage({super.key});
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return PopScope(
        canPop: false,
        onPopInvoked: (didPop) => false,
        child:
      WebScaffold(
        enableMenuSideba: false,
        appBarTitle: Row(
          children: [
            SvgPicture.asset(
              Assets.loginLogo,
              width: 150,
            ),
          ],
        ),
        scaffoldBody: BlocProvider(
          create: (context) => HomeBloc(),
          child: BlocConsumer<HomeBloc, HomeState>(
            listener: (BuildContext 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.1),
                    Text(
                      'ACCESS YOUR APPS',
                      style: Theme.of(context)
                          .textTheme
                          .headlineLarge!
                          .copyWith(color: Colors.black, fontSize: 40),
                    ),
                    const SizedBox(height: 30),
                    Expanded(
                      flex: 4,
                      child: SizedBox(
                        height: size.height * 0.6,
                        width: size.width * 0.68,
                        child: GridView.builder(
                          itemCount: 8,
                          gridDelegate:
                              const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 4,
                            crossAxisSpacing: 20.0,
                            mainAxisSpacing: 20.0,
                            childAspectRatio: 1.5,
                          ),
                          itemBuilder: (context, index) {
                            return HomeCard(
                              index: index,
                              active: homeBloc.homeItems[index].active!,
                              name: homeBloc.homeItems[index].title!,
                              img: homeBloc.homeItems[index].icon!,
                              onTap: () =>
                                  homeBloc.homeItems[index].onPress(context),
                            );
                          },
                        ),
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        )));
  }
}