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

import '../data/disease_sub_topics.dart';
import '../models/category.dart';
import '../models/disease.dart';

class DiseaseDetails extends StatelessWidget {
  final Disease disease;
  DiseaseDetails({Key? key, required this.disease}) : super(key: key);

  final List<Category> categories = Utils.getMockedCategories();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Disease Information')),
      body: Container(
        color: Colors.blue[100],
        padding: EdgeInsets.only(bottom: 30),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Padding(
              padding: EdgeInsets.only(top: 10, bottom: 10),
              // child: Text(
              //   disease.diseaseName,
              //   textAlign: TextAlign.center,
              // ),
            ),
            Expanded(
                child: ListView.builder(
                    itemCount: categories.length,
                    itemBuilder: (BuildContext context, int index) {
                      return GestureDetector(
                        onTap: () {
                          Navigator.of(context).push(
                            MaterialPageRoute(
                                builder: (context) => DiseaseIndividual(
                                      disease: disease,
                                      category: categories[index],
                                    )),
                          );
                        },
                        child: Container(
                          margin: const EdgeInsets.only(
                              left: 15, right: 15, bottom: 15, top: 10),
                          height: 120,
                          child: Stack(
                            children: [
                              Positioned.fill(
                                child: ClipRRect(
                                  borderRadius: BorderRadius.circular(20),
                                  child: Image.asset(
                                    categories[index].imageUrl,
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                              Positioned(
                                bottom: 0,
                                left: 0,
                                right: 0,
                                child: Container(
                                  height: 80,
                                  decoration: BoxDecoration(
                                      borderRadius: const BorderRadius.only(
                                          bottomLeft: Radius.circular(20),
                                          bottomRight: Radius.circular(20)),
                                      gradient: LinearGradient(
                                          colors: [
                                            Colors.black.withOpacity(0.7),
                                            Colors.transparent
                                          ],
                                          begin: Alignment.bottomCenter,
                                          end: Alignment.topCenter)),
                                ),
                              ),
                              Positioned(
                                bottom: 0,
                                child: Padding(
                                  padding: const EdgeInsets.all(10),
                                  child: Row(
                                    children: [
                                      ClipOval(
                                        child: Container(
                                          color: categories[index].color,
                                          padding: const EdgeInsets.all(10),
                                          // child: const Icon(
                                          //   Icons.ice_skating,
                                          //   size: 30,
                                          // ),
                                          child: Image.asset(
                                            categories[index].icon,
                                            height: 50,
                                            width: 50,
                                          ),
                                        ),
                                      ),
                                      const SizedBox(
                                        width: 10,
                                      ),
                                      Text(
                                        "${disease.diseaseName} ${categories[index].topic}",
                                        style: const TextStyle(
                                            fontSize: 20, color: Colors.white),
                                      )
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                      );
                    }))
          ],
        ),
      ),
    );
  }
}
