import 'package:canis_care/models/component.dart';
import 'package:canis_care/screens/disease_intelligence_screen.dart';
import 'package:canis_care/screens/severity-level-detection.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../data/disease_sub_topics.dart';
import '../widgets/side_drawer.dart';
import 'disease_identification.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: SideDrawer(),
      body: Container(
        color: Colors.blue[100],
        alignment: Alignment.center,
        child: Column(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(60),
                bottomRight: Radius.circular(60),
              ),
              child: Stack(
                children: [
                  Container(
                    height: 350,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                              'images/symbols/dogvet2.jpg',
                            ),
                            fit: BoxFit.cover)),
                  ),
                  Positioned.fill(
                      child: Container(
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.bottomCenter,
                            end: Alignment.topCenter,
                            colors: [
                          Colors.black.withOpacity(0.6),
                          Colors.transparent
                        ])),
                  )),
                  Positioned(
                      bottom: 0,
                      left: 0,
                      right: 0,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(bottom: 10),
                            child: Text(
                              "CANIS CARE",
                              style: GoogleFonts.bungeeShade(
                                textStyle: const TextStyle(
                                    fontSize: 30,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.cyan),
                              ),
                            ),
                          )
                        ],
                      ))
                ],
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Expanded(
                child: ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(60),
                topRight: Radius.circular(60),
              ),
              child: Stack(children: [
                Container(
                  decoration: const BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage(
                            'images/symbols/2.jpg',
                          ),
                          fit: BoxFit.cover,
                          opacity: 0.2)),
                  child: GridView.extent(
                    padding: const EdgeInsets.all(16),
                    crossAxisSpacing: 5,
                    mainAxisSpacing: 5,
                    maxCrossAxisExtent: 280.0,
                    children: [
                      GestureDetector(
                        onTap: () {
                          Navigator.of(context).push(
                            MaterialPageRoute(
                                builder: (context) => DiseaseIdentification()),
                          );
                        },
                        child: Container(
                          padding: const EdgeInsets.only(
                              top: 10, left: 10, right: 10, bottom: 10),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(60),
                            child: Container(
                              decoration: BoxDecoration(
                                  color: Colors.blueAccent.withOpacity(0.6)),
                              child: Column(
                                children: [
                                  Image.asset(
                                    "images/symbols/all.png",
                                    fit: BoxFit.cover,
                                    width: 100,
                                    height: 100,
                                  ),
                                  const SizedBox(
                                    height: 10,
                                  ),
                                  Text(
                                    "Identification",
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          Navigator.of(context).push(
                            MaterialPageRoute(
                                builder: (context) => SeverityLevelDetection()),
                          );
                        },
                        child: Container(
                          padding: const EdgeInsets.only(
                              top: 10, left: 10, right: 10, bottom: 10),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(60),
                            child: Container(
                              decoration: BoxDecoration(
                                  color: Colors.blueAccent.withOpacity(0.6)),
                              child: Column(
                                children: [
                                  Image.asset(
                                    "images/symbols/all.png",
                                    fit: BoxFit.cover,
                                    width: 100,
                                    height: 100,
                                  ),
                                  const SizedBox(
                                    height: 10,
                                  ),
                                  Text(
                                    "Severity Level",
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          Navigator.of(context).push(
                            MaterialPageRoute(
                                builder: (context) => DiseaseIntelligence()),
                          );
                        },
                        child: Container(
                          padding: const EdgeInsets.only(
                              top: 10, left: 10, right: 10, bottom: 10),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(40),
                            child: Container(
                              decoration: BoxDecoration(
                                  color: Colors.blueAccent.withOpacity(0.6)),
                              child: Column(
                                children: [
                                  Image.asset(
                                    "images/symbols/all.png",
                                    fit: BoxFit.cover,
                                    width: 100,
                                    height: 100,
                                  ),
                                  const SizedBox(
                                    height: 10,
                                  ),
                                  Text(
                                    "Intelligence",
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                      GestureDetector(
                        child: Container(
                          padding: const EdgeInsets.only(
                              top: 10, left: 10, right: 10, bottom: 10),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(40),
                            child: Container(
                              decoration: BoxDecoration(
                                  color: Colors.blueAccent.withOpacity(0.6)),
                              child: Column(
                                children: [
                                  Image.asset(
                                    "images/symbols/all.png",
                                    fit: BoxFit.cover,
                                    width: 100,
                                    height: 100,
                                  ),
                                  const SizedBox(
                                    height: 10,
                                  ),
                                  Text(
                                    "Chat Support",
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                    // children: List.generate(
                    //     componentCategories.length,
                    //     (index) => GestureDetector(
                    //           onTap: () {
                    //             Navigator.of(context).push(
                    //               MaterialPageRoute(
                    //                   builder: (context) => MyHomePage(
                    //                         title: 'Diseases',
                    //                       )),
                    //             );
                    //           },
                    //           child: Container(
                    //             padding: const EdgeInsets.only(
                    //                 top: 10, left: 10, right: 10, bottom: 10),
                    //             child: ClipRRect(
                    //               borderRadius: BorderRadius.circular(60),
                    //               child: Container(
                    //                 decoration: BoxDecoration(
                    //                     color:
                    //                         Colors.blueAccent.withOpacity(0.6)),
                    //                 child: Column(
                    //                   children: [
                    //                     Image.asset(
                    //                       subCategories[index].imgUrl,
                    //                       fit: BoxFit.cover,
                    //                       width: 100,
                    //                       height: 100,
                    //                     ),
                    //                     const SizedBox(
                    //                       height: 10,
                    //                     ),
                    //                     Text(
                    //                       subCategories[index].categoryName,
                    //                       style: TextStyle(
                    //                         color: Colors.white,
                    //                         fontSize: 20,
                    //                         fontWeight: FontWeight.bold,
                    //                       ),
                    //                     )
                    //                   ],
                    //                 ),
                    //               ),
                    //             ),
                    //           ),
                    //         )),
                  ),
                ),
              ]),
            ))
          ],
        ),
      ),
    );
  }
}
