import 'package:clean/base/base_page.dart';
import 'package:clean/module/splash/intro/intro_controller.dart';
import 'package:clean/resource/assets.gen.dart';
import 'package:clean/resource/colors.gen.dart';
import 'package:clean/router/app_pages.dart';
import 'package:flutter/Material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:lottie/lottie.dart';

class IntroPage extends BasePage<IntroController> {
  IntroPage({Key? key}) : super(key: key);

  static void start() {
    Get.offNamed(RoutePath.intro);
  }

  @override
  bool immersive() {
    return true;
  }

  @override
  bool statusBarDarkFont() {
    return false;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(children: [
      Container(
        width: double.infinity,
        height: double.infinity,
        child: SafeArea(
            child: Container(
                child: Column(
          children: [
            Flexible(
              child: PageView(
                controller: controller.pageController.value,
                onPageChanged: (index) {
                  controller.currentPage.value = index;
                },
                children: List.generate(controller.pageList.length, (index) {
                  return buildPage(controller.pageList[index]);
                }),
              ),
            ),
            buildIndicator(),
            SizedBox(height: 15.h),
            GestureDetector(
              onTap: () {
                controller.clickContinue();
              },
              child: Container(
                width: 316.w,
                height: 48.h,
                alignment: Alignment.center,
                decoration: ShapeDecoration(
                  color: Color(0xFF0279FB),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(24.r),
                  ),
                ),

                child: Text(
                  'CONTINUE',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),

            SizedBox(height: 76.h),
          ],
        ))),
      ),
      IgnorePointer(
        child: Assets.images.bgPhotoSelectedPreviewFinish.image(
          width: 360.w,

        ),
      ),
    ]);
  }

  Widget buildIndicator() {
    return Obx(() {
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: List.generate(controller.pageList.length, (index) {
          return AnimatedContainer(
            duration: const Duration(milliseconds: 500),
            margin: EdgeInsets.symmetric(horizontal: 5.h),
            height: 10,
            width: controller.currentPage.value == index ? 10.w : 10.w,
            // width: controller.currentPage.value == index ? 20.w : 10.w, 选中为长方形
            decoration: BoxDecoration(
              color: controller.currentPage.value == index
                  ? ColorName.white
                  : ColorName.white.withValues(alpha: 0.25),
              borderRadius: BorderRadius.circular(5.r),
            ),
          );
        }),
      );
    });
  }

  Widget buildPage(PageBean pageBean) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          pageBean.title,
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.w500,
            height: 1.25,
          ),
        ),
        Lottie.asset(
          pageBean.animUrl,
          width: 360.w,
          height: 329.w,
          repeat: true,
        ),
      ],
    );
  }
}