import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_progress_hud/flutter_progress_hud.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';
import 'package:fluttericon/font_awesome5_icons.dart';
import 'package:unit2/bloc/offline/offline_bloc/offline_bloc.dart';
import 'package:unit2/model/offline/offlane_modules.dart';
import 'package:unit2/screens/offline/passo/passo_offline_dashboard.dart';
import 'package:unit2/screens/unit2/homepage.dart/components/dashboard/shared_card_label.dart';
import 'package:unit2/theme-data.dart/colors.dart';

import '../passo/passo_main_dashboard.dart';

class OfflineModuleScreen extends StatelessWidget {
  const OfflineModuleScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: primary,
          title: const Text("Offline Mode"),
          centerTitle: true,
          leading: IconButton(
            onPressed: () {
              ZoomDrawer.of(context)!.toggle();
            },
            icon: const Icon(
              Icons.menu,
              color: Colors.white,
            ),
          ),
        ),
        body: ProgressHUD(
          backgroundColor: Colors.black87,
          indicatorWidget: const SpinKitFadingCircle(color: Colors.white),
          child: BlocConsumer<OfflineBloc, OfflineState>(
            listener: (context, state) {
              if (state is OfflineLoadingState) {}
            },
            builder: (context, state) {
              if (state is OfflineModeState) {
                return Padding(
                  padding: const EdgeInsets.all(24),
                  child: GridView.count(
                      shrinkWrap: true,
                      crossAxisCount: 4,
                      crossAxisSpacing: 8,
                      mainAxisSpacing: 10,
                      physics: const BouncingScrollPhysics(),
                      padding: const EdgeInsets.symmetric(
                          vertical: 5, horizontal: 5),
                      children: state.offlineModules
                          .map((e) => CardLabel(
                              icon: FontAwesome5.eye,
                              title: "Rpass Offline",
                              ontap: () {
                                Navigator.push(context,
                                    MaterialPageRoute(builder: ((context) {
                                  return PassoOfflineMainScreen(
                                      state.offlineProfile);
                                })));
                              }))
                          .toList()),
                );
              }
              return Container();
            },
          ),
        ));
  }
}