import 'dart:async';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:managerapi/api.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/Models/map-marker.dart';

import '../../constants.dart';
import 'map_context.dart';

class MarkerViewWidget extends StatefulWidget {
  MarkerViewWidget();

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

class _MarkerInfoWidget extends State<MarkerViewWidget> {
  Size sizeScreen = new Size(1080.0, 1920.0); // Tablet resolution

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    final mapContext = Provider.of<MapContext>(context);

    return new AnimatedPositioned(
      duration: const Duration(milliseconds: 1500),
      curve: Curves.easeInOutSine,
      right: 120, // 140
      top: 50,  // 150
      child: Visibility(
        visible: mapContext.getSelectedMarker().longitude != null,
        child: Container(
          width: size.width * 0.37,
          height: size.height * 0.75,
          margin: EdgeInsets.symmetric(vertical: 3, horizontal: 4),
          decoration: BoxDecoration(
            color: kBackgroundLight,
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(10.0),
            boxShadow: [
              BoxShadow(
                color: kBackgroundSecondGrey,
                spreadRadius: 0.5,
                blurRadius: 1.1,
                offset: Offset(0, 1.1), // changes position of shadow
              ),
            ],
          ),
          child: Stack(
              children: <Widget> [
                Positioned(
                  right: 15,
                  top: 15,
                  child: InkWell(
                    onTap: () {
                      setState(() {
                        mapContext.setSelectedMarker(new MapMarker(longitude: null, latitude: null, title: '', images: null, description: ''));
                      });
                    },
                    child: Container(
                      width: 50,
                      height: 50,
                      decoration: BoxDecoration(
                        color: kMainGrey,
                        shape: BoxShape.circle,
                        boxShadow: [
                          BoxShadow(
                            color: kMainGrey,
                            spreadRadius: 0.5,
                            blurRadius: 1.1,
                            offset: Offset(0, 1.1), // changes position of shadow
                          ),
                        ],
                      ),
                      child: Icon(
                        Icons.close,
                        size: 35,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.topCenter,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 20),
                    child: Text(mapContext.getSelectedMarker().title, style: TextStyle(fontWeight: FontWeight.w600, fontSize: 30)),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 75),
                  child: Center(
                    child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          if(mapContext.getSelectedMarker().images != null && mapContext.getSelectedMarker().images.length > 0)
                            CarouselSlider(
                            options: CarouselOptions(
                              height: size.height *0.3,
                              enlargeCenterPage: true,
                              reverse: false,
                            ),
                            items: mapContext.getSelectedMarker().images.map<Widget>((i) {
                              return Builder(
                                builder: (BuildContext context) {
                                  return Container(
                                      width: MediaQuery.of(context).size.width,
                                      margin: EdgeInsets.symmetric(horizontal: 5.0),
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.circular(10.0),
                                          border: Border.all(width: 0.3, color: kSecondGrey),
                                      ),
                                      child: Image.network(
                                          i.imageSource,
                                          fit: BoxFit.contain
                                      )
                                  );
                                },
                              );
                            }).toList(),
                          ),
                          // Description
                          Container(
                            height: mapContext.getSelectedMarker().images != null && mapContext.getSelectedMarker().images.length > 0 ? size.height *0.3 : size.height *0.6,
                            width: MediaQuery.of(context).size.width *0.35,
                            decoration: BoxDecoration(
                              color: kBackgroundLight,
                              shape: BoxShape.rectangle,
                              borderRadius: BorderRadius.circular(10.0),
                              boxShadow: [
                                BoxShadow(
                                  color: kBackgroundSecondGrey,
                                  spreadRadius: 0.5,
                                  blurRadius: 1.1,
                                  offset: Offset(0, 1.1), // changes position of shadow
                                ),
                              ],
                            ),
                            child: SingleChildScrollView(
                              child: Padding(
                                padding: const EdgeInsets.all(15.0),
                                child: Text(mapContext.getSelectedMarker().description, textAlign: TextAlign.center, style: TextStyle(fontSize: 15)),
                              ),
                            ),
                          ),
                        ]
                    ),
                  ),
                ),
              ])
        ),
      )
    );
  }
}