import 'package:animate_do/animate_do.dart';
import 'package:fikoyt_akcali/apps/finans/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
  _IlkEkranState createState() => _IlkEkranState();
}

class _IlkEkranState extends State<IlkEkran> {
  late PageController _pageController;
  late List<Widget> slideList;
  RxInt aktifSayfa = 0.obs;
  late AnimationController animateController;
  FikoYTMesaiciService mesaiciService = Get.put(FikoYTMesaiciService());

  List<dynamic> sayfalar = [
    {"resim": "assets/mesaici/ilk-giris/1.png", "aciklama": """ FikoYT Akçalı 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 Akçalı 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 Akçalı 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,
    );
    Future.delayed(const Duration(seconds: 2)).then(
      (value) {
        aktifSayfa.refresh();
      },
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) => Stack(
        children: [
          PageView(
            physics: const BouncingScrollPhysics(),
            controller: _pageController,
            onPageChanged: (value) {
              aktifSayfa.value = value;
              aktifSayfa.refresh();
              // 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: 100,
                          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("/");
                  },
                ),
              ),
            ),
          ),
          Obx(
            () => Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: const EdgeInsets.only(
                  bottom: 60,
                  right: 10,
                  left: 10,
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Visibility(
                      visible: aktifSayfa.value == 0,
                      child: FadeIn(
                        child: TextButton(
                          onPressed: () async {
                            mesaiciService.ayarlarModel!.value.uygulamaAyarlari.ilkEkranAcilistaGoster = false;
                            mesaiciService.ayarlarModel!.refresh();
                            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),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                    Visibility(
                      visible: aktifSayfa.value > 0,
                      child: 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(),
                    Visibility(
                      visible: aktifSayfa.value < sayfalar.length - 1,
                      child: 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),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                    Visibility(
                      visible: aktifSayfa.value == sayfalar.length - 1,
                      child: FadeIn(
                        child: TextButton(
                          onPressed: () async {
                            mesaiciService.ayarlarModel!.value.uygulamaAyarlari.ilkEkranAcilistaGoster = false;
                            mesaiciService.ayarlarModel!.refresh();
                            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();
        },
        // onInit: (controller) {
        //   setState(() {});
        // },
      );
}