import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_assets.dart';
import 'package:hmg_patient_app_new/core/app_state.dart';
import 'package:hmg_patient_app_new/core/cache_consts.dart';
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
import 'package:hmg_patient_app_new/core/utils/utils.dart';
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/presentation/home/navigation_screen.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
import 'package:hmg_patient_app_new/widgets/routes/custom_page_route.dart';
import 'package:hmg_patient_app_new/widgets/transitions/fade_page.dart';
import 'package:lottie/lottie.dart';

import '../../core/dependencies.dart';

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

  @override
  _OnboardingScreenState createState() {
    return _OnboardingScreenState();
  }
}

class _OnboardingScreenState extends State<OnboardingScreen> {
  int selectedIndex = 0;

  late PageController pageController;

  void goToHomePage() {
    Utils.saveBoolFromPrefs(CacheConst.firstLaunch, false);
    Navigator.pushAndRemoveUntil(
        context,
        CustomPageRoute(
          page: LandingNavigation(),
        ),
        (r) => false);
    // Navigator.of(context).pushReplacement(FadePage(page: LandingNavigation()));
  }

  @override
  void initState() {
    super.initState();
    pageController = PageController();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.whiteColor,
      body: SafeArea(
        top: false,
        left: false,
        right: false,
        child: Column(
          spacing: 24.h,
          children: [
            PageView(
              controller: pageController,
              children: [
                onboardingView(
                  AppAnimations.onboarding_1,
                  LocaleKeys.onboardingHeading1.tr(context: context),
                  LocaleKeys.onboardingBody1.tr(context: context),
                ),
                onboardingView(
                  AppAnimations.onboarding_2,
                  LocaleKeys.onboardingHeading2.tr(context: context),
                  LocaleKeys.onboardingBody2.tr(context: context),
                ),
              ],
              onPageChanged: (int index) {
                selectedIndex = index;
                setState(() {});
              },
            ).expanded,
            Row(
              spacing: 4.w,
              children: [
                AnimatedContainer(
                  duration: const Duration(milliseconds: 250),
                  height: 6.h,
                  width: selectedIndex == 0 ? 18.w : 6.w,
                  decoration: BoxDecoration(color: selectedIndex == 0 ? AppColors.textColor : AppColors.inputLabelTextColor, borderRadius: BorderRadius.circular(30.r)),
                ),
                AnimatedContainer(
                  duration: const Duration(milliseconds: 250),
                  height: 6.h,
                  width: selectedIndex == 1 ? 18.w : 6.w,
                  decoration: BoxDecoration(color: selectedIndex == 1 ? AppColors.textColor : AppColors.inputLabelTextColor, borderRadius: BorderRadius.circular(30.r)),
                ),
              ],
            ).paddingOnly(left: 24.w, right: 24.w),
            Row(
              children: [
                AnimatedSwitcher(
                  duration: const Duration(milliseconds: 250),
                  transitionBuilder: (child, anim) => FadeTransition(opacity: anim, child: child),
                  child: selectedIndex == 0
                      ? CustomButton(
                          text: LocaleKeys.skip.tr(context: context),
                          onPressed: () => goToHomePage(),
                          width: 86.w,
                          height: 56.h,
                          backgroundColor: Color(0xffFEE9EA),
                          textColor: AppColors.primaryRedColor,
                          borderColor: Colors.transparent,
                        ).paddingOnly(left: 24.w)
                      : const SizedBox.shrink(),
                ),
                const Spacer(),
                AnimatedContainer(
                  duration: const Duration(milliseconds: 400),
                  curve: Curves.easeInOut,
                  width: selectedIndex == 0 ? 56.w : MediaQuery.of(context).size.width - 48.w,
                  margin: EdgeInsets.only(left: 24.w, right: 24.w),
                  decoration: BoxDecoration(
                    color: AppColors.primaryRedColor,
                    borderRadius: BorderRadius.circular(12.r),
                  ),
                  child: AnimatedSwitcher(
                    duration: const Duration(milliseconds: 250),
                    transitionBuilder: (child, anim) => FadeTransition(opacity: anim, child: child),
                    child: selectedIndex == 0
                        ? CustomButton(
                            icon: getIt.get<AppState>().isArabic() ? AppAssets.arrow_back : AppAssets.arrow_forward,
                            iconSize: 32.w,
                            width: 56.w,
                            height: 56.h,
                            text: "",
                            backgroundColor: Colors.transparent,
                            onPressed: () {
                              pageController.animateToPage(1, duration: Duration(milliseconds: 400), curve: Curves.easeInOut);
                            })
                        : CustomButton(
                            text: LocaleKeys.getStarted.tr(context: context),
                      fontWeight: FontWeight.w600,
                            fontSize: 16.f,
                            height: 56.h,
                            textOverflow: TextOverflow.ellipsis,
                            backgroundColor: Colors.transparent,
                            onPressed: () => goToHomePage(),
                          ),
                  ),
                ),
              ],
            ).paddingOnly(bottom: (isFoldable || isTablet) ? 20.h : 32.h),
          ],
        ),
      ),
    );
  }

  Widget onboardingView(String icon, String heading, String body) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.start,
      spacing: 12.h,
      children: [
        Align(
                alignment: Alignment.bottomCenter,
                child: Transform.flip(
                    flipX: getIt.get<AppState>().isArabic() ? true : false,
                    child: Lottie.asset(icon, repeat: true, reverse: false, frameRate: FrameRate(60), width: MediaQuery.sizeOf(context).width - 50.w, height: MediaQuery.sizeOf(context).width - 50.w)))
            .expanded,
        Text(
          heading,
          style: TextStyle(fontSize: 36.f, fontWeight: FontWeight.w600, color: AppColors.textColor, letterSpacing: -1, height: 1.2),
        ),
        Text(
          body,
          style: TextStyle(fontSize: 16.f, fontWeight: FontWeight.w600, color: AppColors.greyTextColor, letterSpacing: 0, height: 26 / 16),
        ),
      ],
    ).paddingOnly(left: 24.w, right: 24.w);
  }
}
