import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:photo_view/photo_view.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
  CarouselController? sliderController;
  int currentIndex = 1;

  @override
  void initState() {
    sliderController = CarouselController();
    super.initState();
  }

  @override
  void dispose() {
    sliderController = null;
    super.dispose();
  }

  @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: 5,
                  top: 5,
                  child: InkWell(
                    onTap: () {
                      setState(() {
                        mapContext.setSelectedMarker(new MapMarker(longitude: null, latitude: null, title: '', contents: 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: 25,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.topCenter,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 20),
                    child: HtmlWidget(
                      mapContext.getSelectedMarker().title,
                        customStylesBuilder: (element) {
                          return {'text-align': 'center'};
                        },
                      textStyle: TextStyle(fontWeight: FontWeight.w500, fontSize: kIsWeb ? kWebTitleSize : kTitleSize)
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 75),
                  child: Center(
                    child: Stack(
                      children: [
                        Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              if(mapContext.getSelectedMarker().images != null && mapContext.getSelectedMarker().images.length > 0)
                                CarouselSlider(
                                  carouselController: sliderController,
                                  options: CarouselOptions(
                                    onPageChanged: (int index, CarouselPageChangedReason reason) {
                                      setState(() {
                                        currentIndex = index + 1;
                                      });
                                    },
                                    height: size.height *0.3,
                                    enlargeCenterPage: true,
                                    pageSnapping: true,
                                    reverse: false,
                                  ),
                                  items: mapContext.getSelectedMarker().images.map<Widget>((i) {
                                    return Builder(
                                      builder: (BuildContext context) {
                                        return Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Container(
                                              //width: MediaQuery.of(context).size.width *0.9,
                                              /*decoration: BoxDecoration(
                                                borderRadius: BorderRadius.circular(20.0),
                                                border: Border.all(width: 0.3, color: kSecondGrey),
                                                image: i.imageSource != null ? new DecorationImage(
                                                  fit: BoxFit.contain,
                                                  image: new NetworkImage(
                                                    i.imageSource,
                                                  ),
                                                ): null,
                                                boxShadow: [
                                                  BoxShadow(
                                                    color: kBackgroundSecondGrey,
                                                    spreadRadius: 0.3,
                                                    blurRadius: 3,
                                                    offset: Offset(0, 1.1), // changes position of shadow
                                                  ),
                                                ],
                                              ),*/
                                            child: AspectRatio(
                                              aspectRatio: 16 / 9,
                                              child: ClipRect(
                                                child: i.imageSource != null ? PhotoView(
                                                  imageProvider: new NetworkImage(
                                                    i.imageSource,
                                                  ),
                                                  minScale: PhotoViewComputedScale.contained * 0.8,
                                                  maxScale: PhotoViewComputedScale.contained * 3.0,
                                                  backgroundDecoration: BoxDecoration(
                                                    color: kBackgroundSecondGrey,
                                                    shape: BoxShape.rectangle,
                                                    borderRadius: BorderRadius.circular(15.0),
                                                  ),
                                                ) : Center(child: Text('No data')),
                                              ),
                                            )
                                          ),
                                        );
                                      },
                                    );
                                  }).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: kBackgroundColor,
                                  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: HtmlWidget(
                                        mapContext.getSelectedMarker().description,
                                        customStylesBuilder: (element) {
                                          return {'text-align': 'center'};
                                        },
                                        textStyle: TextStyle(fontSize: kIsWeb ? kWebDescriptionSize : kDescriptionSize)
                                    ),
                                  ),
                                ),
                              ),
                            ]
                        ),
                        if(mapContext.getSelectedMarker().images != null && mapContext.getSelectedMarker().images.length > 1)
                          Positioned(
                              top: MediaQuery.of(context).size.height * 0.125,
                              right: -10,
                              child: InkWell(
                                onTap: () {
                                  if (mapContext.getSelectedMarker().images.length > 0)
                                    sliderController!.nextPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                                },
                                child: Icon(
                                  Icons.chevron_right,
                                  size: kIsWeb ? 100 : 85,
                                  color: kTestSecondColor,
                                ),
                              )
                          ),
                        if(mapContext.getSelectedMarker().images != null && mapContext.getSelectedMarker().images.length > 1)
                          Positioned(
                              top: MediaQuery.of(context).size.height * 0.125,
                              left: -10,
                              child: InkWell(
                                onTap: () {
                                  if (mapContext.getSelectedMarker().images.length > 0)
                                    sliderController!.previousPage(duration: new Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                                },
                                child: Icon(
                                  Icons.chevron_left,
                                  size: kIsWeb ? 100 : 85,
                                  color: kTestSecondColor,
                                ),
                              )
                          ),
                      ],
                    ),
                  ),
                ),
              ])
        ),
      )
    );
  }
}