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: 8,
                          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            crossAxisSpacing: 20.0,
                            mainAxisSpacing: 20.0,
                            childAspectRatio: 1.5,
                          ),
                          itemBuilder: (context, index) {
                            return HomeCard(
                              index: index,
                              active: homeItems[index]['active'],
                              name: homeItems[index]['title'],
                              img: homeItems[index]['icon'],
                              onTap: () => homeBloc.homeItems[index].onPress(context),
                            );
                          },
                        ),
                      ),
                    ),
                  ],
                ),
              );
            }),
      ),
    );
  }

  final dynamic homeItems = [
    {
      'title': 'Access',
      'icon': Assets.accessIcon,
      'active': true,
    },
    {
      'title': 'Space\nManagement',
      'icon': Assets.spaseManagementIcon,
      'color': ColorsManager.primaryColor,
      'active': true,
    },
    {
      'title': 'Devices',
      'icon': Assets.devicesIcon,
      'active': true,
    },
    {
      'title': 'Move in',
      'icon': Assets.moveinIcon,
      'active': false,
    },
    {
      'title': 'Construction',
      'icon': Assets.constructionIcon,
      'active': false,
    },
    {
      'title': 'Energy',
      'icon': Assets.energyIcon,
      'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
      'active': false,
    },
    {
      'title': 'Integrations',
      'icon': Assets.integrationsIcon,
      'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
      'active': false,
    },
    {
      'title': 'Asset',
      'icon': Assets.assetIcon,
      'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
      'active': false,
    },
  ];
}