import 'package:carousel_slider/carousel_slider.dart';
import 'package:diplomaticquarterapp/core/viewModels/pharmacyModule/pharmacy_module_view_model.dart';
import 'package:diplomaticquarterapp/pages/offers_categorise_page.dart';
import 'package:diplomaticquarterapp/widgets/transitions/fade_page.dart';
import 'package:flutter/material.dart';
import 'package:diplomaticquarterapp/uitl/utils.dart';

class BannerPager extends StatefulWidget {
  final PharmacyModuleViewModel _model;

  BannerPager(this._model);

  @override
  _BannerPagerState createState() => _BannerPagerState();
}

class _BannerPagerState extends State<BannerPager> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: [
        CarouselSlider(
          options: CarouselOptions(
            aspectRatio: 7 / 2,
            enlargeCenterPage: true,
            enableInfiniteScroll: false,
            initialPage: 0,
            autoPlay: true,
            autoPlayInterval: Duration(seconds: 3),
            autoPlayAnimationDuration: Duration(milliseconds: 800),
            autoPlayCurve: Curves.decelerate,
            onPageChanged: (index, reason) {
              setState(() {
                _current = index;
              });
            },
          ),
          items: widget._model
              .getBannerImagesUrl()
              .mapIndexed(
                (item, index) => InkWell(
                  onTap: () {
                    Navigator.push(context, FadePage(page: OffersCategorisePage()));
                  },
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 1.0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(5.0)),
                      child: Center(
                        child: index == 0
                            ? Image.asset(
                                item,
                                fit: BoxFit.cover,
                              )
                            : Image.network(
                                item,
                                fit: BoxFit.cover,
                              ),
                      ),
                    ),
                  ),
                ),
              )
              .toList(),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: widget._model
                .getBannerImagesUrl()
                .mapIndexed(
                  (item, index) => Container(
                    width: 12.0,
                    height: 4.0,
                    margin:
                        EdgeInsets.symmetric(vertical: 0.0, horizontal: 2.0),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: _current == index
                          ? Color.fromRGBO(0, 250, 0, 0.9)
                          : Color.fromRGBO(0, 0, 0, 0.4),
                    ),
                  ),
                )
                .toList(),
          ),
        )
      ],
    ));
  }
}