import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import '../../models/gallery.dart';
import '../../utils/util_web.dart' if (dart.library.io) '../../utils/util_io.dart';

class MobileIndexCarousel extends StatefulWidget {
  final List<Gallery> galleries;

  const MobileIndexCarousel(this.galleries, {Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MobileIndexCarouselState();
  }
}

class MobileIndexCarouselState extends State<MobileIndexCarousel> {
  int _current = 0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          padding: EdgeInsets.only(left: 0.0, right: 0.0, top: 0.0, bottom: 0.0),
          child: CarouselSlider(
            items: widget.galleries.map((i) {
              return Builder(
                builder: (BuildContext context) {
                  return Container(
                    width: MediaQuery.of(context).size.width,
                    // margin: EdgeInsets.symmetric(horizontal: 5.0),
                    child: GestureDetector(
                      child: Container(
                        child: Util.showImage(
                          'https:${i.image}',
                          fit: BoxFit.fitWidth,
                        ),
                      ),
                      onTap: () {
                        if (i.linkUrl != null && i.linkUrl.isNotEmpty) {
                          Util.openWebUrl(context, i.linkUrl);
                        }
                      },
                    ),
                  );
                },
              );
            }).toList(),
            options: CarouselOptions(
              height: MediaQuery.of(context).size.width / 2.0,
              aspectRatio: 2/1,
              initialPage: 0,
              enableInfiniteScroll: true,
              autoPlay: true,
              autoPlayInterval: Duration(seconds: 5),
              autoPlayCurve: Curves.fastOutSlowIn,
              scrollDirection: Axis.horizontal,
              viewportFraction: 1.0,
              onPageChanged: (index, reason) {
                setState(() {
                  _current = index;
                });
              }
            ),
          ),
        ),
        Positioned(
          bottom: 5,
          right: 10,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: widget.galleries.map((i) {
              int index = widget.galleries.indexOf(i);
              return Container(
                width: 8.0,
                height: 8.0,
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: _current == index
                    ? Color.fromRGBO(0, 0, 0, 0.9)
                    : Color.fromRGBO(0, 0, 0, 0.4),
                ),
              );
            }).toList(),
          ),
        ),
      ],
    );
  }

}