import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:lba/extension/screenSize.dart';
import 'package:lba/gen/assets.gen.dart';
import 'package:lba/res/colors.dart';
import 'package:lba/screens/auth/login.dart';

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

  @override
  State<OnboardingScreen> createState() => _OnboardingScreenState();
}

class _OnboardingScreenState extends State<OnboardingScreen> {
  int currentIndex = 0;
  final PageController _pageController = PageController();

  final List<String> imageAssets = [
    Assets.images.ounboarding1.path,
    Assets.images.frame.path,
    Assets.images.onboarding3.path,
  ];

  final List<String> slides = [
    Assets.icons.slides1.path,
    Assets.icons.slide2.path,
    Assets.icons.slide3.path,
  ];

  void _next() {
    if (currentIndex < imageAssets.length - 1) {
      _pageController.nextPage(duration: Duration(milliseconds: 300), curve: Curves.easeInOut);
    } else {
      Navigator.push(context, MaterialPageRoute(builder: (context) => Login()));
    }
  }

  void _back() {
    if (currentIndex > 0) {
      _pageController.previousPage(duration: Duration(milliseconds: 300), curve: Curves.easeInOut);
    }
  }

  @override
  Widget build(BuildContext context) {
    final width = context.screenWidth;
    final height = context.screenHeight;

    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: PageView.builder(
              controller: _pageController,
              itemCount: imageAssets.length,
              onPageChanged: (index) {
                setState(() {
                  currentIndex = index;
                });
              },
              itemBuilder: (context, index) {
                return Padding(
                  padding: EdgeInsets.fromLTRB(width / 15, height / 40, width / 15, height / 30),
                  child: SvgPicture.asset(
                    imageAssets[index],
                    key: ValueKey(imageAssets[index]),
                    height: height / 2.5,
                    width: width,
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(width / 15, 10, width / 15, 5),
            child: Row(
              children: [
                Text(
                  "Proxibuy Geofencing marketing",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                  textDirection: TextDirection.ltr,
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(width / 15, 0, width / 15, width / 30),
            child: Text(
              '"Join the app to discover exclusive discounts and special offers in specific areas around you for a smarter shopping experience!"',
              style: TextStyle(fontWeight: FontWeight.w500, color: LightAppColors.hint, fontSize: 15),
            ),
          ),
          SizedBox(height: height / 30),
          Padding(
            padding: EdgeInsets.fromLTRB(width / 15, 0, width / 15, height / 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                AnimatedSwitcher(
                  duration: Duration(milliseconds: 200),
                  child: SvgPicture.asset(
                    slides[currentIndex],
                    key: ValueKey(slides[currentIndex]),
                  ),
                ),
                Row(
                  children: [
                    if (currentIndex > 0)
                      GestureDetector(
                        onTap: _back,
                        child: SvgPicture.asset(Assets.icons.arrowLeft.path),
                      ),
                    const SizedBox(width: 8),
                    GestureDetector(
                      onTap: _next,
                      child: SvgPicture.asset(
                        Assets.icons.next.path,
                        width: width / 5.5,
                      ),
                    ),
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
}