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 {
  const HomeWebPage({super.key});
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return PopScope(
        canPop: false,
        onPopInvoked: (didPop) => false,
        child: BlocConsumer<HomeBloc, HomeState>(
          listener: (BuildContext context, state) {},
          builder: (context, state) {
            final homeBloc = BlocProvider.of<HomeBloc>(context);
            return WebScaffold(
              enableMenuSideba: false,
              appBarTitle: Row(
                children: [
                  SvgPicture.asset(
                    Assets.loginLogo,
                    width: 150,
                  ),
                ],
              ),
              scaffoldBody: 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),
                            );
                          },
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ));
  }
}
