import 'package:boilerplate/core/styles/my_dimensions.dart';
import 'package:boilerplate/presentation/widgets/ipm_image.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:url_launcher/url_launcher_string.dart';

import '../../../bloc/home/home_bloc.dart';

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

  @override
  State<HomeBanner> createState() => _HomeBannerState();
}

class _HomeBannerState extends State<HomeBanner> {
  late final CarouselController controller;

  int currentIndex = 0;
  CarouselController carouselController = CarouselController();

  @override
  void initState() {
    super.initState();

    controller = CarouselController();
  }

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<HomeBloc, HomeState>(
      builder: (context, state) {
        if (state.data.banners.length == 0) {
          return Container();
        }

        return Container(
          padding: EdgeInsets.only(
            bottom: MyDimens.dimen20,
          ),
          color: Colors.white,
          child: Column(
            children: [
              SizedBox(
                height: 24,
              ),
              Stack(
                children: [
                  CarouselSlider.builder(
                    carouselController: controller,
                    itemCount: state.data.banners.length,
                    itemBuilder: (context, index, index2) {
                      var banner = state.data.banners[index];

                      return GestureDetector(
                        onTap: () async {
                          // print('getUrl ${banner.link}');
                          // print(
                          //     "state.data.banners.length  ${state.data.banners.length}");
                          if (banner.link != null &&
                              banner.link!.isNotEmpty &&
                              (await canLaunchUrlString(
                                  'https://${banner.link!}?mobile=1'))) {
                            launchUrlString('https://${banner.link!}?mobile=1');
                          }
                        },
                        child: Stack(
                          children: [
                            Container(
                              margin: EdgeInsets.symmetric(
                                  horizontal: MyDimens.dimen16),
                              height: MyDimens.dimen300,
                              child:
                                  IPMImage(url: banner.cover, fit: BoxFit.fill),
                            ),
                            GestureDetector(
                              child: Container(
                                  margin: EdgeInsets.only(
                                    top: MyDimens.dimen20,
                                    left: MyDimens.dimen16,
                                  ),
                                  child: Icon(
                                    Icons.arrow_back_ios_sharp,
                                    color: Colors.white,
                                  ),
                                  alignment: Alignment.centerLeft),
                              onTap: () {
                                // setState(() {
                                // currentIndex--;
                                // banner = state.data.banners[index + 1];
                                controller.previousPage();
                                // print(currentIndex);
                                // });
                              },
                            ),
                            GestureDetector(
                              onTap: () {
                                // setState(() {
                                // currentIndex++;
                                controller.nextPage();
                                setState(() {
                                  currentIndex++;
                                });
                                // print(currentIndex);
                                // });
                              },
                              child: Container(
                                  margin: EdgeInsets.only(
                                    top: MyDimens.dimen20,
                                    right: MyDimens.dimen16,
                                  ),
                                  child: Icon(
                                    Icons.arrow_forward_ios_outlined,
                                    color: Colors.white,
                                  ),
                                  alignment: Alignment.centerRight),
                            ),
                            // Align(
                            //   alignment: Alignment.centerRight,
                            //   child: IconButton(
                            //     onPressed: () {
                            //       // Use the controller to change the current page
                            //       carouselController.nextPage();
                            //       setState(() {
                            //         currentIndex++;
                            //       });
                            //     },
                            //     icon: Icon(Icons.arrow_forward),
                            //   ),
                            // ),
                          ],
                        ),
                      );
                    },
                    options: CarouselOptions(
                      // aspectRatio: 344 / 163,
                      aspectRatio: 4 / 1.5,
                      autoPlay: true,
                      autoPlayInterval: const Duration(seconds: 5),
                      viewportFraction: 1,
                      onPageChanged: (index, index2) {
                        setState(
                          () {
                            currentIndex = index;
                          },
                        );
                      },
                    ),
                  ),
                ],
              ),
              SizedBox(height: MyDimens.dimen16),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  ...List.generate(
                    state.data.banners.length,
                    (index) => Container(
                      margin: EdgeInsets.symmetric(horizontal: MyDimens.dimen6),
                      width: MyDimens.dimen8,
                      height: MyDimens.dimen8,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(100),
                        color: index == currentIndex
                            ? Colors.deepOrange
                            : const Color(0xFFD9D9D9).withOpacity(0.5),
                      ),
                    ),
                  ).toList(),
                ],
              )
            ],
          ),
        );
      },
    );
  }
}
