import 'dart:convert';

import 'package:canis_care/models/disease_individual.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:http/http.dart';
import 'package:http/http.dart' as http;

import '../models/category.dart';
import '../models/disease.dart';
import '../widgets/bottom_nav_bar.dart';
import 'disease_individual_info_screen.dart';

class DiseaseIndividual extends StatefulWidget {
  final Disease disease;
  final Category category;

  const DiseaseIndividual({
    Key? key,
    required this.disease,
    required this.category,
  }) : super(key: key);

  @override
  State<DiseaseIndividual> createState() => _DiseaseIndividualState();
}

class _DiseaseIndividualState extends State<DiseaseIndividual> {
  Client client = http.Client();
  List<String> subTopics = [];
  List<DiseaseIndividualTopic> subTopicList = [];

  @override
  void initState() {
    _retrieveSubTopics();
    super.initState();
  }

  _retrieveSubTopics() async {
    subTopics = [];
    String retrieveUri = "http://192.168.1.102:8000/disease/" +
        widget.disease.diseaseName +
        "/" +
        widget.category.topic +
        "/";
    List responses =
        json.decode((await client.get(Uri.parse(retrieveUri))).body);

    for (var element in responses) {
      String res = element.substring(element.indexOf('#'));
      String res2 = res.replaceAll("#", "");
      subTopics.add(res2);
    }
    // var newDiseases = List<String>.from(diseases);
    subTopicList = List.generate(subTopics.length,
        (index) => DiseaseIndividualTopic(individualTopic: subTopics[index]));
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title:
              Text(widget.disease.diseaseName + "  " + widget.category.topic)),
      body: Stack(children: [
        Container(
          color: Colors.blue[100],
          child: Container(
            margin: const EdgeInsets.only(top: 15.0),
            child: ListView.builder(
              itemCount: subTopicList.length,
              itemBuilder: (BuildContext context, int index) {
                return AnimationConfiguration.staggeredGrid(
                  position: index,
                  columnCount: subTopicList.length,
                  child: SlideAnimation(
                    child: FadeInAnimation(
                      child: GestureDetector(
                        onTap: () {
                          Navigator.of(context).push(
                            MaterialPageRoute(
                                builder: (context) =>
                                    DiseaseIndividualTopicInfo(
                                      disease: widget.disease,
                                      category: widget.category,
                                      diseaseIndividualTopic:
                                          subTopicList[index],
                                    )),
                          );
                        },
                        child: Container(
                          margin: const EdgeInsets.only(top: 10.0),
                          padding: const EdgeInsets.only(left: 5.0, right: 5.0),
                          child: Container(
                            padding: const EdgeInsets.symmetric(horizontal: 20),
                            width: MediaQuery.of(context).size.width,
                            margin: const EdgeInsets.only(bottom: 12),
                            child: Container(
                              padding: const EdgeInsets.all(16),
                              //  width: SizeConfig.screenWidth * 0.78,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(16),
                                color: Colors.cyan,
                              ),
                              child: Row(children: [
                                Expanded(
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        subTopicList[index].individualTopic,
                                        style: GoogleFonts.lato(
                                          textStyle: const TextStyle(
                                              fontSize: 18,
                                              fontWeight: FontWeight.bold,
                                              color: Colors.white),
                                        ),
                                      ),
                                      Row(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                        children: [
                                          const SizedBox(width: 8),
                                        ],
                                      ),
                                      const SizedBox(height: 12),
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: const EdgeInsets.symmetric(
                                      horizontal: 10),
                                  height: 60,
                                  width: 1,
                                  color: Colors.grey[200]!.withOpacity(0.7),
                                ),
                                /* RotatedBox(
                quarterTurns: 3,
                child: Text(
                  reminder!.isCompleted == 1 ? "NOTED" : "WAITING",
                  style: GoogleFonts.lato(
                    textStyle: const TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                          color: Colors.white),
                  ),
                ),
              ),*/
                              ]),
                            ),
                          ),
                          // child: Container(
                          //   width: MediaQuery.of(context).size.width,
                          //   padding: const EdgeInsets.all(15.0),
                          //   child: ListTile(
                          //     title: Text(
                          //       diseaseList[index].diseaseName,
                          //       style: const TextStyle(
                          //           fontSize: 20, fontWeight: FontWeight.w600),
                          //     ),
                          //     onTap: () {
                          //       Navigator.of(context).push(
                          //         MaterialPageRoute(
                          //             builder: (context) => DiseaseDetails(
                          //                   disease: diseaseList[index],
                          //                 )),
                          //       );
                          //     },
                          //     trailing: IconButton(
                          //         icon: const Icon(Icons.view_headline_sharp),
                          //         // onPressed: () => {_deleteNote((notes[index].id).toString())},
                          //         onPressed: () => {
                          //               Navigator.of(context).push(
                          //                 MaterialPageRoute(
                          //                     builder: (context) => OnBoarding()),
                          //               )
                          //             }),
                          //   ),
                          // ),
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ),
        Positioned(bottom: 0, left: 0, right: 0, child: BotBar())
      ]),
    );
  }
}
