import 'package:flutter/material.dart';
import 'package:healthcare_user/common/settings.dart';
import 'package:healthcare_user/common/zoom_image.dart';

class ReportImages extends StatefulWidget {
  var imageDetails;
  ReportImages({this.imageDetails});

  @override
  State<ReportImages> createState() => _ReportImagesState();
}

class _ReportImagesState extends State<ReportImages> {
  Widget renderUi() {

    if(widget.imageDetails.length!=0){
      return GridView.builder(
        itemCount: widget.imageDetails.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 2.0,
          mainAxisSpacing: 2.0,
        ),
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
              Navigator.push(
                  context,
                  new MaterialPageRoute(
                      builder: (__) => new ImageZoomPage(
                          imageName: 'Findings',
                          imageDetails: widget.imageDetails[index]['url'])));
              /*gridOntap(index);*/
            },
            child: Container(
              width: MediaQuery.of(context).size.width * .30,
              height: MediaQuery.of(context).size.height * .15,
              decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  image: DecorationImage(
                      image: NetworkImage(widget.imageDetails[index]['url'])
                      as ImageProvider, // picked file
                      fit: BoxFit.fill)),
              child: Stack(children: [
                Positioned(
                  right: 0,
                  child: Container(
                    child: IconButton(
                      iconSize: 30,
                      icon: const Icon(
                        Icons.cancel,
                        color: Colors.red,
                      ),
                      onPressed: () async {},
                    ),
                    /* color: Colors.pinkAccent,
                      width: 35,
                      height: 35,*/
                  ),
                )
              ]),
            ),

            //Image.network(widget.imageDetails[index]['url']),
          );
        },
      );
    }
    else{
      return  Center(
          child: Padding(
            padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(height: MediaQuery.of(context).size.height * .25,),
                Text('Click below icon to add new Report'),
                SizedBox(
                  height: 20,
                ),
                CircleAvatar(
                  backgroundColor: primaryColor,
                  radius: 40,
                  child: IconButton(
                    iconSize: 40,
                    icon: const Icon(
                      Icons.add,
                      color: Colors.white,
                    ),
                    onPressed: () async {
                      /*Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => const Login()),
                      );*/
                    },
                  ),
                )
              ],
            ),
          )
      );
    }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppSettings.appBar('Report Images'),
      body: Container(padding: EdgeInsets.all(12.0), child: renderUi()),
    );
  }
}