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;

  @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: 20.0),
        child: Center(
          child: Stack(
            children: [
              Container(
                // margin: EdgeInsets.only(top: 40),
                child: Center(
                  child: Text(
                    'Nilai pH',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
                  ),
                ),
                width: 300,
                height: 300,
              ),
              Container(
                // margin: EdgeInsets.only(top: 40),
                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: 20.0),
        child: Center(
          child: Stack(
            children: [
              // Text(
              //   "Kadar pH",
              //   style: TextStyle(
              //     color: Colors.amber
              //   ),
              // ),
              Container(
                // margin: EdgeInsets.only(top: 40),
                child: Center(
                  child: Text(
                    'Turbiditas',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
                  ),
                ),
                width: 300,
                height: 300,
              ),
              Container(
                // margin: EdgeInsets.only(top: 40),
                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,
                  ),
                ),
                Padding(padding: EdgeInsets.only(top: 30)),
                CarouselSlider(
                  items: slides,
                  options: CarouselOptions(
                    viewportFraction: 1,
                    aspectRatio: 4 / 3,
                    autoPlay: true,
                    onPageChanged: (index, reason) {
                      setState(() {
                        currentIndex = index;
                      });
                    },
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 10),
                  child: Center(
                    child: DotsIndicator(
                      dotsCount: slides.length,
                      position: currentIndex.toDouble(),
                      decorator: DotsDecorator(activeColor: Colors.amber),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 20),
                  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: 10, bottom: 10),
                  child: Center(
                    child: Text(
                      "Copyright @2023 Team Dev MBKM All Right Reserved",
                      style: TextStyle(fontSize: 11),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}