import 'package:e_commerce/const/AppColors.dart';
import 'package:e_commerce/ui/login_screen.dart';
import 'package:e_commerce/widgets/customButton.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';

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

  @override
  State<TutorialScreen> createState() => _TutorialScreenState();
}

class _TutorialScreenState extends State<TutorialScreen> with SingleTickerProviderStateMixin {
  late final TabController tabController;
  int index = 0;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 5, vsync: this);
    tabController.addListener(() {
      index = tabController.index;
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: double.infinity,
        child: Stack(
          children: [
            TabBarView(
              physics: const NeverScrollableScrollPhysics(),
              controller: tabController,
              children: [
                _tutorialWidget(1, context),
                _tutorialWidget(2, context),
                _tutorialWidget(3, context),
                _tutorialWidget(4, context),
                _tutorialWidget(5, context),
              ],
            ),
            if (index == 4) ...[
              Positioned(
                bottom: 15,
                left: 15,
                right: 15,
                child: SizedBox(
                  width: 1.sw,
                  height: 56.h,
                  child: ElevatedButton(
                    onPressed: () {
                      Navigator.pushReplacement(context, CupertinoPageRoute(builder: (_) => LoginScreen()));
                    },
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.white,
                      elevation: 3,
                    ),
                    child: Text(
                      "Selesai",
                      style: TextStyle(color: AppColors.deep_orange, fontSize: 18.sp),
                    ),
                  ),
                ),
              )
            ] else ...[
              Positioned(
                bottom: 15,
                left: 15,
                right: 15,
                child: SizedBox(
                  width: 1.sw,
                  height: 56.h,
                  child: ElevatedButton(
                    onPressed: () {
                      index = index + 1;
                      tabController.animateTo(index);
                      setState(() {});
                    },
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.white,
                      elevation: 3,
                    ),
                    child: Text(
                      "Selanjutnya",
                      style: TextStyle(color: AppColors.deep_orange, fontSize: 18.sp),
                    ),
                  ),
                ),
              )
            ]
          ],
        ),
      ),
    );
  }
}

Widget _tutorialWidget(int index, BuildContext context) {
  return Column(
    children: [
      Stack(
        children: [
          Image.asset("assets/$index.png", width: double.infinity, height: MediaQuery.of(context).size.height, fit: BoxFit.fitHeight),
        ],
      ),
    ],
  );
}