import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svg/svg.dart';
import 'package:gap/gap.dart';
import 'package:tanami_app/core/styles/app_color.dart';
import 'package:tanami_app/core/styles/app_images.dart';
import 'package:tanami_app/core/styles/app_text.dart';
import 'package:tanami_app/shared/components/text_widget.dart';

import '../../../../core/utils/language/localizations_delegate.dart';
import '../../../../shared/components/language_change_bottom_sheet.dart';
import 'login_signup_button.dart';

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

  @override
  State<BuildOnboardingPage> createState() => _BuildOnboardingPageState();
}

class _BuildOnboardingPageState extends State<BuildOnboardingPage> {
  int index = 0;
  final CarouselController _controller = CarouselController();

  @override
  Widget build(BuildContext context) {
    var localizations = AppLocalizations.of(context);
    List<String> welcomeImages = [
      AppImages.firstWelcome,
      AppImages.secondWelcome,
      AppImages.thirdWelcome,
    ];
    List<String> welcomeTitle = [
      localizations.translate(AppText.welcomeTitle1Text),
      localizations.translate(AppText.welcomeTitle2Text),
      localizations.translate(AppText.welcomeTitle3Text),
    ];
    List<String> welcomeDesc = [
      localizations.translate(AppText.welcomeDescription1Text),
      localizations.translate(AppText.welcomeDescription2Text),
      localizations.translate(AppText.welcomeDescription3Text),
    ];
    return Column(
      children: [
        index == 0 ? const Gap(40) : const Gap(0),
        index == 0
            ? Align(
                alignment: Alignment.centerRight,
                child: IconButton(
                    onPressed: () {
                      showLanguageBottomSheet(context);
                    },
                    icon: const Icon(
                      Icons.language_outlined,
                      size: 30,
                    )),
              )
            : const SizedBox(),
        index == 0 ? const Gap(0) : const Gap(88),
        SvgPicture.asset(AppImages.welcomeLogo1),
        const Gap(50),
        CarouselSlider.builder(
          carouselController: _controller,
          itemCount: 3,
          itemBuilder:
              (BuildContext context, int itemIndex, int pageViewIndex) {
            return Image.asset(
              welcomeImages[itemIndex],
              fit: BoxFit.cover,
              width: 1.sw,
              height: 400.h,
            );
          },
          options: CarouselOptions(
            onPageChanged: (index, reason) {
              this.index = index;
              setState(() {});
            },
            reverse: false,
            autoPlay: false,
            enlargeCenterPage: false,
            viewportFraction: 1,
            enableInfiniteScroll: false,
            aspectRatio: 1.0,
            initialPage: 0,
          ),
        ),
        const Gap(12),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: welcomeImages.asMap().entries.map((entry) {
            return GestureDetector(
              onTap: () => _controller.animateToPage(entry.key),
              child: Container(
                width: 12.0,
                height: 4.0,
                margin:
                    const EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(2),
                    color: AppColor.primaryColor2
                        .withOpacity(index == entry.key ? 1 : 0.3)),
              ),
            );
          }).toList(),
        ),
        const Gap(20),
        TextWidget().text15W500(
          welcomeTitle[index],
          clr: AppColor.darkGreyColor,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 20,
          ),
          child: TextWidget().text20W700(
            welcomeDesc[index],
            clr: AppColor.primaryColor,
            txtAlign: TextAlign.center,
          ),
        ),
        index == 2 ? const LoginSignUpButton() : const SizedBox(),
      ],
    );
  }
}
