import 'package:canis_care/screens/disease_screen.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../data/disease_sub_topics.dart';
import '../models/component.dart';
import '../widgets/side_drawer.dart';

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

  @override
  State<DiseaseIntelligence> createState() => _DiseaseIntelligenceState();
}

class _DiseaseIntelligenceState extends State<DiseaseIntelligence> {
  final List<ComponentCategory> componentCategories =
      Utils.getComponentCategories();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: SideDrawer(),
      appBar: AppBar(
        title: Text(
          "Home Page",
          textAlign: TextAlign.center,
        ),
      ),
      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: 250,
                    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.count(
                    crossAxisCount: 2,
                    children: List.generate(
                        componentCategories.length,
                        (index) => GestureDetector(
                              onTap: () {
                                Navigator.of(context).push(
                                  MaterialPageRoute(
                                      builder: (context) => DiseaseList(
                                            title: 'All 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(
                                          componentCategories[index].imgUrl,
                                          fit: BoxFit.cover,
                                          width: 100,
                                          height: 100,
                                        ),
                                        const SizedBox(
                                          height: 10,
                                        ),
                                        Text(
                                          componentCategories[index]
                                              .categoryName,
                                          style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 20,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                            )),
                  ),
                ),
              ]),
            ))
          ],
        ),
      ),
    );
  }
}
