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_event.dart';
import 'package:syncrow_web/pages/home/bloc/home_state.dart';
import 'package:syncrow_web/pages/home/view/agreement_and_privacy_dialog.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 StatefulWidget {
  const HomeWebPage({super.key});

  @override
  State<HomeWebPage> createState() => _HomeWebPageState();
}

class _HomeWebPageState extends State<HomeWebPage> {
  // Flag to track whether the dialog is already shown.
  bool _dialogShown = false;



  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    final homeBloc = BlocProvider.of<HomeBloc>(context);

    return PopScope(
      canPop: false,
      onPopInvoked: (didPop) => false,
      child: BlocConsumer<HomeBloc, HomeState>(
        listener: (BuildContext context, state) {
          if (state is HomeInitial) {
            if (homeBloc.user!.hasAcceptedWebAgreement == false &&
                !_dialogShown) {
              _dialogShown =
                  true; // Set the flag to true to indicate the dialog is showing.
              Future.delayed(const Duration(seconds: 1), () {
                showDialog(
                  context: context,
                  barrierDismissible: false,
                  builder: (BuildContext context) {
                    return AgreementAndPrivacyDialog(
                      terms: homeBloc.terms,
                      policy: homeBloc.policy,
                    );
                  },
                ).then((v) {
                  _dialogShown = false;
                  if (v != null) {
                    homeBloc.add(ConfirmUserAgreementEvent());
                    // homeBloc.add(const FetchUserInfo());
                  }
                });
              });
            }
          }
        },
        builder: (context, state) {
          return WebScaffold(
            enableMenuSidebar: false,
            appBarTitle: Row(
              children: [
                SvgPicture.asset(
                  Assets.loginLogo,
                  width: 150,
                ),
              ],
            ),
            scaffoldBody: SizedBox(
              height: size.height,
              width: size.width,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  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.8,
                          child: GridView.builder(
                            itemCount: homeBloc.homeItems.length,
                            gridDelegate:
                                const SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 4, // Adjust as needed.
                              crossAxisSpacing: 20.0,
                              mainAxisSpacing: 20.0,
                              childAspectRatio: 1.5,
                            ),
                            itemBuilder: (context, index) {
                              return HomeCard(
                                color: homeBloc.homeItems[index].color,
                                index: index,
                                active: homeBloc.homeItems[index].active!,
                                name: homeBloc.homeItems[index].title!,
                                img: homeBloc.homeItems[index].icon!,
                                onTap: () =>
                                    homeBloc.homeItems[index].onPress(context),
                              );
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}