import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:one_key/res/colors.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

//PhotoPreview 点击小图后的效果
class PhotoPreview extends StatefulWidget {
  final int initialIndex;
  final List<String> photoList;
  final PageController pageController;
  final bool isShow;
  final List dashName;

  PhotoPreview({this.initialIndex, this.photoList, this.isShow, this.dashName})
      : pageController = PageController(initialPage: initialIndex);

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

class _PhotoPreviewState extends State<PhotoPreview> {
  int currentIndex;
  final _controller = new PageController();

  static const _kDuration = const Duration(milliseconds: 300);

  static const _kCurve = Curves.ease;

  final _kArrowColor = Colors.black.withOpacity(0.8);

  List tempImgList = [];

  @override
  void initState() {
    currentIndex = widget.initialIndex;

    for (var item in widget.photoList) {
      tempImgList.add('$item-zdmask');
    }
    print(tempImgList);
    // tempImgList = widget.photoList;
    super.initState();
  }

  //图片切换
  void onPageChanged(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
        child: InkWell(
      onTap: () {
        Navigator.of(context).pop();
      },
      child: Container(
          decoration: BoxDecoration(
            color: Colors.black,
          ),
          constraints: BoxConstraints.expand(
            height: MediaQuery.of(context).size.height,
          ),
          child: Stack(
            children: <Widget>[
              Container(
                // width: ScreenUtil().setWidth(375 * 2),
                // height: ScreenUtil().setHeight(397 * 2),
                // margin: EdgeInsets.only(
                // top: ScreenUtil().setWidth(260),
                // bottom: ScreenUtil().setWidth(280)),
                child: PhotoViewGallery.builder(
                  scrollPhysics: const BouncingScrollPhysics(),
                  onPageChanged: onPageChanged,
                  itemCount: tempImgList.length,
                  reverse: false,
                  loadingBuilder: (context, event) {
                    return UnconstrainedBox(
                      child: SizedBox(
                        width: ScreenUtil().setWidth(80),
                        height: ScreenUtil().setWidth(80),
                        child: CircularProgressIndicator(),
                      ),
                    );
                  },
                  pageController: widget.pageController,
                  builder: (BuildContext context, int index) {
                    return PhotoViewGalleryPageOptions(
                      imageProvider: NetworkImage(tempImgList[index]),
                      minScale: PhotoViewComputedScale.contained * 0.6,
                      maxScale: PhotoViewComputedScale.covered * 1.1,
                      initialScale: PhotoViewComputedScale.contained,
                    );
                  },
                ),
              ),
              Positioned(
                  top: ScreenUtil().setWidth(70),
                  left: ScreenUtil().setWidth(40),
                  child: Icon(Icons.close, color: Colors.white)),
            ],
          )),
    ));
  }
}

/// An indicator showing the currently selected page of a PageController
class DotsIndicator extends AnimatedWidget {
  DotsIndicator({
    this.controller,
    this.itemCount,
    this.onPageSelected,
    this.color: Colors.white,
  }) : super(listenable: controller);

  /// The PageController that this DotsIndicator is representing.
  final PageController controller;

  /// The number of items managed by the PageController
  final int itemCount;

  /// Called when a dot is tapped
  final ValueChanged<int> onPageSelected;

  /// The color of the dots.
  ///
  /// Defaults to `Colors.white`.
  final Color color;

  // The base size of the dots
  static const double _kDotSize = 4.0;

  // The increase in the size of the selected dot
  static const double _kMaxZoom = 2.0;

  // The distance between the center of each dot
  static const double _kDotSpacing = 18.0;

  Widget _buildDot(int index) {
    double selectedness = Curves.easeOut.transform(
      max(
        0.0,
        1.0 - ((controller.page ?? controller.initialPage) - index).abs(),
      ),
    );
    double zoom = 1.0 + (_kMaxZoom - 1.0) * selectedness;

    return new Container(
      width: _kDotSpacing,
      child: new Center(
        child: new Material(
          color: color,
          type: MaterialType.circle,
          child: new Container(
            width: _kDotSize * zoom,
            height: _kDotSize * zoom,
            child: new InkWell(
              onTap: () => onPageSelected(index),
            ),
          ),
        ),
      ),
    );
  }

  Widget build(BuildContext context) {
    return new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: new List<Widget>.generate(itemCount, _buildDot),
    );
  }
}