import 'package:cached_network_image/cached_network_image.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import '../../../constants.dart';
import '../../../models/banner_item.dart';

class BannerCard extends StatefulWidget {
  List<BannerItem> banners;
  BannerCard({required this.banners});
  @override
  State<BannerCard> createState() => _BannerCardState();
}

class _BannerCardState extends State<BannerCard> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Stack(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(4),
            child: CarouselSlider(
              options: CarouselOptions(
                height: 200,
                aspectRatio: 16/9,
                viewportFraction: 1,
                initialPage: 0,
                enableInfiniteScroll: true,
                reverse: false,
                autoPlay: true,
                autoPlayInterval: const Duration(seconds: 3),
                autoPlayAnimationDuration: const Duration(milliseconds: 800),
                autoPlayCurve: Curves.fastOutSlowIn,
                enlargeCenterPage: true,
                scrollDirection: Axis.horizontal,
                onPageChanged: (int val, reason){
                  setState(() {
                    currentIndex = val;
                  });
                }
              ),
              items: widget.banners.map((i) {
                return Builder(
                  builder: (BuildContext context) {
                    return CachedNetworkImage(
                      imageUrl: "${i.image}",
                      fit: BoxFit.cover,
                      width: double.infinity,
                      errorWidget: (context, _,err) => Container(color: Colors.grey.shade100,),
                      placeholder: (context,_) => Container(color: Colors.grey.shade100,),
                    );
                  },
                );
              }).toList(),
            ),
          ),
          Container(
            height: 200,
            width: double.infinity,
            padding: const EdgeInsets.only(bottom: 8),
            alignment: Alignment.bottomCenter,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                for(int i = 0; i < widget.banners.length; i++)Container(
                  height: 6,
                  width: 6,
                  margin: const EdgeInsets.only(right: 4),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: (currentIndex == i) ? Constants.primaryColor : Colors.transparent,
                    border: Border.all(color: (currentIndex == i) ? Constants.primaryColor : Colors.grey)
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}