import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:Intaleq/views/widgets/elevated_btn.dart';

import 'constant/colors.dart';
import 'controller/auth/onboarding_controller.dart';
import 'models/model/onboarding_model.dart';

class OnBoardingPage extends StatelessWidget {
  OnBoardingControllerImp onBoardingControllerImp =
      Get.put(OnBoardingControllerImp());

  OnBoardingPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColor.secondaryColor,
        body: SafeArea(
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
            SizedBox(
              height: Get.height * .7,
              child: const CustomSliderOnBoarding(),
            ),
            const CustomDotControllerOnBoarding(),
            // const Spacer(flex: 2),
            const SizedBox(height: 20),
            MyElevatedButton(
              onPressed: () => onBoardingControllerImp.next(),
              title: 'Next'.tr,
            )
          ]),
        ));
  }
}

class CustomSliderOnBoarding extends GetView<OnBoardingControllerImp> {
  const CustomSliderOnBoarding({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
        controller: controller.pageController,
        onPageChanged: (val) {
          controller.onPageChanged(val);
        },
        itemCount: onBoardingList.length,
        itemBuilder: (context, i) => Column(
              children: [
                Image.asset(
                  onBoardingList[i].image!,
                  // width: ,
                  height: Get.width / 2,
                  fit: BoxFit.fill,
                ),
                const SizedBox(height: 20),
                Text(onBoardingList[i].title!,
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 22,
                        color: AppColor.primaryColor)),
                const SizedBox(height: 20),
                Container(
                    width: Get.width * .8,
                    alignment: Alignment.center,
                    child: Text(
                      onBoardingList[i].body!,
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                          height: 2,
                          color: AppColor.accentColor,
                          fontWeight: FontWeight.bold,
                          fontSize: 14),
                    )),
                // const SizedBox(height: 20),
              ],
            ));
  }
}

class CustomDotControllerOnBoarding extends StatelessWidget {
  const CustomDotControllerOnBoarding({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<OnBoardingControllerImp>(
        builder: (controller) => Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ...List.generate(
                    onBoardingList.length,
                    (index) => AnimatedContainer(
                          margin: const EdgeInsets.only(right: 5),
                          duration: const Duration(milliseconds: 900),
                          width: controller.currentPage == index ? 20 : 5,
                          height: 6,
                          decoration: BoxDecoration(
                              color: AppColor.primaryColor,
                              borderRadius: BorderRadius.circular(10)),
                        ))
              ],
            ));
  }
}