import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'package:http/http.dart' as http;

import '../models/category.dart';
import '../models/disease.dart';
import '../models/disease_individual.dart';
import '../models/disease_individual_info.dart';
import '../widgets/bottom_nav_bar.dart';

class DiseaseIndividualTopicInfo extends StatefulWidget {
  final Disease disease;
  final Category category;
  final DiseaseIndividualTopic diseaseIndividualTopic;
  const DiseaseIndividualTopicInfo(
      {Key? key,
      required this.disease,
      required this.category,
      required this.diseaseIndividualTopic})
      : super(key: key);

  @override
  State<DiseaseIndividualTopicInfo> createState() =>
      _DiseaseIndividualTopicInfoState();
}

class _DiseaseIndividualTopicInfoState
    extends State<DiseaseIndividualTopicInfo> {
  Client client = http.Client();
  List<String> subTopicsInfo = [];
  List<DiseaseIndividualSubTopicInfo> subTopicInfoList = [];
  int pageIndex = 0;
  PageController? _pageController;

  @override
  void dispose() {
    super.dispose();
    _pageController?.dispose();
  }

  @override
  void initState() {
    _retrieveSubTopicsDetails();
    super.initState();
    _pageController = PageController();
  }

  _retrieveSubTopicsDetails() async {
    subTopicsInfo = [];
    String retrieveUri = "http://192.168.1.102:8000/disease/" +
        widget.disease.diseaseName +
        "/" +
        widget.category.topic +
        "/" +
        widget.diseaseIndividualTopic.individualTopic +
        "/";
    List responses = json.decode(
        utf8.decode((await client.get(Uri.parse(retrieveUri))).bodyBytes));

    for (var element in responses) {
      // String res = element.substring(element.indexOf('#'));
      // String res2 = res.replaceAll("#", "");
      var encoded = utf8.encode(element);
      var decoded = utf8.decode(encoded);
      var formatted = decoded.substring(1);
      subTopicsInfo.add(formatted);
    }
    // var newDiseases = List<String>.from(diseases);
    subTopicInfoList = List.generate(
        subTopicsInfo.length,
        (index) => DiseaseIndividualSubTopicInfo(
            imgUrl: widget.category.icon,
            individualTopicInfo: subTopicsInfo[index]));
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.diseaseIndividualTopic.individualTopic),
      ),
      body: Container(
        child: Stack(children: [
          Column(
            children: [
              Expanded(
                child: PageView(
                  controller: _pageController,
                  onPageChanged: (int page) {
                    setState(() {
                      pageIndex = page;
                    });
                  },
                  children: List.generate(
                      subTopicInfoList.length,
                      (index) => Container(
                            padding: const EdgeInsets.only(
                                left: 40, right: 40, top: 40, bottom: 20),
                            margin: const EdgeInsets.only(
                                left: 40, right: 40, top: 40, bottom: 10),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(50),
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.cyan.withOpacity(0.5),
                                      blurRadius: 20,
                                      offset: Offset.zero),
                                ]),
                            child: Column(
                              children: [
                                Expanded(
                                    child: Column(
                                  children: [
                                    Image.asset(
                                      subTopicInfoList[index].imgUrl,
                                      fit: BoxFit.cover,
                                      height: 160,
                                      width: 160,
                                    ),
                                    const SizedBox(
                                      height: 40,
                                    ),
                                    Expanded(
                                      flex: 1,
                                      child: RawScrollbar(
                                        thumbColor: Colors.redAccent,
                                        radius: Radius.circular(20),
                                        thickness: 10,
                                        child: SingleChildScrollView(
                                          scrollDirection: Axis.vertical,
                                          child: ClipRRect(
                                            borderRadius:
                                                BorderRadius.circular(12.0),
                                            child: Container(
                                              decoration: BoxDecoration(
                                                borderRadius:
                                                    BorderRadius.circular(16),
                                                color: Colors.blue,
                                              ),
                                              margin: EdgeInsets.only(
                                                  top: 5.0, bottom: 15),
                                              child: Card(
                                                child: Container(
                                                  margin: EdgeInsets.only(
                                                      bottom: 30),
                                                  padding: EdgeInsets.all(5.0),
                                                  child: Text(
                                                    subTopicInfoList[index]
                                                        .individualTopicInfo,
                                                    textAlign: TextAlign.start,
                                                    style: const TextStyle(
                                                        color: Colors.cyan,
                                                        fontSize: 20),
                                                  ),
                                                ),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                )),
                                Visibility(
                                  visible: index == subTopicInfoList.length - 1,
                                  child: Padding(
                                    padding: const EdgeInsets.only(top: 10),
                                    child: FlatButton(
                                      onPressed: () {
                                        // Navigator.of(context).push(
                                        //   MaterialPageRoute(
                                        //       builder: (context) =>
                                        //           DiseaseDetails(
                                        //             disease: diseaseList[index],
                                        //           )),
                                        // );
                                      },
                                      color: Colors.cyan,
                                      shape: RoundedRectangleBorder(
                                          borderRadius:
                                              BorderRadius.circular(50)),
                                      padding: const EdgeInsets.all(15),
                                      child: const Text(
                                        "See Also",
                                        style: TextStyle(
                                            color: Colors.black,
                                            fontSize: 15,
                                            fontWeight: FontWeight.bold),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          )),
                ),
              ),
              RawScrollbar(
                thumbColor: Colors.redAccent,
                radius: Radius.circular(20),
                thickness: 10,
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: List.generate(
                        subTopicInfoList.length,
                        (index) => GestureDetector(
                              onTap: () {
                                _pageController?.animateTo(
                                    MediaQuery.of(context).size.width * index,
                                    duration: const Duration(milliseconds: 500),
                                    curve: Curves.easeInOut);
                              },
                              child: Container(
                                width: 20,
                                height: 20,
                                margin: EdgeInsets.all(10),
                                decoration: BoxDecoration(
                                    color: Colors.cyan,
                                    borderRadius: BorderRadius.circular(50),
                                    border: Border.all(
                                        width: 6,
                                        color: pageIndex == index
                                            ? Colors.cyanAccent
                                            : Theme.of(context).canvasColor)),
                              ),
                            )),
                  ),
                ),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {},
                child: Text("HI"),
              ),
            ],
          ),
          Positioned(bottom: 0, left: 0, right: 0, child: BotBar())
        ]),
      ),
    );
  }
}
