import 'package:fl_chart/fl_chart.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:dots_indicator/dots_indicator.dart';

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

  @override
  State<minum> createState() => _minumState();
}

class _minumState extends State<minum> {
  late double waterLevel = 0.0;
  String currentDate = "";
  late double _pHValue = 0.0;
  late double _turbiditasValue = 0.0;
  int currentIndex = 0;

  CarouselController _carouselController = CarouselController();

  @override
  void initState() {
    super.initState();
    _updateDate();
    
    DatabaseReference databaseReference =
        FirebaseDatabase.instance.reference().child('minum').child('distance');
    DatabaseReference pHReference =
        FirebaseDatabase.instance.reference().child('minum').child('ph_value');
    DatabaseReference turbidityReference =
        FirebaseDatabase.instance.reference().child('minum').child('turbidity_value');
       

    databaseReference.onValue.listen((event) {
      if (event.snapshot.value != null) {
        setState(() {
          waterLevel = double.parse(event.snapshot.value.toString()); 
        });
      }
    });

    pHReference.onValue.listen((event) {
      if (event.snapshot.value != null) {
        setState(() {
          _pHValue = double.parse(event.snapshot.value.toString()); 
        });
      }
    });


    turbidityReference.onValue.listen((event) {
      if (event.snapshot.value != null) {
        setState(() {
          _turbiditasValue = double.parse(event.snapshot.value.toString()); 
        });
      }
    });
    
  }

