
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 DesktopIndexCarousel extends StatefulWidget {
  final List<Gallery> galleries;

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

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

class DesktopIndexCarouselState extends State<DesktopIndexCarousel> {
  int _current = 0;
  double sideSpace = 0;
  double mainSpace = 1200;

  @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) {
                  if (MediaQuery.of(context).size.width <= 1200) {
                    mainSpace = MediaQuery.of(context).size.width;
                    sideSpace = 0;
                  } else {
                    mainSpace = 1200;
                    sideSpace = (MediaQuery.of(context).size.width - 1200) / 2;
                  }
                  return Row(
                    children: [
                      Container(
                        width: sideSpace,
                      ),
                      Container(
                        width: mainSpace,
                        // margin: EdgeInsets.symmetric(horizontal: 5.0),
                        child: GestureDetector(
                          child: Container(
                            child: Util.showImage(
                              'https:${i.image}',
                              fit: BoxFit.fitWidth,
                            ),
                          ),
                          onTap: () {
                            if (i.linkUrl?.isNotEmpty == true) {
                              Util.openWebUrl(context, i.linkUrl!);
                            }
                          },
                        ),
                      ),
                      Container(
                        width: sideSpace,
                      ),
                    ],
                  );
                },
              );
            }).toList(),
            options: CarouselOptions(
                height: mainSpace / 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: sideSpace + 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(),
          ),
        ),
      ],
    );
  }

}