import 'package:flutter/material.dart';
import 'package:unit2/screens/unit2/homepage.dart/module-screen.dart';
import 'package:unit2/theme-data.dart/colors.dart';
import 'package:unit2/utils/global.dart';

class DashBoard extends StatelessWidget {
  final List<Module> roles;
  const DashBoard({super.key, required this.roles});
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
      height: MediaQuery.of(context).size.height,
      //listview builder
      child: ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: roles.length,
          itemBuilder: (BuildContext context, int index) {
            //  gridview.count
            return SizedBox(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    roles[index].name.toUpperCase(),
                    style: Theme.of(context)
                        .textTheme
                        .labelLarge!
                        .copyWith(fontSize: 12),
                  ),
 
                  const SizedBox(
                    height: 8,
                  ),
                  GridView.count(
                      shrinkWrap: true,
                      crossAxisCount: 4,
                      crossAxisSpacing: 8,
                      mainAxisSpacing: 10,
                      physics: const BouncingScrollPhysics(),
                      padding: const EdgeInsets.symmetric(
                          vertical: 5, horizontal: 5),
                      children: roles[index].roles.map((role) {
                        return Container(
                          padding: const EdgeInsetsDirectional.fromSTEB(8,5,8,13),
                          alignment: Alignment.center,
        
                          decoration:const BoxDecoration(
                            color: Colors.white,
                            boxShadow:[ BoxShadow(color: Colors.black12,spreadRadius: 2,blurRadius: 3)],
                            borderRadius: BorderRadius.all(Radius.circular(8))
                          ),
                          child: GestureDetector(
                            onTap: () {
                            },
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                              Expanded(
                                child: Icon(
                                  
                                  role.icon,
                                  size: 20,
                                  weight: 100,
                                  grade: 100,
                                  color:second,
                                ),
                              ),
                              const SizedBox(
                                height: 5,
                              ),
                              Text(
                                role.role.name!.toLowerCase() == "establishment point-person"?"Est. point-person":
                                role.role.name!,
                                textAlign: TextAlign.center,
                                style: Theme.of(context)
                                    .textTheme
                                    .labelLarge!
                                    .copyWith(
                                        fontSize: blockSizeVertical*1.1,
                                        fontWeight: FontWeight.bold),
                              ),
                            ]),
                          ),
                        );
                      }).toList()),
                      const SizedBox(height: 8,)
                ],
              ),
            );
          }),
    );
  }
}