// ignore: must_be_immutable
class RecipesDashboard extends StatefulWidget {
  @override
  _RecipesDashboardState createState() => _RecipesDashboardState();
}

class _RecipesDashboardState extends State<RecipesDashboard> {
  //Sets the gridview items by Image and Title
  List griditems = [
    GridItem(imageUrl: "assets/images/Pizza.jpg", title: "Pizza"),
    GridItem(imageUrl: "assets/images/burger.jpg", title: "Burgers"),
    GridItem(imageUrl: "assets/images/breakfast.jpeg", title: "Breakfast"),
    GridItem(imageUrl: "assets/images/Chinese.jpg", title: "Chinese"),
    GridItem(imageUrl: "assets/images/Indian.jpg", title: "Indian"),
    GridItem(imageUrl: "assets/images/Dessert.jpeg", title: "Desert"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //App Bar from RecipesAppBar
      appBar: MyCustomAppBar(height: 150),

      //Side menu
      drawer: SideMenu(),

      //Container containing a GridView.buider to build a grid the length of Griditem List.
      body: Container(
        padding: EdgeInsets.all(15),
        child: Container(
          //Creates the gridview to show the categories.
          child: GridView.builder(
            //sets the length of the builder as the length of the list.
            itemCount: griditems.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
            ),
            itemBuilder: (context, index) {
              //Returns each of the cards to hold the categories from the griditems list.
              return Container(
                child: Card(
                  //Creates an onTap gesture
                  child: GestureDetector(
                    child: Column(
                      children: <Widget>[
                        //image
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8),
                          child: Image.asset(
                            griditems[index].imageUrl,
                            fit: BoxFit.cover,
                            width: 150,
                            height: 128,
                          ),
                        ),
                        //Title
                        Container(
                          padding: EdgeInsets.all(5),
                          child: Text(
                            griditems[index].title,
                            style:
                                TextStyle(fontFamily: "Roboto", fontSize: 16),
                          ),
                        )
                      ],
                    ),
                    onTap: () {
                      //Material push gets the index of the gridtile and takes the title to the next page
                      print("Tile " + griditems[index].title);
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => FoodList(),
                          settings: RouteSettings(
                            arguments: griditems[index].title,
                          ),
                        ),
                      );
                    },
                  ),
                ),
              );
            },
          ),
        ),
      ),

      //Add to category
      floatingActionButton: FloatingActionButton(
        onPressed: null,
        backgroundColor: AppColors.primaryGreen,
      ),
    );
  }
}