import 'dart:async';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:tablet_app/Components/Map/map_context.dart';
import 'package:tablet_app/Models/map-marker.dart';

import '../../constants.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: 140, // 140
      top: 150,  // 150
      child: Visibility(
        visible: mapContext.getSelectedMarker().longitude != null,
        child: Container(
          width: size.width * 0.29,
          height: size.height * 0.6,
          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: '', description: '', text: ''));
                      });
                    },
                    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,
                      ),
                    ),
                  ),
                ),
                Center(
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Text(mapContext.getSelectedMarker().title, style: TextStyle(fontSize: 15)),
                        Text(mapContext.getSelectedMarker().description, style: TextStyle(fontSize: 15)),
                        Text(mapContext.getSelectedMarker().text, style: TextStyle(fontSize: 15)),
                        Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: [
                              Text('Sub menu 1', style: TextStyle(fontSize: 15)),
                              Text('Sub menu 2', style: TextStyle(fontSize: 15)),
                            ]
                        )
                      ]
                  ),
                ),
              ])
        ),
      )
    );
  }
}