import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:introduction_slider/source/presentation/pages/introduction_slider.dart';
import 'package:introduction_slider/source/presentation/widgets/buttons.dart';
import 'package:introduction_slider/source/presentation/widgets/dot_indicator.dart';
import 'package:introduction_slider/source/presentation/widgets/introduction_slider_item.dart';


import '../../../core/constants/app_assets.dart';
import '../../../core/constants/translation_keys.dart';
import '../../../custom_widgets/custom_button.dart';
import '../../../res/app_colors.dart';
import '../../../routes/app_pages.dart';
import '../controllers/intro_screen_controller.dart';

class IntroScreenView extends GetView<IntroScreenController> {
  IntroScreenView({Key? key}) : super(key: key);
  double imageWidthHeight = 180;

  @override
  Widget build(BuildContext context) {
    //
    // dp("Width int screen", {MediaQuery.sizeOf(Get.context!).width});
    // dp("Height init screen  ", MediaQuery.sizeOf(Get.context!).height);

    // dp("Display large ", Theme.of(Get.context!).textTheme.displayLarge);

    return Scaffold(
      backgroundColor: AppColors.colorSecondary,
      body: IntroductionSlider(
        showStatusBar: true,
        items: [
          IntroductionSliderItem(
            logo: SvgPicture.asset(
              AppAssets.img_global,
              width: imageWidthHeight,
              height: imageWidthHeight,
            ),
            title: Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                children: [
                  Text(
                    TranslationKeys.makeTranslation(TranslationKeys.textWelcomeToJoin),
                    style: Theme.of(context).textTheme.displayLarge!,
                  ),
                  const SizedBox(height: 20),
                  Text(
                    TranslationKeys.makeTranslation(TranslationKeys.textIntroDescription),
                    style: Theme.of(context).textTheme.bodyMedium!.copyWith(height: 1.8),
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
            backgroundColor: AppColors.colorSecondary,
          ),
          IntroductionSliderItem(
            logo: SvgPicture.asset(
              AppAssets.img_slider,
              width: imageWidthHeight,
              height: imageWidthHeight,
            ),
            title: Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(TranslationKeys.makeTranslation(TranslationKeys.textWelcomeToJoin), style: Theme.of(context).textTheme.displayLarge),
                  const SizedBox(height: 20),
                  Text(
                    TranslationKeys.makeTranslation(TranslationKeys.textIntroDescription),
                    style: Theme.of(context).textTheme.bodyMedium!.copyWith(height: 1.8),
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
            backgroundColor: AppColors.colorSecondary,
          ),
        ],
        done: Done(
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
            child: CustomButton(
              onPressed: () {
                Get.offAllNamed(Routes.LOGIN_SCREEN);
              },
              buttonColor: AppColors.colorPrimaryLight,
              buttonText: TranslationKeys.makeTranslation(TranslationKeys.continueText),
              textStyle: Theme.of(context).textTheme.titleSmall?.copyWith(color: AppColors.colorPrimaryDark),
              buttonPadding: const EdgeInsets.symmetric(vertical: 7, horizontal: 35),
            ),
          ),
          home: Container(),
        ),
        dotIndicator: const DotIndicator(size: 10, selectedColor: AppColors.colorPrimary),
        // back: Back(
        //   child: Padding(
        //     padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        //     child: CustomButton(
        //       onPressed: () {
        //         // Get.offAndToNamed(Routes.SIGN_UP_SCREEN_STEP1);

        //         Get.back();
        //       },
        //       buttonColor: AppColors.colorPrimaryLight,
        //       buttonText:
        //           TranslationKeys.makeTranslation(TranslationKeys.textRegister),
        //       textStyle: Theme.of(context)
        //           .textTheme
        //           .titleSmall
        //           ?.copyWith(color: AppColors.colorPrimaryDark),
        //       buttonPadding:
        //           const EdgeInsets.symmetric(vertical: 7, horizontal: 25),
        //     ),
        //   ),
        // ),
      ),
    );
  }
}