import 'dart:async';

import 'package:elektronika/app/pages/product/widgets/product_full_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class ProductImageHeader extends StatefulWidget {
  final List<ProductImage> images;
  final ProductModel model;

  ProductImageHeader({
    required this.images,
    required this.model,
  });

  @override
  State<ProductImageHeader> createState() => _ProductImageHeaderState();
}

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

  @override
  void initState() {
    Timer.periodic(Duration(seconds: 5), (Timer timer) {
      if (_currentPage < widget.images.length - 1) {
        _currentPage++;
      } else {
        _currentPage = 0;
      }

      if (_pageController.hasClients) {
        _pageController.animateToPage(
          _currentPage,
          duration: Duration(milliseconds: 350),
          curve: Curves.easeIn,
        );
      }
      // update _currentPage on text
      if (mounted) setState(() {});
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          child: Align(
            child: GestureDetector(
              onTap: () {
                debugPrint('on tapped');
                Get.to(() => ProductFullImage(images: widget.images));
              },
              child: Hero(
                tag: 'imageHero',
                child: Container(
                  height: 0.22.sh,
                  width: 0.95.sw,
                  padding: const EdgeInsets.all(16),
                  decoration: new BoxDecoration(
                    color: ThemeColor.searchBoxFillColor,
                    borderRadius: BorderRadius.circular(6),
                  ),
                  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)),
                        double.infinity,
                        0.22.sh,
                      ),
                    ).toList(),
                  ),
                ),
              ),
            ),
          ),
        ),

        FavoriteWidget(
          model: widget.model,
          top: 10.0,
          right: 20.0,
        ),

        // region Indicator
        widget.images.isNotEmpty
            ? Positioned(
                bottom: 5.h,
                right: 16.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(),
      ],
    );
  }
}
