import 'package:flutter/material.dart';
import 'package:initial_folder/helper/user_info.dart';
import 'package:initial_folder/providers/theme_provider.dart';
import 'package:initial_folder/screens/home/home_screen.dart';
import 'package:initial_folder/screens/login/login_screen.dart';
import 'package:initial_folder/screens/login/login_with_email/login_email_screen.dart';
import 'package:initial_folder/size_config.dart';
import 'package:initial_folder/theme.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:provider/provider.dart';
import 'package:rxdart/rxdart.dart';
import 'package:shared_preferences/shared_preferences.dart';

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

  @override
  State<introScreen> createState() => _introScreenState();
}

class _introScreenState extends State<introScreen> {
  int? _currentSlide;
  CarouselController? buttonCarouselController;

  @override
  void initState() {
    super.initState();
    _currentSlide = 0; // Inisialisasi _currentSlide di initState
    buttonCarouselController = CarouselController();
  }

  @override
  Widget build(BuildContext context) {
     final themeProvider = Provider.of<ThemeProvider>(context);
    return GestureDetector(
      onHorizontalDragUpdate: (details) {
        if (details.primaryDelta! > 0) {
          buttonCarouselController?.previousPage(
              duration: Duration(milliseconds: 300), curve: Curves.linear);
        } else if (details.primaryDelta! < 0) {
          buttonCarouselController?.nextPage(
              duration: Duration(milliseconds: 300), curve: Curves.linear);
        }
      },
      child: Scaffold(
        body: Stack(
          children: [
            Positioned(
              top: getProportionateScreenHeight(37),
              left: 0,
              right: 0,
              child: _currentSlide == 2
                  ? Padding(
                      padding: EdgeInsets.only(
                          right: getProportionateScreenWidth(15)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          GestureDetector(
                            onTap: () async {
                              await UsersInfo().setStateintro('true');
                              Navigator.of(context).pushNamedAndRemoveUntil(
                                  LoginEmail.routeName,
                                  (Route<dynamic> route) => false);
                            },
                            child: Text(
                              'Login',
                              style: thirdTextStyle.copyWith(
                                  fontSize: getProportionateScreenHeight(11)),
                            ),
                          )
                        ],
                      ),
                    )
                  : SizedBox(), // Jika _currentSlide bukan 2, widget tidak ditampilkan
            ),
            Positioned(
              top: getProportionateScreenHeight(40),
              left: 0,
              right: 0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(3, (index) {
                  return AnimatedContainer(
                    duration: Duration(milliseconds: 300),
                    width: _currentSlide == index ? 20.0 : 8.0,
                    height: 8.0,
                    margin: EdgeInsets.symmetric(horizontal: 3.0),
                    decoration: BoxDecoration(
                      borderRadius: _currentSlide == index
                          ? BorderRadius.circular(50)
                          : BorderRadius.circular(50),
                      shape: _currentSlide == index
                          ? BoxShape.rectangle
                          : BoxShape.rectangle,
                      color: _currentSlide == index ? fourthColor : Colors.grey,
                    ),
                  );
                }),
              ),
            ),
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/images/intro_image.png',
                    width: getProportionateScreenWidth(200),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                        top: getProportionateScreenHeight(15),
                        bottom: getProportionateScreenHeight(15)),
                    child: CarouselSlider(
                      carouselController: buttonCarouselController,
                      options: CarouselOptions(
                        height: getProportionateScreenHeight(150),
                        enableInfiniteScroll: false,
                        viewportFraction: 1.0,
                        initialPage: 0, // Change this to 0
                        onPageChanged: (index, reason) {
                          setState(() {
                            _currentSlide = index;
                          });
                        },
                      ),
                      items: [
                        "WELCOME TO VOCASIA -\nUNLOCK YOUR LEARNING\nPOTENTIAL!",
                        "EXPLORE BOUNDLESS\nKNOWLEDGE - ANYTIME,\nANYWHERE.",
                        "JOIN OUR COMMUNITY OF\nLEARNERS - LET'S GROW\nTOGETHER!"
                      ].map((i) {
                        return Builder(
                          builder: (BuildContext context) {
                            return Text(
                              '$i',
                              style: thirdTextStyle.copyWith(
                                fontWeight: FontWeight.w900,
                                fontSize: getProportionateScreenWidth(23),
                                color:
                                    Theme.of(context).colorScheme.onBackground,
                              ),
                              textAlign: TextAlign.center,
                            );
                          },
                        );
                      }).toList(),
                    ),
                  ),
                ],
              ),
            ),
            Positioned(
              bottom: getProportionateScreenHeight(25),
              left: 0,
              right: 0,
              child: Center(
                  child: GestureDetector(
                onTap: () async {
                  await UsersInfo().setStateintro('true');
                  if (_currentSlide == 2) {
                    Navigator.of(context).pushNamedAndRemoveUntil(
                        HomeScreen.routeName, (Route<dynamic> route) => false);
                    print('nanti');
                  } else {
                    buttonCarouselController?.nextPage(
                        duration: Duration(milliseconds: 300),
                        curve: Curves.linear);
                  }
                },
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  width: _currentSlide == 2
                      ? getProportionateScreenWidth(200)
                      : 55.0,
                  height: _currentSlide == 2
                      ? getProportionateScreenWidth(60)
                      : 55.0,
                  margin: EdgeInsets.symmetric(horizontal: 3.0),
                  decoration: BoxDecoration(
                    borderRadius: _currentSlide == 2
                        ? BorderRadius.circular(15)
                        : BorderRadius.circular(50),
                    shape: _currentSlide == 2
                        ? BoxShape.rectangle
                        : BoxShape.rectangle,
                    color: themeProvider.themeData == ThemeClass.darkmode
                              ?primaryColor : primaryColorligtmode,
                  ),
                  child: Center(
                    child: _currentSlide == 2
                        ? AnimatedOpacity(
                            duration: Duration(milliseconds: 1000),
                            opacity: _currentSlide == 2 ? 1.0 : 0.0,
                            child: Text(
                              "Let's Explore",
                              textAlign: TextAlign.center,
                              style: thirdTextStyle.copyWith(
                                color: Colors.white,
                                fontWeight: FontWeight.w600,
                                fontSize: 20,
                              ),
                            ),
                          )
                        : Icon(
                            Icons.arrow_forward_rounded,
                            color: Colors.white,
                          ),
                  ),
                ),
              )),
            ),
          ],
        ),
      ),
    );
  }
}