import 'package:animate_do/animate_do.dart';
import 'package:fikoyt_merkez/apps/mesaici/servisler/fikoyt.mesaici.service.dart';
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:get/get.dart';
import 'package:vrouter/vrouter.dart';

class IlkEkran extends StatefulWidget {
  const IlkEkran({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _IlkEkranState createState() => _IlkEkranState();
}

class _IlkEkranState extends State<IlkEkran> {
  late PageController _pageController;
  late List<Widget> slideList;
  RxInt aktifSayfa = 0.obs;
  late AnimationController animateController;

  List<dynamic> sayfalar = [
    {
      "resim": "assets/mesaici/ilk-giris/1.png",
      "aciklama": """ FikoYT Mesaici Kazandığınız Ücret Ve Zamana Hükmeder """
    },
    {
      "resim": "assets/mesaici/ilk-giris/2.png",
      "aciklama": """Karmaşık Çalışma Saatlerinizi Kayıt Altına Alır"""
    },
    {
      "resim": "assets/mesaici/ilk-giris/3.png",
      "aciklama":
          """Günlük Olarak Aldığınız Notlarınızı Kayıt Altında Tutar ve Aylar Geçse Bile Hatırlatmak İçin Size Yardımcı Olur"""
    },
    {
      "resim": "assets/mesaici/ilk-giris/4.png",
      "aciklama":
          """Olağan Yada Olağan Dışı Mesai Hareketlerinizi Çılgınca Yöntemlerle Kayıt Altına Alır"""
    },
    {
      "resim": "assets/mesaici/ilk-giris/5.png",
      "aciklama":
          """Gerekli Yetkilendirme Ayarlarını Yaptığınızda Her Şey Otomatikleşir Bu Yüzden Sizin İçin Sadece Tüm Akışı Ve Hareketlerinizi İzlemek Kalır"""
    },
    {
      "resim": "assets/mesaici/ilk-giris/6.png",
      "aciklama":
          """Anlık Durumunuzun, Akıllı | Zekalı Araçlar ile Analizini Yapar ve Muhteşem Diagram | Grafikler İle Size Raporlar"""
    },
    {
      "resim": "assets/mesaici/ilk-giris/7.png",
      "aciklama":
          """FikoYT Mesaici Oldukça Esnektir.Günlük Ve Karmaşık Anlaşmalarınızı Kaydederek Sadece O Güne Özel Hesaplamaları Ayrı Yapar, Tüm Karışıklıkların Önüne Geçer"""
    },
    {
      "resim": "assets/mesaici/ilk-giris/8.png",
      "aciklama":
          """FikoYT Mesaici En Karmaşık Problemleri 2+2'nin Sonucunu Kadar Kolay Bir Şekilde Çözer. Hepimize Sadece Şaşkınca Bakmak Kalır"""
    },
    {
      "resim": "assets/mesaici/ilk-giris/10.png",
      "aciklama":
          """Şimdi Kahvenizi Alın,Tüm Bunların ve Daha Fazlasının Tadını Çıkarın"""
    },
  ];

  @override
  void initState() {
    _pageController = PageController(initialPage: aktifSayfa.value);
    super.initState();
  }

  @override
  Widget build(BuildContext context) => Stack(
        children: [
          PageView(
            physics: const BouncingScrollPhysics(),
            controller: _pageController,
            onPageChanged: (value) {
              aktifSayfa.value = value;
              animateController.reset();
              animateController.forward();
            },
            children: <Widget>[
              ...sayfalar.map(
                (val) => Container(
                  // color: Colors.transparent, //Colors.orange,
                  height: 300 - kToolbarHeight - 10,
                  margin: EdgeInsets.zero,
                  decoration: BoxDecoration(
                    color: Colors.black87,
                    image: DecorationImage(
                      image: AssetImage(val["resim"]!),
                      fit: BoxFit.cover,
                      opacity: 0.4,
                    ),
                  ),
                  child: FadeInUp(
                    delay: NumDurationExtensions(0.1).seconds,
                    duration: NumDurationExtensions(0.3).seconds,
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: Container(
                        width: double.infinity,
                        padding: const EdgeInsets.all(8),
                        margin: const EdgeInsets.only(
                          bottom: 45,
                          right: 10,
                          left: 10,
                        ),
                        // decoration: BoxDecoration(
                        //   color: Colors.black.withOpacity(0.4),
                        //   borderRadius: BorderRadius.circular(8),
                        // ),
                        child: Text(
                          val["aciklama"]!,
                          textAlign: TextAlign.center,
                          style: const TextStyle(
                            color: Colors.white,
                            shadows: <Shadow>[
                              Shadow(
                                offset: Offset(0.0, 0.0),
                                blurRadius: 3.0,
                                color: Color.fromARGB(0, 0, 0, 0),
                              ),
                              Shadow(
                                offset: Offset(0.0, 0.0),
                                blurRadius: 8.0,
                                color: Color.fromARGB(0, 0, 0, 0),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              /** */
            ],
          ),
          Align(
            alignment: Alignment.topCenter,
            child: SizedBox(
              height: 72,
              child: Padding(
                padding: const EdgeInsets.only(top: 25),
                child: TextButton(
                  child:
                      Image.asset("assets/core/icons/fikoyt.png", height: 72),
                  onPressed: () {
                    context.vRouter.to("/");
                  },
                ),
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.only(
                bottom: 15,
                right: 10,
                left: 10,
              ),
              child: Obx(
                () => Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    if (aktifSayfa.value == 0)
                      FadeIn(
                        child: TextButton(
                          onPressed: () async {
                            (await Get.putAsync(
                                    () async => FikoYTMesaiciService()))
                                .mesaiciAyarlar
                                .uygulamaAyarlari
                                .ilkEkranAcilistaGoster
                                .value = false;
                            (await Get.putAsync(
                                    () async => FikoYTMesaiciService()))
                                .ayarlariKaydet();
                            // ignore: use_build_context_synchronously
                            context.vRouter.to("/mesaici");
                          },
                          child: const Text(
                            "Geç",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.white,
                              shadows: <Shadow>[
                                Shadow(
                                  offset: Offset(0.0, 0.0),
                                  blurRadius: 3.0,
                                  color: Color.fromARGB(0, 0, 0, 0),
                                ),
                                Shadow(
                                  offset: Offset(0.0, 0.0),
                                  blurRadius: 8.0,
                                  color: Color.fromARGB(0, 0, 0, 0),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    if (aktifSayfa.value > 0)
                      FadeIn(
                        child: TextButton(
                          onPressed: () {
                            if (aktifSayfa.value > 0) {
                              _pageController.previousPage(
                                duration: 1000.ms,
                                curve: Curves.easeInOutBack,
                              );
                            }
                          },
                          child: const Text(
                            "Önceki",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.white,
                              shadows: <Shadow>[
                                Shadow(
                                  offset: Offset(0.0, 0.0),
                                  blurRadius: 3.0,
                                  color: Color.fromARGB(0, 0, 0, 0),
                                ),
                                Shadow(
                                  offset: Offset(0.0, 0.0),
                                  blurRadius: 8.0,
                                  color: Color.fromARGB(0, 0, 0, 0),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    const Spacer(),
                    Container(
                      padding: const EdgeInsets.all(8),
                      margin: EdgeInsets.zero,
                      decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.4),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: FadeIn(
                        manualTrigger: true,
                        controller: (animationCtrl) =>
                            animateController = animationCtrl,
                        child: Text(
                          "${sayfalar.length} / ${aktifSayfa.value + 1}",
                          style: const TextStyle(
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                    const Spacer(),
                    if (aktifSayfa.value < sayfalar.length - 1)
                      FadeIn(
                        child: TextButton(
                          onPressed: () {
                            _pageController.nextPage(
                                duration: 1000.ms, curve: Curves.easeOutBack);
                          },
                          child: const Text(
                            "Sonraki",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.white,
                              shadows: <Shadow>[
                                Shadow(
                                  offset: Offset(0.0, 0.0),
                                  blurRadius: 3.0,
                                  color: Color.fromARGB(0, 0, 0, 0),
                                ),
                                Shadow(
                                  offset: Offset(0.0, 0.0),
                                  blurRadius: 8.0,
                                  color: Color.fromARGB(0, 0, 0, 0),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    if (aktifSayfa.value == sayfalar.length - 1)
                      FadeIn(
                        child: TextButton(
                          onPressed: () async {
                            (await Get.putAsync(
                                    () async => FikoYTMesaiciService()))
                                .mesaiciAyarlar
                                .uygulamaAyarlari
                                .ilkEkranAcilistaGoster
                                .value = false;
                            (await Get.putAsync(
                                    () async => FikoYTMesaiciService()))
                                .ayarlariKaydet();
                            // ignore: use_build_context_synchronously
                            context.vRouter.to("/mesaici");
                          },
                          child: const Text(
                            "Bitti",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.white,
                              shadows: <Shadow>[
                                Shadow(
                                  offset: Offset(0.0, 0.0),
                                  blurRadius: 3.0,
                                  color: Color.fromARGB(0, 0, 0, 0),
                                ),
                                Shadow(
                                  offset: Offset(0.0, 0.0),
                                  blurRadius: 8.0,
                                  color: Color.fromARGB(0, 0, 0, 0),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ).animate(
        autoPlay: true,
        effects: [
          ShimmerEffect(
            delay: 5000.ms,
            duration: 1000.ms,
            curve: Curves.easeIn,
          )
        ],
        onComplete: (controller) {
          controller.loop();
        },
      );
}