   void _updateDate() {
    final now = DateTime.now();
    final formattedDate = DateFormat('EEEE, d MMMM yyyy','id_ID').format(now);
    setState(() {
      currentDate = formattedDate;
    });
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> slides = [
      Container (
      margin: EdgeInsets.only(top: 3.0),  
      child : Center(
        child: Stack(
          children: [
            Container(
              child: Center(
                child: Text(
                  'Kadar pH',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
                ),
              ),
              width: 300,
              height: 300,
            ),
            Container(
              height: 300,
              width: 300,
              child: PieChart(
                PieChartData(
                  sections: [
                    PieChartSectionData(
                      color: (waterLevel >= 32)
                          ? Color.fromARGB(255, 240, 52, 38).withOpacity(0.8)
                          : Color.fromARGB(255, 25, 112, 199).withOpacity(0.8),
                      value: 1,
                      titleStyle: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                      title:
                          '${(((35 - waterLevel) / 35.0) * 100).toStringAsFixed(0)}%',
                    ),
                    PieChartSectionData(
                      color: _pHValue <= 1
                          ? Color.fromARGB(255, 237, 55, 34)
                          : _pHValue <= 2
                              ? Color.fromARGB(255, 237, 52, 121)
                              : _pHValue <= 3
                                  ? Color.fromARGB(255, 246, 146, 39)
                                  : _pHValue <= 4
                                      ? Color.fromARGB(255, 251, 169, 34)
                                      : _pHValue <= 5
                                          ? Color.fromARGB(255, 244, 235, 8)
                                          : _pHValue <= 6
                                              ? Color.fromARGB(255, 163, 206, 57)
                                              : _pHValue <= 7
                                                  ? Color.fromARGB(255, 77, 183, 72)
                                                  : _pHValue <= 8
                                                      ? Color.fromARGB(255, 1, 146, 71)
                                                      : _pHValue <= 9
                                                          ? Color.fromARGB(255, 4, 148, 149)
                                                          : _pHValue <= 10
                                                              ? Color.fromARGB(255, 80, 117, 187)
                                                              : _pHValue <= 11
                                                                  ? Color.fromARGB(255, 69, 74, 158)
                                                                  : _pHValue <= 12
                                                                      ? Color.fromARGB(255, 42, 47, 131)
                                                                      : _pHValue <= 13
                                                                          ? Color.fromARGB(255, 148, 35, 139)
                                                                          : Color.fromARGB(255, 123, 38, 121),
                      value: _pHValue,
                      titleStyle: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: _pHValue >= 10 ? Colors.white : Colors.black,
                      ),
                      title: '${_pHValue.toStringAsFixed(2)}',
                    ),
                  ],
                ),
              ),
              
            ),           
          ],
        ),
      ),
      ),

      // Add more slides here
      Container (
      margin: EdgeInsets.only(top: 3.0),      
      child : Center(
        child: Stack(
          children: [
            Container(
              child: Center(
                child: Text(
                  'Kejernihan Air',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
                ),
              ),
              width: 300,
              height: 300,
            ),
            Container(
              height: 300,
              width: 300,
              child: PieChart(
                PieChartData(
                  sections: [
                    PieChartSectionData(
                      color: (waterLevel >= 32)
                          ? Color.fromARGB(255, 240, 52, 38).withOpacity(0.8)
                          : Color.fromARGB(255, 25, 112, 199).withOpacity(0.8),
                      value: 1000,
                      titleStyle: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                      title:
                          '${(((35 - waterLevel) / 35.0) * 100).toStringAsFixed(0)}%',
                    ),
                    PieChartSectionData(
                      color: _turbiditasValue >= 2000
                          ? Color.fromARGB(255, 237, 55, 34)
                            : Color.fromARGB(255, 4, 148, 149),
                      value: _turbiditasValue,
                      titleStyle: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.white 
                      ),
                      title: '${_turbiditasValue.toStringAsFixed(0)}',
                    ),
                  ],
                ),
              ),
            ),           
          ],          
        ),
      ),
      ),
     
      
    ];

    return Scaffold(
      body: ListView(
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 30, right: 30, top: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "Hari ini",
                  style: TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.w700,
                  ),
                ),
                 Text(
                  currentDate,
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w500,
                  ),
                ),
               Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    IconButton(
                      icon: Icon(Icons.arrow_back),
                      onPressed: () {
                        if (currentIndex > 0) {
                          _carouselController.previousPage();
                        }
                      },
                    ),
                    Expanded(
                      child: CarouselSlider(
                        items: slides,
                        carouselController: _carouselController,
                        options: CarouselOptions(
                          viewportFraction: 1,
                          aspectRatio: 3 / 4,
                          // autoPlay: true,
                          onPageChanged: (index, reason) {
                            setState(() {
                              currentIndex = index;
                            });
                          },
                        ),
                      ),
                    ),
                    IconButton(
                      icon: Icon(Icons.arrow_forward),
                      onPressed: () {
                        if (currentIndex < slides.length - 1) {
                          _carouselController.nextPage();
                        }
                      },
                    ),
                  ],
                ),
                Container(
                  margin: EdgeInsets.only(top: 0),
                  child : Center (
                    child : DotsIndicator(
                      dotsCount: slides.length,
                      position: currentIndex.toDouble(),
                      decorator: DotsDecorator(
                         activeColor: Colors.amber
                      ),
                    ),
                    ),
                ),             
               Padding(
                padding: const EdgeInsets.only(top: 10),
                child: Column(                   
                  children: [
                    Container(
                      margin: EdgeInsets.only(top: 10, bottom: 5, left: 8, right: 8),
                      padding: EdgeInsets.all(10),
                      width: MediaQuery.of(context).size.width,
                      child: Column (
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                           Text(
                            "Tinggi Air : " + (35.0 - waterLevel).toString() + " cm",
                            style: TextStyle(
                              height: 1.5,
                              fontWeight: FontWeight.bold,
                              ),
                            ),
                            Divider(),
                            (waterLevel >=32)
                            ? Text(
                              "Air Hampir Habis! Segera isi ulang!",
                              style: TextStyle(
                                fontSize: 15,
                              ),)
                            : Text(
                              "Air Penuh",
                               style: TextStyle(
                                fontSize: 15,
                              ), ),
                      ],
                      ),
                      decoration: BoxDecoration(
                        color: ((waterLevel) >= 32) ? Color.fromARGB(255, 240, 52, 38).withOpacity(0.8):Color.fromARGB(255, 25, 112, 199).withOpacity(0.8),
                        borderRadius: BorderRadius.circular(5),
                        ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 10, bottom: 5, left: 8, right: 8),
                      padding: EdgeInsets.all(10),
                      width: MediaQuery.of(context).size.width,
                      child: Column (
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                           Text(
                            "Kadar pH : $_pHValue",
                            style: TextStyle(
                              color: _pHValue >=10 ? Colors.white : Colors.black,
                              height: 1.5,
                              fontWeight: FontWeight.bold,
                              ),
                            ),
                            Divider(),
                            (_pHValue < 5.5 || _pHValue > 8.5)
                            ? Text(
                              "Kadar pH tidak normal! Segera bersihkan wadah air!",
                              style: TextStyle(
                                color: _pHValue >=10 ? Colors.white : Colors.black,
                                fontSize: 15,
                              ),)
                            : Text(
                              "Kadar pH normal",
                               style: TextStyle(
                                fontSize: 15,
                              ), ),
                      ],
                      ),
                      decoration: BoxDecoration(
                        color: _pHValue <= 1
                                ? Color.fromARGB(255, 237, 55, 34)
                                : _pHValue <= 2
                                ? Color.fromARGB(255, 237, 52, 121)
                                : _pHValue <= 3
                                ? Color.fromARGB(255, 246, 146, 39)
                                : _pHValue <= 4
                                ? Color.fromARGB(255, 251, 169, 34)
                                : _pHValue <= 5
                                ? Color.fromARGB(255, 244, 235, 8)
                                : _pHValue <= 6
                                ? Color.fromARGB(255, 163, 206, 57)
                                : _pHValue <= 7
                                ? Color.fromARGB(255, 77, 183, 72)
                                : _pHValue <= 8
                                ? Color.fromARGB(255, 1, 146, 71)
                                : _pHValue <= 9
                                ? Color.fromARGB(255, 4, 148, 149)
                                : _pHValue <= 10
                                ? Color.fromARGB(255, 80, 117, 187)
                                : _pHValue <= 11
                                ? Color.fromARGB(255, 69, 74, 158)
                                : _pHValue <= 12
                                ? Color.fromARGB(255, 42, 47, 131)
                                : _pHValue <= 13
                                ? Color.fromARGB(255, 148, 35, 139)
                                : Color.fromARGB(255, 123, 38, 121),
                        borderRadius: BorderRadius.circular(5),
                        ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 10, bottom: 5, left: 8, right: 8),
                      padding: EdgeInsets.all(10),
                      width: MediaQuery.of(context).size.width,
                      child: Column (
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                           Text(
                            "Tingkat kejernihan air : $_turbiditasValue",
                            style: TextStyle(
                              color: _turbiditasValue >=1500 ? Colors.white : Colors.black,
                              height: 1.5,
                              fontWeight: FontWeight.bold,
                              ),
                            ),
                            Divider(),
                            (_turbiditasValue >= 2000)
                            ? Text(
                              "Air sudah keruh! Segera bersihkan wadah air!",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 15,
                              ),)
                            : Text(
                              "Kejernihan air normal",
                              style: TextStyle(
                                fontSize: 15,
                              )),
                      ],
                      ),                
                      decoration: BoxDecoration(
                         color: _turbiditasValue >= 2000
                          ? Color.fromARGB(255, 237, 55, 34)
                            : Color.fromARGB(255, 4, 148, 149),                      
                        borderRadius: BorderRadius.circular(5),
                        ),
                    ),                       
                  ],
                ),
               ),

                Padding(
                  padding: const EdgeInsets.only(top: 15),
                  child: Center(
                    child: Text(
                      "Copyright @2023 Team Dev MBKM All Right Reserved",
                      style: TextStyle(fontSize: 11),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
