import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../app.dart';

class ProductFullImage extends StatefulWidget {
  final List<ProductImage> images;

  ProductFullImage({
    required this.images,
  });

  @override
  State<ProductFullImage> createState() => _ProductFullImageState();
}

class _ProductFullImageState extends State<ProductFullImage> {
  final _pageController = PageController(keepPage: false);
  int _currentPage = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppbarWidget(leading: AppBarBackBtn()),
      body: GestureDetector(
        child: Stack(
          children: [
            Positioned(
              child: Hero(
                tag: 'imageHero',
                child: PageView(
                  controller: _pageController,
                  onPageChanged: (currPage) {
                    if (mounted)
                      setState(() {
                        _currentPage = currPage;
                      });
                  },
                  children: mapIndexed(
                    widget.images,
                    (index, ProductImage img) => cachedImageNetwork(
                      img.originalImageUrl,
                      BoxFit.contain,
                      const BorderRadius.all(Radius.circular(0.0)),
                    ),
                  ).toList(),
                ),
              ),
            ),
            // region Indicator
            widget.images.isNotEmpty
                ? Positioned(
                    bottom: MediaQuery.of(context).padding.bottom,
                    right: 20.w,
                    child: Container(
                      decoration: new BoxDecoration(
                        color: Colors.black26,
                        borderRadius: BorderRadius.circular(4),
                      ),
                      padding: const EdgeInsets.only(left: 6, right: 6, top: 4, bottom: 4),
                      child: Text(
                        '${(_currentPage + 1)} / ${widget.images.length}',
                        style: new TextStyle(color: ThemeColor.white, fontSize: 14.sp),
                      ),
                    ),
                  )
                : Container(),
          ],
        ),
        onTap: () {
          // Navigator.pop(context);
          Get.back();
        },
      ),
    );
  }
}
